Skip to content

Instantly share code, notes, and snippets.

View podo's full-sized avatar

Giedrius Jaloveckas podo

55 followers · 4 following
View GitHub Profile
@scottjehl
scottjehl / noncritcss.md
Last active August 12, 2023 16:57
Comparing two ways to load non-critical CSS

I wanted to figure out the fastest way to load non-critical CSS so that the impact on initial page drawing is minimal.

TL;DR: Here's the solution I ended up with: https://github.com/filamentgroup/loadCSS/

For async JavaScript file requests, we have the async attribute to make this easy, but CSS file requests have no similar standard mechanism (at least, none that will still apply the CSS after loading - here are some async CSS loading conditions that do apply when CSS is inapplicable to media: https://gist.github.com/igrigorik/2935269#file-notes-md ).

Seems there are a couple ways to load and apply a CSS file in a non-blocking manner:

@sergejmueller
sergejmueller / ttf2woff2.md
Last active March 9, 2024 13:37
WOFF 2.0 – Learn more about the next generation Web Font Format and convert TTF to WOFF2
@koenbok
koenbok / qc-framer.js
Created May 14, 2014 15:04
QC Spring Value Converter
var QcValueConverter = {
tensionFromQcValue: function(qcValue) {
return (qcValue - 30.0) * 3.62 + 194.0;
},
qcValueFromTension: function(tension) {
return (tension - 194.0) / 3.62 + 30.0;
},
frictionFromQcValue: function(qcValue) {
@magicznyleszek
magicznyleszek / jekyll-and-liquid.md
Last active January 25, 2025 20:12
Jekyll & Liquid Cheatsheet

Jekyll & Liquid Cheatsheet

A list of the most common functionalities in Jekyll (Liquid). You can use Jekyll with GitHub Pages, just make sure you are using the proper version.

Running

Running a local server for testing purposes:

@joshpuckett
joshpuckett / swipeangle.js
Created February 25, 2014 19:42
Swipe Angle
view.on("touchstart", function(e) {
var touch = event.touches[0]
//Grab the initial touch coordinates
xInit = touch.pageX
yInit = touch.pageY
})
view.on("touchmove", function(e) {
var touch = event.touches[0]
xCurrent = touch.pageX
@davemo
davemo / app.coffee
Last active March 25, 2020 13:25
Got a .coffee file with JSX? Here's how you can transpile to .js with Reacts JSX parsed.
`/** @jsx React.DOM */`
converter = new Showdown.converter
Comment = React.createClass
render: ->
rawMarkup = converter.makeHtml @props.children.toString()
`<div className="comment">
<h2 className="comment">{this.props.author}</h2>
<span dangerouslySetInnerHTML={{__html: rawMarkup}} />
@PaulKinlan
PaulKinlan / criticalcss.html
Last active March 15, 2023 02:13
Detect Critical CSS
<!DOCTYPE html>
<html>
<head>
<meta charset=utf-8 />
<title>JS Bin</title>
</head>
<body>
<h2>Original CSS</h2>
<style style="display: block; white-space: pre; font-family: monospace">
h2 { margin:0; }
@joaocunha
joaocunha / How To Hide The Select Arrow On Firefox.md
Last active December 10, 2023 13:05
How to hide <select> dropdown's arrow in Firefox when using "-moz-appearance: none;".

This is no longer a bug. I'm keeping the gist for historical reasons, as it helped to get it fixed. Make sure to read the notes by the end of the post.

How to remove hide the select arrow in Firefox using -moz-appearance:none;

TL;DR (or, the fix)

  1. Set -moz-appearance to none. This will "reset" the styling of the element;
  2. Set text-indent to 0.01px. This will "push" the text a tiny bit[1] to the right;
@daneden
daneden / css-starter.sublime-snippet
Created July 29, 2013 08:33
The starter stylesheet I use for nearly all my projects these days. Includes a Sublime Text snippet, activated by typing `css.starter` and hitting tab. Spits out the contents of s.css. Enjoy!
<snippet>
<content><![CDATA[
/*-----------------------------------*\
\$RESET
Blanket reset. For something less
volatile, I’d recommend Eric
Meyer’s reset.
@phamann
phamann / Lessons.md
Last active June 6, 2024 11:35

Lesson's learnt building the Guardian

Below is a collection of my favourite responses I gathered from Guardian engineers when asked the question: What have you learnt starting from scratch and building a mobile-first next generation web platform for the Guardian?

Daithi O Crualaoich

  • Work with great people.
  • Deploy like crazy. This means the team has to control the infrastructure as well as code.
  • Design is not a service. Designers have to sit in the team.
  • Infrastructure is intrinsically unreliable. Discard and replace is the robust strategy.
  • Use your CDN for HTML too.
  • Don't always do as you are told.