Skip to content

Instantly share code, notes, and snippets.

View 7studio's full-sized avatar

Xavier Zalawa 7studio

43 followers · 88 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:

@thom4parisot
thom4parisot / README.md
Last active August 29, 2015 14:06
Node.js usual project directory structure. 
├── bin
├── config
├── data
├── dist
├── doc
├── lib
│   └── models
├── node_modules
├── src
@addyosmani
addyosmani / README.md
Last active May 16, 2026 20:29 — forked from 140bytes/LICENSE.txt
108 byte CSS Layout Debugger

CSS Layout Debugger

A tweet-sized debugger for visualizing your CSS layouts. Outlines every DOM element on your page a random (valid) CSS hex color.

One-line version to paste in your DevTools

Use $$ if your browser aliases it:

~ 108 byte version

@tdd
tdd / web-learning-and-watchind.md
Last active December 9, 2015 13:46
Quelques ressources pour faire sa veille technique et apprendre mieux autour du web

Lisez plutôt…

cet article détaillé que j'ai écrit ensuite…

Je laisse le Gist ici pour ne pas casser vos liens, mais bon 😄

Par e-mailing/RSS/etc.

Chaque jour ou chaque semaine :

@notabene
notabene / gist:e6b5d985942e610d8af0
Created November 14, 2014 09:24

Twitter's handling of emojis

I just saw this in a tweet:

<img class="twitter-emoji" src="https://abs.twimg.com/emoji/v1/72x72/1f61a.png" draggable="false" alt="😚" title="Kissing face with closed eyes" aria-label="Emoji: Kissing face with closed eyes">

I couldn't help thinking:

  1. Yay, Twitter gives a lot of consideration to Accessibility and this is good.
  2. Hey, this alt means nothing to the people who may need it
@KittyGiraudel
KittyGiraudel / gist:2fe840cbbc54463c5f0f
Last active August 29, 2015 14:10

About Sass and Gzip

I am a little familiar with the idea behind Gzip, thanks to this great video from Frédéric Kayser (in French), however there is a something I am still not sure about.

Basically, a string gets more and more compressed every time it is being repeated. And unless I'm wrong, the longer the string, the better.

Let's talk about Sass for a second. Please consider this mixin:

@mixin center($max-width) {
@p3t3r67x0
p3t3r67x0 / pseudo_elements.md
Last active June 18, 2026 15:52
A CSS pseudo-element is used to style specified parts of an element. In some cases you can style native HTML controls with vendor specific pseudo-elements. Here you will find an list of cross browser specific pseudo-element selectors.

Styling native elements

Native HTML controls are a challenge to style. You can style any element in the web platform that uses Shadow DOM with a pseudo element ::pseudo-element or the /deep/ path selector.

video::webkit-media-controls-timeline {
  background-color: lime;
}

video /deep/ input[type=range] {
@bastianallgeier
bastianallgeier / or.php
Last active October 26, 2016 13:28
<meta name="description" content="<?php echo $page->description()->or($site->description()) ?>">
@bobbygrace
bobbygrace / trello-css-guide.md
Last active August 15, 2026 15:33
Trello CSS Guide

Hello, visitors! If you want an updated version of this styleguide in repo form with tons of real-life examples… check out Trellisheets! https://github.com/trello/trellisheets

Trello CSS Guide

“I perfectly understand our CSS. I never have any issues with cascading rules. I never have to use !important or inline styles. Even though somebody else wrote this bit of CSS, I know exactly how it works and how to extend it. Fixes are easy! I have a hard time breaking our CSS. I know exactly where to put new CSS. We use all of our CSS and it’s pretty small overall. When I delete a template, I know the exact corresponding CSS file and I can delete it all at once. Nothing gets left behind.”

You often hear updog saying stuff like this. Who’s updog? Not much, who is up with you?

@jonathanstark
jonathanstark / verify-google-recaptcha-with-php
Last active July 16, 2024 17:06
Verify Google reCAPTCHA with PHP
#
# Verify captcha
$post_data = http_build_query(
array(
'secret' => CAPTCHA_SECRET,
'response' => $_POST['g-recaptcha-response'],
'remoteip' => $_SERVER['REMOTE_ADDR']
)
);
$opts = array('http' =>