Test Your Mobile Website Speed and Performance
Google-created tool for testing mobile speed and performance.
performance  tools 
6 weeks ago
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 
10 weeks ago
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
rscss
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
Bad SSL
Memorable site for testing clients against bad SSL configs.
security  ssl  tls  configuration  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
CSP STS PKP SRI ETC OMG WTF BBQ
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
Kap
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
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
Requestdiff is a tool for checking differences between to URLs, comparing HTTP headers and body content.
http  request  diff  tools 
october 2016
Next.js
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
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
Flexbugs
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
RoaringApps
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
Noisli
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
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
Loading webfonts with high performance on responsive websites
Once upon a time every website was only using Arial, Verdana, Garamond or Times New Roman for rendering the text, because these font were the only ones reliably installed on almost any computer. But these times are over. Webfonts are spread all over the internet, but we still don't really know, how to load them efficiently. This is a simple guide on what to do, to offer the optimal user experience without having to avoid the expensive accessories (aka webfonts).
performance  webfonts 
may 2016
Web Fonts Performance: Making Pretty, Fast
How to optimize web font loading for better performance.
performance  webfonts 
may 2016
PHPMailer
PHPMailer is a full-featured email creation and transfer class for PHP.
php  email 
march 2016
report-uri.io
CSP and HPKP are powerful security features that go widely unused across the web. For those who do implement CSP or HPKP, the reporting features can be difficult to implement and tricky to get right. report-uri.io brings attention to the benefits and ease of deployment of CSP and HPKP and make violation reporting just as easy to do.
csp  content-security-policy  report-uri  http-header  openspace:2017-03-22 
march 2016
You Might Not Need jQuery
jQuery and its cousins are great, and by all means use them if it makes it easier to develop your application. If you're developing a library on the other hand, please take a moment to consider if you actually need jQuery as a dependency. Maybe you can include a few lines of utility code, and forgo the requirement. If you're only targeting more modern browsers, you might not need anything more than what the browser ships with.
jquery  javascript 
march 2016
https://www.reindex.io/blog/you-might-not-need-underscore/
JavaScript is evolving. You might not need Underscore anymore.
underscorejs  javascript 
march 2016
The Complete Conceptual History of the Millennium Falcon
The Millennium Falcon is the most famous starship of all time, and a bonafide cultural icon in its own right. But it underwent a long and arduous conceptual phase before that final iconic shape emerged; the one now blasting its way across the big screen once again.
star-wars  millennium-falcon  design 
march 2016
Getting started with WKWebView using Swift in iOS 8
In iOS 8 and Mac OS X Yosemite Apple introduces the new WKWebView and the Swift language among a slew of other amazing stuff. In this article we'll take a quick look at how you can get started writing Swift by implementing a basic browser using the WKWebView class.
wkwebview  webview  app  swift  ios 
february 2016
Performance Budgeting with Grunt
How to use grunt-perfbudget to help enforcing a performance budget. Using WebPagetest in the background, the task lets you set budgets for a number of different metrics: SpeedIndex, visually complete, load time, etc.
performance  pagespeed  grunt 
february 2016
Plato
JavaScript source code visualization, static analysis, and complexity tool.
javascript  code-analysis 
january 2016
Fixing mixed content with CSP
As more and more sites are migrating to HTTPS, one of the biggest problems that will need solving is tracking down all of your HTTP resources to avoid mixed content warnings. Whilst this could sound like a daunting task, especially on sites with a large amount of content, CSP can very easily reduce that burden. Here's how!
https  csp  mixed-content  content-security-policy 
january 2016
ServiceWorker Cookbook
The Service Worker Cookbook is a collection of working, practical examples of using service workers in modern web apps.
javascript  service-workers 
december 2015
Microsoft Edge Platform Status
Status and roadmap of Microsoft Edge development.
browser  edge  platform-status  development 
november 2015
CSS Triggers
CSS properties that trigger layout.
css  performance  layout  transition  animation 
november 2015
Diaporama
Diaporama is an image/video/content slideshow engine providing high quality animation effects including Kenburns Effect and GLSL Transitions.
slideshow  javascript 
october 2015
How to draw a map
This tutorial covers the entire process for how to draw a map – from start to finish. In this case Jon from Fantastic Maps is illustrating a simple town map, but the steps apply to any map.
map  maps  drawing 
september 2015
« 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 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 magento map markdown media-query metadata microformats mobile mockup module 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:



description:


tags: