Skip to content

Instantly share code, notes, and snippets.

🇦🇺
JS, GraphQL & React

Jayden Seric jaydenseric

🇦🇺
JS, GraphQL & React
Block or report user

Report or block jaydenseric

Hide content and notifications from this user.

Learn more about blocking users

Contact Support about this user’s behavior.

Learn more about reporting abuse

Report abuse
View GitHub Profile
View favicon-optimization.md

How to super optimize a favicon

⚠️ This article is outdated: For some reason the ImageMagick convert CLI no longer generates smaller .ico files when the source .png files have been optimized. After a few hours investigating I can’t workout why, or even with what versions everything worked. Here is a related StackOverflow question.

Learn how to manually create optimized website favicon.ico files as much as 60%+ smaller in file size without sacrificing content or quality.

This is something very few people seem to do, probably because no single tool exists. A pity since a favicon.ico file in the website root (still best practice) is one of the few things guaranteed to be downloaded by every first-time visitor. The smaller it is, the sooner it can appear.

The savings can be particularly juicy for icons containing multiple sizes, which is also best practice given the variety of ways favicons are used.

View font-icons-like-a-boss-with-sass-and-font-custom.md

Font icons like a boss with Sass & Font Custom

⚠️ This article is outdated: First I moved on to a custom Gulp workflow, then for a while I used SVG symbols and external references with a polyfill. Now I use inline SVG React components, and occasionally plain old .svg files in img tags.

Here we take “Fun with Sass & font icons” to the next level by automating the tedious stuff, including the actual font generation.

Manage all your project’s font icons in one folder as nicely named SVG files. Add icons to this folder to have your fonts magically rebuilt and your Sass automatically set up for you to start using the icons via their nice names; without touching your markup or dealing with non-semantic class names.

What are the perks?

View forget-normalize-or-resets-lay-your-own-css-foundation.md

Forget normalize or resets; lay your own CSS foundation

⚠️ This article is outdated: Global CSS is an anti-pattern; components should be individually styled using tools such as styled-components. See Fix for the most recent, though still outdated styles from this article.

Most start their front end styles by throwing in a reset such as Eric Myer’s or the more fashionable normalize.css. I will say a few nasty things about both approaches before I present to you the perfectionist alternative: Your own custom foundation.

Foundation is a good word for a different approach. Resets strip user agent default styles back. Normalizing attempts to even out the differences and fix a few things. A foundation strips and adds style

View how-to-optimize-svg.md

How to optimize SVG

Editors like Illustrator can save out some really dumb SVG code sometimes. Properly optimized SVG files can be as much as 80% smaller. Bunches of empty groups, pointless attributes and many other inefficiencies decrease readability and reliability.

Every SVG file should be manually optimized in 3 passes using:

  1. Your vector graphic editor.
  2. The SVGO command-line optimization tool.
  3. Your text editor.
View how-to-write-smarter-css-animations.md

How to write smarter CSS animations

There are several tricks to writing efficient CSS animations that few people seem aware of. Most people borrow directly from common libraries such as Animate.css without realising how bloated they are.

You can:

  1. Omit start or end frames for greater versatility with less code.
  2. Combine similar frames.
  3. Combine animations to reduce keyframes declarations.
  4. Reverse animations to avoid separate "In" and "Out" keyframes.
@jaydenseric
jaydenseric / apollo-link-token.mjs
Created Nov 11, 2017
An Apollo Link for setting an auth token header.
View apollo-link-token.mjs
@jaydenseric
jaydenseric / .env
Created Oct 11, 2017
Custom fragment matcher and schema fetching script for `apollo-cache-inmemory`.
View .env
GRAPHQL_URI=http://localhost:3001/graphql
View zeit-now-g-suite-setup.md

Run each of the following lines, replacing yourdomain.com and codehere with your details:

now dns add yourdomain.com @ TXT google-site-verification=codehere
now dns add yourdomain.com @ MX ASPMX.L.GOOGLE.COM 1
now dns add yourdomain.com @ MX ALT1.ASPMX.L.GOOGLE.COM 5
now dns add yourdomain.com @ MX ALT2.ASPMX.L.GOOGLE.COM 5
now dns add yourdomain.com @ MX ALT3.ASPMX.L.GOOGLE.COM 10
now dns add yourdomain.com @ MX ALT4.ASPMX.L.GOOGLE.COM 10
View atom-setup-guide.md

Atom setup guide

Config

  • Settings, Editor, Invisibles. Tick Show Indent Guide and Show Invisibles.

Plugins

To install all the universally recommended plugins, in Terminal run:

@jaydenseric
jaydenseric / form-validation-buggyfill.js
Created Jun 26, 2016
Fixes some browsers allowing invalid forms to submit.
View form-validation-buggyfill.js
// Fixes some browsers allowing invalid forms to submit, mostly an issue with Safari allowing empty required fields.
// http://caniuse.com/#search=required
window.addEventListener('submit', (event) => {
if (!event.target.noValidate && !event.target.checkValidity()) {
event.preventDefault()
window.alert('Please correct invalid form fields and resubmit.')
}
})
You can’t perform that action at this time.