CSS Scan
Instantly check or copy computed CSS. Inspect Element on steroids: study how things are made on the web in real-time and copy computed styles with no hassle (neither longhand styles).
bookmarklet  css  styles 
september 2018
Dank Mono
Dank Mono is the coding font you want: Designed for aesthetes with code and Retina displays in mind. Delightful ligatures and an italic variant.
font  monospace  coding  ligatures 
july 2018
Atlas is a set of APIs for looking up information about locations.
geo  location  api  timezone  weather  geocoding  maps  indieweb  php  gps  geospatial 
july 2018
Alex - Catch insensitive, inconsiderate writing
Alex forces politically correct writing by linting text.
lint  text  markdown  language 
july 2018
Bytesize is a passion project Dan Klammer started to help learn the SVG spec, particularly SVG Paths and how they are drawn within code. Each icon is hand-coded along a 32x32 grid, and uses SVG stroke allowing for maximum style flexibility; meaning you can adjust the weight, color, size, and if you want the edges to be round or square.
svg  icons  icon-set 
june 2018
Workbox is a set of libraries and Node modules that make it easy to cache assets and take full advantage of features used to build progressive web apps.
pwa  service-workers  library  nodejs 
june 2018
GitHub Style Guide
Resources, tooling, and design guidelines for building websites with Primer, GitHub's front-end framework.
styleguide  github  primer 
june 2018
A simple PHP script for static maps.
php  maps  static-maps  openstreetmap 
june 2018
Using Dnsmasq for local development on macOS
This is a quick guide to installing Dnsmasq on macOS and using it to redirect development sites to your local machine.
macos  dns  dnsmasq  proxy 
may 2018
An extension for PopClip to integrate with Choosy.
choosy  popclip  extension  browser 
may 2018
Grammarly: Free Writing Assistant
Grammarly makes sure everything you type is clear, effective, and mistake-free.
language  grammar  typing 
may 2018
Automatic visual diffing with Puppeteer
Quick test setup for testing visual changes in the browser. Quite useful for CSS refactoring.
javascript  testing  CSS  diff  screenshots  puppeteer 
february 2018
CSP Evaluator
CSP Evaluator allows developers and security experts to check if a Content Security Policy (CSP) serves as a strong mitigation against cross-site scripting attacks. It assists with the process of reviewing CSP policies, which is usually a manual task, and helps identify subtle CSP bypasses which undermine the value of a policy.
csp  security  validator 
december 2017
Specificity Visualizer
With the above tool you get a quick overview of selectors and their specificities across a CSS file in bird’s-eye view. It’s a visual way to identify potentially problematic patterns and especially useful for analyzing very big and complex stylesheets.
css  visualization  specificity 
december 2017
cssdb is a comprehensive list of CSS features and their positions in the process of becoming implemented web standards.
css  development  standards 
november 2017
Inclusive Components
A blog trying to be a pattern library, with a focus on inclusive design. Each post explores a common interface component and comes up with a better, more robust and accessible version of it.
accessibility  inclusive-design  blog  components 
november 2017
Essential Image Optimization
We should all be automating our image compression.
image-optimization  images  book 
november 2017
The Modern Javascript Tutorial
How it's done now. From the basics to advanced topics with simple, but detailed explanations. Main course contains 2 parts which cover JavaScript as a programming language and working with a browser. There are also additional series of thematic articles.
javascript  tutorial 
november 2017
Test Your Mobile Website Speed and Performance
Google-created tool for testing mobile speed and performance.
performance  tools 
july 2017
Breaking Out With Viewport Units and Calc
An article by Tyler Sticka about a way to break out of content viewports by using Viewport Units and the calc() function.
CSS  viewport  grid  images  article 
june 2017
Debouncing and Throttling Explained Through Examples
Debounce and throttle are two similar (but different!) techniques to control how many times we allow a function to be executed over time. Having a debounced or throttled version of our function is especially useful when we are attaching the function to a DOM event. Why? Because we are giving ourselves a layer of control between the event and the execution of the function. Use debounce, throttle and requestAnimationFrame to optimize your event handlers. Each technique is slightly different, but all three of them are useful and complement each other.
javascript  debounce  throttle  requestanimationframe  delay  performance 
june 2017
Tasty CSS-animated hamburgers
This is a great, pure CSS, accessible solution for animated hamburger buttons.
hamburger  css  menu  animation  navigation 
may 2017
SVGito - An SVG Optimizer
SVGito is a little web app for optimizing SVG graphics. Optimizations include cleaning up Sketch’s inside/outside border markup, replacing use elements, and removing useless fill rules. Best when used before other optimizers, like SVGO.
svg  compression  optimization  tools  sketch-app 
may 2017
Simple Icons
SVG icons for popular brands, maintained by Dan Leech.
icons  svg  brand 
april 2017
A set of simple ideas to guide your process of building maintainable CSS. It is not a framework. It's simply a set of ideas to guide your process of building maintainable CSS for any modern website or application.
CSS  maintenance  coding-guidelines  structure  components 
april 2017
JavaScript Fetch API in action
Syntax for XHR was provided more then 10 years ago (XMLHttpRequest2 - about 4 years ago). From jQuery Deferred, $q and Native JavaScript Promises people became familiar and like Promises in JS. It’s time for new laconic API to do AJAX-requests and interact with them.
fetch-api  javascript  migration  xhr  timeout  parser  processor 
april 2017
How to stop abusing your users time!
Time has become the most valuable commodity for many people. And wasting their time is the ultimate crime. This page records little nuisances. By eliminating these from our sites we will save lives. Lifetimes of wasted moments.
abuse  ux  anti-patterns 
april 2017
Micro Animations
The Micro Animations library is a marketplace for tiny animations used in prototyping tools and alike.
prototyping  animation  marketplace  gif 
april 2017
Dual-Screen Backgrounds
Gorgeous dual-screen backgrounds for Macs.
wallpaper  macos  background-image  dualscreen 
april 2017
CSP Cheat Sheet
This page is a concise overview of all supported features and directives in Content Security Policy. It can be used as a quick reference guide to identify valid and invalid directives and values, contains example policies and guidance on how to use CSP effectively.
csp  http-header  http  header  security  openspace:2017-03-22 
march 2017
PKP Cheat Sheet
This page is a concise overview of all supported features and directives in HTTP Public Key Pinning. It can be used as a quick reference guide to identify valid and invalid directives and values, contains example policies and guidance on how to use HPKP effectively.
pkp  public-key  http-header  http  header  security  openspace:2017-03-22 
march 2017
Security Headers
There are services out there that will analyse the HTTP response headers of other sites but I also wanted to add a rating system to the results. The HTTP response headers that this site analayses provide huge levels of protection and it's important that sites deploy them. Hopefully, by providing an easy mechanism to assess them, and further information on how to deploy missing headers, we can drive up the usage of security based headers across the web.
security  header  http  http-header  openspace:2017-03-22 
march 2017
In this talk Scott Helme introduces you to some awesome features that allow us to quickly and easily boost security and offer better protection to our visitors. From mitigating Cross-Site Scripting (XSS) to enforcing the use of HTTPS or protecting ourselves against rogue Certificate Authorities and Content Delivery Networks, these are just some of the things that are possible.
openspace:2017-03-22  security  video  csp  sts  pkp  sri 
march 2017
Request Map Generator
Generates a node map of all of the requests on the page. Rapidly identify what third-parties are on your site, where your transmitted bytes are coming from and how slow your domains are!
performance  request  third-party 
march 2017
Articles About Bicycle Repair
Articles about bicycle repairing.
bike  repair  article 
february 2017
Crontab Generator
Generate your crontab line easily.
cronjob  crontab 
february 2017
STS Cheat Sheet
This page is a concise overview of all supported features and directives in HTTP Strict Transport Security. It can be used as a quick reference guide to identify valid and invalid directives and values, contains example policies and guidance on how to use HSTS effectively.
sts  http-header  http  header  security  openspace:2017-03-22 
february 2017
Tough Cookies
Scott Helme gives some tips on improving your cookie strengthness. The perfect cookie: Set-Cookie: __Host-sess=123; path=/; Secure; HttpOnly; SameSite
cookies  cookie-prefixes  security  xss 
february 2017
Does Google execute JavaScript?
Google may or may not decide to run your JavaScript, and you don’t want your business to depend on its particular inclination of the day. Do server-side/universal/isomorphic rendering just to be safe.
google  seo  javascript  crawler  server-rendering 
january 2017
The 100% correct way to do CSS breakpoints
Article on defining good (or even the best) breakpoints for responsive design in CSS.
CSS  breakpoints  responsive-webdesign  responsive-design 
december 2016
ReactJS: Props vs. State
This “props vs. state” question is pretty common for new React devs - they look so similar, but are used differently. So what’s going on there?
react  redux  props  state 
december 2016
Electron app for capturing screen movies.
app  capture  screencast  screenshots 
december 2016
Resilient Web Design
Resilient Web Design, you might think that this is a handbook for designing robust websites. This is not a handbook. It’s more like a history book, written by Jeremy Keith.
book  webdesign  web  history 
december 2016
Vorlon.JS is an open source, extensible, platform-agnostic tool for remotely debugging and testing your JavaScript. Powered by node.js and socket.io.
javascript  testing  nodejs  socketio  remote-debugging  debugger 
october 2016
Requestdiff is a tool for checking differences between to URLs, comparing HTTP headers and body content.
http  request  diff  tools 
october 2016
Next.js is a minimalistic framework for server-rendered React applications.
react  javascript  framework  server-rendering 
october 2016
Setup Keybase.io, GPG & Git to sign commits on GitHub
This is a step-by-step guide on how to create a GPG key on keybase.io, adding it to a local GPG setup and use it with Git and GitHub.
git  github  keybase  pgp  gpg  gnupg 
october 2016
Web Platform Feature Availability
Powered by data from caniuse.com and StatCounter, this page indicates the percentage of users who have a browser that natively supports various web platform features.
web-platform  html  css  javascript  caniuse  statistics 
october 2016
Your Social Media Fingerprint
Without your consent most major web platforms leak whether you are logged in. This allows any website to detect on which platforms you're signed up. Since there are lots of platforms with specific demographics an attacker could reason about your personality, too.
security  login  social-networking 
october 2016
Hyperform is a complete implementation of the HTML5 Form Validation API in JavaScript. It replaces or polyfills the browser’s native methods and eases your validation task with custom events and hooks.
forms  validation  html5  javascript 
october 2016
Enhancing a comment form: From basic to custom error message to BackgroundSync
How to use progressive enhancement and service workers to enable offline usage and background syncing of comment forms.
javascript  offline  background-sync  service-workers  article 
october 2016
Why Vue (not React) is the new jQuery
Vue is rapidly gaining mindshare. It’s been heavily adopted by the Laravel community as one of their preferred frontend frameworks. Vue provides an answer to the issue of JavaScript fatigue, and it is a worthy successor to the legacy of jQuery as the ideal entry point for beginners to the world of modern frontend development.
vue  react  jouery  javascript  article 
october 2016
This repository is a community-curated list of flexbox issues and cross-browser workarounds for them. The goal is that if you're building a website using flexbox and something isn't working as you'd expect, you can find the solution here.
css  flexbox  bug 
october 2016
Crowd-sourced application compatibility for macOS, iOS and Windows.
software  update  compatibility  macos  ios  windows 
september 2016
Hiding DOM elements
This document explains the various ways of hiding things and the implications that come with that. When we say an element is hidden, we usually mean it is not visible. However, the screen is not the only output mechanism we may need to hide content from. Systems like screen readers and braille displays rely on a document's representation in the accessibility tree.
dom  accessibility  visibility  screenreader 
september 2016
Template Literals are Strictly Better Strings
This article explores how template literals are strictly better than strings, and how they too should become the new default of a post-ES6 era—over single and double quoted strings.
javascript  es6  templates  quotes 
september 2016
Oh shit, git!
Git is hard: screwing up is easy, and figuring out how to fix your mistakes is fucking impossible. Git documentation has this chicken and egg problem where you can't search for how to get yourself out of a mess, unless you already know the name of the thing you need to know about in order to fix your problem. So here are some bad situations and how you eventually got yourself out of them in plain English.
git  mistakes  fixes  development  cli 
september 2016
Improve focus and boost your productivity. Mix different sounds and create your perfect environment.
productivity  noise  white-noise  brown-noise  pink-noise 
august 2016
Reducing JPG File size
If you’re a modern developer, then you use JPEG files. Doesn’t matter if you’re a web dev, mobile dev, or some weird sysadmin who just sends around memes all day. JPEGs are a part of your job, and critical to the experience of the users who benefit from that work. Which is why it’s so important to make sure these JPEG files are as small as possible.
jpeg  images  image-optimization  performance 
august 2016
True Hash Maps in JavaScript
Using an object literal as a simple means to storing key-value pairs is common place within JavaScript. However, an object literal is not a true hash map and therefore poses potential liabilities if used in the wrong manner. While JavaScript may not offer native hash maps (at least not cross-browser), there is a superior alternative to object literals to capture the desired functionality without the pitfalls.
javascript  hashmaps 
august 2016
Javascript Closures
A "closure" is an expression (typically a function) that can have free variables together with an environment that binds those variables (that "closes" the expression).
javascript  reference  closures 
august 2016
What No One Told You About Z-Index
The problem with z-index is that very few people understand how it really works. It’s not complicated, but it if you’ve never taken the time to read its specification, there are almost certainly crucial aspects that you’re completely unaware of.
CSS  z-index 
august 2016
Designing Better JavaScript APIs
At some point or another, you will find yourself writing JavaScript code that exceeds the couple of lines from a jQuery plugin. Your code will do a whole lot of things; it will (ideally) be used by many people who will approach your code differently. They have different needs, knowledge and expectations. This article covers the most important things that you will need to consider before and while writing your own utilities and libraries.
javascript  api  api-design 
august 2016
The anatomy of a credit card payment form
Paying for something online with a credit card is simple, right? Yes and no. Yes, because we've been doing it since the early days of the Internet (e.g. Amazon), and no, because no two credit card forms are alike.
forms  design  credit-cards  usability  ux 
august 2016
That's so fetch!
There's been some confusion around the new fetch API recently. Let's clear things up.
fetch-api  javascript  article 
august 2016
DNSSEC: An Introduction
DNSSEC is a set of security extensions to DNS that provides the means for authenticating DNS records.
security  dns  dnssec 
august 2016
ESLint - Pluggable JavaScript linter
ESLint is an open source project originally created by Nicholas C. Zakas in June 2013. Its goal is to provide a pluggable linting utility for JavaScript.
eslint  javascript  lint 
august 2016
WTF, forms?
Friendlier HTML form controls with a little CSS magic. Designed for IE9+, as well as the latest Chrome, Safari, and Firefox.
css  forms 
august 2016
Riot.js — A React-like user interface micro-library
Riot is Web Components for everyone. Think React + Polymer but without the bloat.
javascript  web-components  react  riotjs 
august 2016
Social Media Sharing Buttons
Super fast and easy Social Media Sharing Buttons. No JavaScript. No tracking.
social-media  sharing  buttons  performance 
august 2016
Pointer Events Polyfill: a unified event system for the web platform
PEP polyfills pointer events in all browsers that haven't yet implemented them, providing a unified, responsive input model for all devices and input types.
pointer-events  javascript  polyfill  pep  jquery 
may 2016
Cookie prefixes - No more insecure cookies!
A short blog post that explains what Cookie Prefixes are and how they may protect the user.
cookies  cookie-prefixes  security  http 
may 2016
Why Javascript Development is Crazy
Grunt/Gulp npm, require.js, browserify, es6, compilers, transpilers, jasmine mocha chai, react/angular/ember, closures, prototypes. *head explodes*
javascript  article  fatigue 
may 2016
Emoji: how do you get from U+1F355 to 🍕?
Monica Dinculescu nerds out on emoji and tells everyone about it. ❤️
emoji  unicode  article 
may 2016
Performance-Bookmarklet helps to analyze the current page through the Resource Timing API, Navigation Timing API and User-Timing - requests by type, domain, load times, marks and more. Sort of a light live WebPageTest.
performance  bookmarklet  timing-api  webpagetest 
may 2016
Case Study - Analyzing Web Font Performance
Comparison of some of the top web fonts to see how different delivery methods, such as serving from Google Fonts, hosting locally, and 3rd parties, affect the overall load times.
performance  webfonts 
may 2016
« earlier      
@font-face accessibility ad ajax android animation api apple article background-image blog blueprint-css boa09 boa2009 book bookmarklet bootstrap border-radius box-shadow browser build bundle buttons caffeine calendar campaign canvas charts cheatsheet chrome cms coding-guidelines coffeescript color communication community comparison compression connect conversion cookies csp css css3 cssdoc cvs database debugger design development dns documentation dom download drink drupal ecommerce editor email excel extension facebook feed file-generator filter firebug firefox fireworks flash flickr fluid font font-rendering food forms framework freelancer fun games generator geo germany git github gnupg google gpg gradient graphs grid grunt guide h264 hacks header history html html5 http http-header humor icons ie ie6 images inspiration internet-explorer ios ipad iphone jabber java javascript job jpeg jquery knowledge law layout less library lightbox like links lint linux local-storage mac macos magento map maps markdown media-query metadata microformats mobile mockup module monospace mootools mp3 music mvc mysql navigation nodejs offline ogg oop open-source openid openspace:2017-03-22 opera optimization parser password patterns pdf performance photography photos photoshop php plugin png polyfill presentation productivity programming prototype prototyping python rails react reference regex responsive-design responsive-webdesign ruby safari sass screencast screenreader screenshots scrollbars search security selectors semantics seo server service-workers shell shooter shopping showcase slideshow snippet social-media social-networking software sound speed standards statistics study styleguide stylus subversion support svg svn tea technology templates terminal testing textmate theme tips to-order tools transform transition transparency tutorial tv twitter typography ui unicode url usability ux validator version-control video visualization w3c wallpaper wcag web2.0 webdesign webfonts webkit wiki windows wireframes wordpress xhtml xml xss yql yui zend-framework

Copy this bookmark: