Skip to content

Instantly share code, notes, and snippets.

View renatocarvalho's full-sized avatar
💭
🤘✨

Renato Carvalho renatocarvalho

💭
🤘✨
View GitHub Profile
// clearfix
@mixin clearfix {
&::after {
content: "";
display: block;
clear: both;
}
}
// edit font rendering -> tip: use for light text on dark backgrounds

SASS to Styled Component equivalents

Moving to Styled Components (from here on in known as SC as it's a pain to type) from SASS can be head work and can make you feel like you don't know CSS anymore. To aid in the conversion process this is a very high level overview of how to do the equivalents of SASS in SCs as the official documentation is often left wanting for this sort of thing.

Firstly

Assume one of following imports is always called in the SC examples where appropriate but not both

import styled from "styled-components"
#!/bin/sh
DIR=/home/username/hosting/public
URL=http://your-webflow-site.webflow.io/
cd $DIR
wget $URL --recursive --page-requisites --html-extension --convert-links -xnH -e robots=off
firebase deploy
@ngokevin
ngokevin / serviceworker.js
Last active March 12, 2023 09:52
Service Worker Template - cache-else-network + network-else-cache
var VERSION = 'v1';
var cacheFirstFiles = [
// ADDME: Add paths and URLs to pull from cache first if it has been loaded before. Else fetch from network.
// If loading from cache, fetch from network in the background to update the resource. Examples:
// 'assets/img/logo.png',
// 'assets/models/controller.gltf',
];
@robwent
robwent / disqus-ondemand.html
Last active September 9, 2021 07:59
Loads Disqus comments on click with native JavaScript. Opens comments when linked to directly.
<div class="comments-block">
<button id="show-comments" onclick="disqus();return false;">Load Comments</button>
</div>
<div id="disqus_thread"></div>
<script>
var disqus_loaded = false;
var disqus_shortname = 'xxxx'; //Add your shortname here
@hsleonis
hsleonis / better-font-smoothing.css
Last active January 17, 2024 00:16
Better font smoothing in cross browser
html {
/* Adjust font size */
font-size: 100%;
-webkit-text-size-adjust: 100%;
/* Font varient */
font-variant-ligatures: none;
-webkit-font-variant-ligatures: none;
/* Smoothing */
text-rendering: optimizeLegibility;
-moz-osx-font-smoothing: grayscale;
@PurpleBooth
PurpleBooth / README-Template.md
Last active May 25, 2024 19:14
A template to make good README.md

Project Title

One Paragraph of project description goes here

Getting Started

These instructions will get you a copy of the project up and running on your local machine for development and testing purposes. See deployment for notes on how to deploy the project on a live system.

Prerequisites

@runspired
runspired / ember-recipes.md
Last active August 11, 2016 02:46
ember-recipes

#Ember Recipes

Recipes should be tested.

  • Having tested recipes helps make ensure they still work with new versions of Ember.
  • It helps document how you should test a feature in your app.
  • It would enable us (or someone else) to build walk through test-driven tutorials for common Ember patterns and needs.

Recipes should be self-documenting

@Vestride
Vestride / encoding-video.md
Last active May 17, 2024 06:55
Encoding video for the web

Encoding Video

Installing

Install FFmpeg with homebrew. You'll need to install it with a couple flags for webm and the AAC audio codec.

brew install ffmpeg --with-libvpx --with-libvorbis --with-fdk-aac --with-opus
@romulomachado
romulomachado / update-to-cedar-14.sh
Last active August 29, 2015 14:19
How to update all your Heroku apps to cedar-14
# The Cedar-14 stack is the latest version of the Heroku Cedar stack.
# It features updated system dependencies and runs on a recent version of Ubuntu Linux.
# Use this scipt to update all your apps.
# Fill this array with your apps' names.
apps=( app-name-1 app-name-2 app-name-3 app-name-4 ... app-name-n )
for app in "${apps[@]}"
do