Skip to content

Instantly share code, notes, and snippets.

Avatar
💭
🤘

Renato Carvalho renatocarvalho

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

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"
View deploy.sh
#!/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 Nov 29, 2021
Service Worker Template - cache-else-network + network-else-cache
View serviceworker.js
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 Sep 9, 2021
Loads Disqus comments on click with native JavaScript. Opens comments when linked to directly.
View disqus-ondemand.html
<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 Apr 20, 2022
Better font smoothing in cross browser
View better-font-smoothing.css
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 16, 2022
A template to make good README.md
View README-Template.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

View ember-recipes.md

#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 10, 2022
Encoding video for the web
View encoding-video.md

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 Aug 29, 2015
How to update all your Heroku apps to cedar-14
View update-to-cedar-14.sh
# 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