We are a fictional Web Development company based in San Clemente, CA. We don't actually produce anything, but we love looking for inspiration and interesting articles about Web Development.

Inspiration

<

In Pieces

30 Endangered Species, 30 Pieces.

View more
<

Video Chat

Node-Webkit, WebRTC and Angularjs – A Video Chat Client

View more

React.js cheatsheet

View more
<

Technical Machine

Hardware development for software developers.

View more
<

Design Principles

View more
<

The Ghost in the MP3

The Ghost in the MP3

View more
<

Codrops

Some Ideas for Checkout Effects

View more
<

Sortable

Sortable. No jQuery.

View more
<

FiftyThree

Fluid Text Inputs

View more
<

Twitter's Fave Animation

Twitter's "fave" animation

View more
<

Transworld Surf Redesign

Redesigning not only the magazine but also updating the branding.

View more
<

Linear Algebra / Mathematics / MIT OpenCourseWare

Linear Algebra / Mathematics / MIT OpenCourseWare

View more
<

Name that Color

View more
<

Codementor

Build your own Google TV

View more
<

Ethersheet

Callaborative spreadsheets

View more
<

OpenEars

iPhone Voice Recognition and Text-To-Speech

View more
<

OriDomi

The web is flat, but now you can fold it up.

View more
<

CodyHouse

A handy tabbed navigation, optimized for mobile devices, with support for both horizontal and vertical menu positioning.

View more
<

Corner Morph

Off-Canvas Menu Effects

View more
<

JPG PNG to SVG Mask

Combine the transparency of a PNG with the compression of a JPEG.

View more
<

Typographic Design Patterns and Best Practices

Even with a relatively limited set of options in CSS, typography can vary tremendously using pure CSS syntax. Serif or sans-serif? Large or small font? Line height, spacing, font size and padding… The list goes on and on.

View more

Mazwai

Public Domain videos

View more
<

Jack Frigaard

Bézier Clock

View more
<

CodePen

SVG Loading icons

View more
<

hello.js

Javascript API for OAuth2 authentication and REST services

View more

Monocle

Scroll the page and watch list items expand under this magnifying area.

View more
<

CSS-Tricks

Lucas Bebber's Glitch is a super cool effect.

View more

uilang

a minimal, ui-focused programming language for web designers

View more
<

Chartist

Simple responsive charts

View more

way.js

way.js is a simple, lightweight, persistent, framework-agnostic javascript library that allows you to bind DOM elements to an in-memory datastore (with no to little JS code). If you like buzzwords, that means super easy two-way databinding.

View more
<

Cheetyr

Cheatsheets for Designers

View more
<

TheStocks.im

Best royalty free stock photos in one place

View more

sweep.js

A small JavaScript library that enables proper color transitions through the HSL and HUSL spaces.

View more

p5.js

p5.js

View more
<

Papa Parse

Papa Parse - Powerful CSV parser for Javascript

View more
<

Waves

Waves

View more

Animenu

I've been pretty happy lately to see I'm still receiving a lot of positive feedback on my animated dropdown menu. I found that quite encouraging and I decided to start working on an improved version of it using SASS & Compass. The new version is responsive, has no JavaScript dependency and it's hosted on GitHub too.

View more
<

Material Kit

Hi! Here is the first version of Android Material Illustrator Kit. Main…

View more

Burger Click

Burger Click - CodePen

View more
<

Jonathan Nicol

Center and crop thumbnails with CSS

View more

Steady.js

Steady.js

View more
<

MotorCortex.js

View more
<

Tridiv

Tridiv / CSS 3D Editor

View more
<

demosthenes

CSS Slidy 2.0: Captions

View more
<

Magic Mirror

Xonay Labs / Michael Teeuw

View more
<

Public Domain Images

View more
<

Gridzzly

Gridzzly.com - Make your own grid paper.

View more
<

Sagmeister

Sagmeister

View more
<

Bourbon

Forget about vendor prefixes.

View more
<

Premium Pixel

View more
<

Kb

Kb's Portfolio

View more
<

p-hold

View more

Hangouts

Hangouts on Polymer

View more

Underlining

CodePen - A Pen by Gary Hepting

View more
<

Floating Labels

Floating Labels

View more
<

Brad Frost

Single-Field Credit Card Input Pattern / Brad Frost Web

View more
<

Budi Satria Kwan

Budi Satria Kwan / Society6

View more
<

Codepen

Advanced animation path

View more
<

iHover

View more
<

Kim Byungkwan

View more
<

Codrops

Progress Button Styles

View more
<

EpicEditor

EpicEditor - An embeddable JavaScript Markdown editor

View more
<

KrakenJS

KrakenJS Suite

View more
<

Wes Anderson Palettes.

Wes Anderson Palettes.

View more
<

Bootflat

Documentation - Bootflat

View more

Brick

Webfonts that actually look good.

View more
<

Yelp

Styleguide / Yelp

View more

MailChimp

Pattern Library / MailChimp

View more
<

Adtile

Responsive & Fixed One Page Nav

View more
<

EpicEditor

EpicEditor - An embeddable JavaScript Markdown editor

View more

CodePen

Wrapping elements with nth-child uglyness

View more

restify

API Guide

View more
<

Google Ventures

Google Ventures

View more
<

IM Free

View more
<

Gratisography

View more
<

picjumbo

View more
<

Unsplash

Unsplash

View more
<

Little Big Details

View more
<

lazy-ads

madgex/lazy-ads

View more
<

CSS-Tricks

View more
<

DozerJS

DozerJS Foundational Framework

View more
<

80s Typography

View more
<

Justin Aguilar

CSS3 Animation Cheat Sheet

View more
<

Grid

Grid

View more
<

Image Cutter

Image Cutter - Joust Multimedia

View more
<

Drop

Drop

View more

Tether

Tether – Marrying elements for life

View more

Andrew Hoyer

Andrew Hoyer

View more
<

OCW Bookshelf

View more
<

iugo.js

decoupling data from DOM

View more

Login Form - CodePen

Login Form - CodePen

View more
<

BookBlock

Book Preview with BookBlock

View more
<

Rounded by Gravity

View more

Ifvisible.js

Crosbrowser & lightweight way to check if user is looking at the page or interacting with it.

View more
<

Dynatable.js

jQuery plugin for HTML5 JSON interactive tables and more

View more
<

michal krasnopolski

michal krasnopolski: classic movie posters

View more

CopyPasteCharacter.com

View more

Good Kickoff Meetings

Good Kickoff Meetings

View more
<

Pattern Lab

Pattern Lab / Build Atomic Design Systems

View more
<

SuperFriendly

TechCrunch - SuperFriendly

View more
<

stickUp

A simple plugin that "sticks" an element to the top of the browser window while scrolling past it, always keeping it in view. This plugin works on multi-page sites, but has additional features for one-pager layouts.

View more
<

Matt D. Smith

Dribbble - [GIF] Float Label Form Interaction by Matt D. Smith

View more
<

Design Principles

Design Principles FTW

View more

Chosen

Chosen: A jQuery Plugin by Harvest to Tame Unwieldy Select Boxes

View more
<

Free Vector Maps

Free Vector Maps / Royalty-Free Vector Maps

View more
<

456 Berea Street

View more

Drawingboard.js

Drawingboard.js: a simple canvas based drawing app that you can integrate easily on your website.

View more
<

Type we like

View more
<

Typ.io

It's never been easier to deconstruct designers' decisions so we're revealing them for all to see. We look under the hood of websites to show what fonts they're using and how they're using them.

View more
<

favico.js

Make a use of your favicon

View more
<

Trunk.js

View more
<

SitePoint

Build an Eye-catching Banner Ad in Illustrator

View more

StackEdit

StackEdit

View more
<

heimcontrol.js

Home automation in Node.js with Raspberry PI and Arduino

View more
<

parallax.js

parallax.js reacts to the orientation of your smart device, offsetting layers depending on their depth within a scene...

View more
<

UIBox

Curated HTML, CSS, JS UI Component Library

View more
<

Andy Sowards

100 Best Free Icons

View more

Font Awesome

Font Awesome, the iconic font designed for Bootstrap

View more
<

Arrested Development

Arrested Development / by Nigel Evan Dennis

View more

Skeuocard

Skeuocard by kenkeiter

View more
<

Mashable

14 Fantastic Free Tools for Design Collaboration

View more
<

Typewolf

Typewolf — Typographic Inspiration for the Modern Web

View more
<

Evan Wallace

WebGL Water

View more
<

Abduzeedo

Beautiful Water Effect in Photoshop CC

View more
<

Abduzeedo

Beautiful Houses: Las Palmas House / Abduzeedo Design Inspiration

View more
<

Chris LaBrooy

His typography projects are often a combination of type and related objects all rendered in 3D. Chris crafts everyday objects either a furniture or buildings injected by a familiar quotation in a refreshing way.

View more

What We're Reading

GitHub Flow Like a Pro with these 13 Git Aliases
“GitHub Flow is a Git work flow with a simple branching model. The following diagram of this flow is from Zach Holman's talk on How GitHub uses GitHub to build GitHub.”
Hardening node.js for production part 2: using nginx to avoid node.js load
“This is part 2 of a quasi-series on hardening node.js for production systems (e.g. the Silly Face Society). The previous article covered a process supervisor that creates multiple node.js processes, listening on different ports for load balancing. This article will focus on HTTP: how to lighten the incoming load on node.js processes. Update: I’ve also posted a part 3 on zero downtime deployments in this setup.”
Using NGINX with Node.js and WebSockets with Socket.IO
“In this post we’ll talk about using NGINX with Node.js and socket.IO. Our post about building real-time web applications with WebSockets and NGINX has been quite popular, so in this post we’ll continue with documentation and best practices using socket.IO.”
WebSocket proxying
“To turn a connection between a client and server from HTTP/1.1 into WebSocket, the protocol switch mechanism available in HTTP/1.1 is used.”
Computing the optimal road trip across the U.S.
“Last week, Tracy Staedter from Discovery News proposed an interesting idea to me: Why not use the same algorithm from my Where’s Waldo article to compute the optimal road trip across every state in the U.S.? Visiting every U.S. state has long been on my bucket list, so I jumped on the opportunity and opened up my machine learning tool box for another quick weekend project.”
Understanding Collisions and Physics with Babylon.js and Oimo.js
“Today, I’d like to share with you the basics of collisions , physics and bounding boxes by playing with the WebGL babylon.js engine and a physics engine companion named oimo.js.”
Million user webchat with Full Stack Flux, React, redis and PostgreSQL
“Sexy, right? Flux over the Wire allows us to leverage the goodness of Flux to share a single source of truth between multiple clients, and update them in real time. This makes building things like chats, comments systems, or even auto-updating articles, fairly easy. Declare your data dependencies at the component level. Not only will they auto-resolve, but they will also get auto-updated whenever the backend is updated! For free, as in free beer!”
How to Self Detect a Memory Leak in Node
“Tracking down memory leaks with node.js has always been a challenge. The following discusses how to track memory leaks from within a node application itself with the help of two awesome node modules – memwatch and heapdump.”
Reloading node with no downtime
“I wrote a blog post about Unix signals and Graceful shutdown in node.js applications five months ago. In this article I will explain how to reload a node.js application with no downtime.”
Animating List Items - CSS Animation
“When parts of a web page change, adding some animation is a good way to help your viewers understand what’s going on. Animations can announce the arrival of new content, or draw attention to content that’s in the process of being removed. In this article we’ll look at how this can be used to help introduce new content, by showing and hiding items in a list.”
Watch Files and Directories with Node.js
“Watching a file or directory for changes is an important part of automation. We all enjoy using our favorite CSS preprocessor's "watch" feature -- we can still refresh the page and see our changes as though we were simply writing in pure CSS. Node.js makes both file and directory watching easy -- but it's a bit more difficult than you may think.”
Human JavaScript
“Build powerfully simple browser apps. You can read the entire book free online or buy the ebook for $39. If you find it valuable, please consider buying it or giving it to a friend to support our ongoing efforts.”
Dropdown Menus with More Forgiving Mouse Movement Paths
“This is a fairly old UX concept that I haven't heard talked about in a while, but is still relevant in the case of multi-level dropdown menus. A fine-grained pointer like a mouse sometimes has to travel through pretty narrow corridors to accurately get where it needs to in a dropdown menu. It's easy to screw up (have the mouse pointer leave the path) and be penalized by having it close up on you. Perhaps we can make that less frustrating.”
Death to typewriters: Automatic replacement and clean-up
“This is a very specific technical addition to the article about details of Medium typography. If you haven’t read that one, you should start there.”
Discover Graph Databases with Neo4j and PHP
“In this post, we’ll be learning about Neo4j, the leading graph database, and ways to use it with PHP. In a followup post, we’ll be building a proper graph application powered by Silex.”
Embracing Promises in JavaScript
“In this post we will look at how we can embrace promises to lead to much nicer code when working asynchronously with JavaScript. This post is not a full, in-depth exploration of Promises. For that, Jake Archibald's post on HTML5 Rocks has you covered. I highly recommend reading it.”
The Basics of Web Workers
“There are a number of bottlenecks preventing interesting applications from being ported (say, from server-heavy implementations) to client-side JavaScript. Some of these include browser compatibility, static typing, accessibility, and performance. Fortunately, the latter is quickly becoming a thing of the past as browser vendors rapidly improve the speed of their JavaScript engines.”
Adobe Kickbox
“It doesn’t really matter why you want to innovate, but it does matter that you know what your motivation is. You won’t be successful if you don’t care.”
60fps on the mobile web
“Flipboard launched during the dawn of the smartphone and tablet as a mobile-first experience, allowing us to rethink content layout principles from the web for a more elegant user experience on a variety of touchscreen form factors.”
How to do Keyword Research in 90 Minutes
“Everyone's been in the position where there's a million and one things going on, but a client (or you) still requires top-notch keyword research. So something needs to get done in a pinch. Searching around the internet and learning more about the trendiest aspects of keyword research (because let's face it, either it's been a while since you last did it or it's your first time doing it) can take a ton of time. There are literally millions of things you could be reading about it; actually 15.4 million if we want to be precise.”
Does Sponsoring Daring Fireball Actually Work
“A lot of people have asked me whether sponsorship and advertising on John Gruber’s Daring Fireball actually works. What they are asking, more specifically, is whether it’s really worth the investment, because advertising is not cheap on DF.”
How To Write a Product Feature Set - Tuts Code Article
“One of the key benefits of a product feature set is that it helps communicate your product vision with others, such as your team or investors. In this article, I'll teach you how to structure your product feature set and what should be covered in such a document. Along the way, I'll try to convince you of the value of writing a product feature set.”
Reactive MVC and the Virtual DOM — Futurice
“The web frontend scene is witness to many new frameworks and ways of working. It can be quite annoying when software becomes legacy quicker than ever. But actually, it's just good old innovation happening as it should, because the opportunities for improvement are there. Frameworks come and go, but what remains are the good ideas that they brought to the world. We're going to talk about the good ideas and the not so good ideas.”
The Two Pillars of JavaScript — Pt 2: Functional Programming
“The high tech world is built on a culture of continuous innovation. We’ve built great things together because of a shared need to push technology past the bleeding edge. Each new breakthrough enables us to do things we never dreamed we’d be doing a few years ago. Welcome to the world of tech.”
Node.js connection pooling
“node.js is a great platform for building network based applications (I’ll jump into details why in another post). For the rest of this post I’ll assume you know what node is and have some experience using it.”
Promises in Node.js with Q – An Alternative to Callbacks
“Promises provide a compelling alternative to raw callbacks when dealing with asynchronous code. Unfortunately, promises can be confusing and perhaps you’ve written them off. However, significant work has been done to bring out the essential beauty of promises in a way that is interoperable and verifiable. The result is Promises/A+, a specification that is making its way into promise libraries and even the DOM.”
Building robust web apps with React: Part 1, in-browser prototypes / Matt Hinchliffe, Front-End Developer
“Whenever I look into the internals of web browsers and the protocols that make the web work I usually end up feeling uneasy. The number of parts that can and do go wrong makes it incredible that anything we build works at all. The against-all-odds robustness comes from the fault tolerance and backward compatibility engrained into key parts of web stack. The browser will always do its best to output something useful whether it’s parsing a badly authored document, unable to retrieve dependencies or 10 years out of date.”
Tutorial: Building React Apps With Flux and Backbone / Toptal
“React.js is a fantastic library. Sometimes it seems like the best thing since sliced Python. React is only one part of a front-end application stack, however. It doesn’t have much to offer when it comes to managing data and state.”
Improving the Module Factory Pattern in Node.js
“When building tiny and focused Node.js modules, don't forget to make sure that you expose an API that results in readable code. Sometimes small changes can introduce more clarity even if it requires that the user type out a few more characters. As a module author, I suggest avoiding module.exports to export a single factory function and, instead, opt for exporting factory methods.”
Hold A Kickoff Meeting Before Diving Into The Design
“The kickoff phase sets the stage for the success of your product. Without properly conducting this phase, your team might as well be working in the dark. The worst enemy in product development, after all, is ambiguity.”
Cross-tab Communication
“The upcoming SharedWorker API allows to transmit data across iframes and even browser tabs or windows. It landed in Chrome years ago, and not so long ago in Firefox, but it's nowhere to be seen in IE or Safari. A wildly supported alternative exists that can be used today, but it's largely unknown. Let's explore it!”
The God Login
“In this case, the combination of great teacher and great topic was extra potent, as algorithms are central to what programmers do. Not that we invent new algorithms, but we need to understand the code that's out there, grok why it tends to be fast or slow due to the tradeoffs chosen, and choose the correct algorithms for what we're doing. That's essential.”
Using React components as Backbone Views
“At Venmo, we've begun rewriting and redesigning our front-end into clean, idiomatic Backbone code. Backbone is an unopinionated framework that provides structure to your code. However, its view layer is purposefully lacking, providing only a few basic lifecycle hooks. Unlike Ember components or Angular directives, it does not hook your data up to your views for you, and does little to enforce separation between your layers.”
Top 10 Mistakes Node.js Developers Make
“Node.js has seen an important growth in the past years, with big companies such as Walmart or PayPal adopting it. More and more people are picking up Node and publishing modules to NPM at such a pace that exceeds other languages. However, the Node philosophy can take a bit to get used to, especially if you have switched from another language. In this article we will talk about the most common mistakes Node developers make and how to avoid them. You can find the source code for the examples on github. Read more at https://www.airpair.com/node.js/posts/top-10-mistakes-node-developers-make#BJDZFmEVjxXeK93s.99”
Blazing fast node.js: 10 performance tips from LinkedIn Mobile / LinkedIn Engineering
“In a previous post, we discussed how we test LinkedIn's mobile stack, including our Node.js mobile server. Today, we’ll tell you how we make this mobile server fast. Here are our top 10 performance takeaways for working with Node.js:”
How to Design Programs, Second Edition
“Bad programming is easy. Even Dummies can learn it in 21 days. Good programming requires thought, but everyone can do it and everyone can experience the extreme satisfaction that comes with it. The price is worth paying for the sheer joy of the discovery process, the elegance of the result, and the commercial benefits of a systematic program design process.”
Node.js Best Practices - Part 2
“You may remember our previous post on Node.js Best Practices. In this article we will continue with more best practices that can help you become a better Node.js developer.”
Node.js Best Practices
“We get asked about Node.js best practices, tips all the time - so this post intends to clean things up, and summarizes the basics of how we write Node.js at RisingStack.”
Design Considerations: Text on Images / CSS-Tricks
“I enjoyed Erik D. Kennedy's post 7 Rules for Creating Gorgeous UI (Part 2). In it, his Rule 4 is: Learn the methods of overlaying text on images. I thought we could take a look at all his points, code them up, and note anything that comes up technically.”
7 Principles of Rich Web Applications
“JavaScript has undeniably become an indispensable tool for frontend developers. Its usage is now expanding into other areas like servers and microcontrollers. It’s the language of choice for introducing computer science concepts by prestigious universities. Yet a lot of questions on its precise role and usage on the web remain a mystery, even to many framework and library authors.”
Managing color palettes with color scales and Sass maps
“With the introduction of Sass 3.3's maps feature earlier this year, we now have an improved way of storing our color data that alllows us to group our color scales together by hue. This'll allow us to DRY out our code and improve code readability.”
Core Data in Swift Tutorial (Part 1)
“Core Data is the de facto standard way to persist and manage data in both iPhone and Mac applications. So it’s only natural that we should take some time to learn about it when building apps. The first thing to know about Core Data before diving in is that it is not a relational database, and although it uses SQLite as a backing engine, is not an ORM to a relational database either. The SQLite backend is more of an implementation detail, and in fact binary files or plists can be used instead.”
Writing Modular Node.js Projects for Express and Beyond
“I have worked with Express for over four years now and I cannot count how many different ways I have reorganized my code! Express bills itself as an un-opinionated framework. This is true. If you search for “express boilerplate” you will find a lot of different ways to organize your project.”
AngularJS: Looking under the hood [Part 1]
“The more AngularJS you write, the more you marvel at its magic. I got pretty curious about some of the fantastic things Angular does and decided to dive into the source code and see if I could reveal some of its secrets. I’ve documented some of the things I’ve found really useful that explain some of the more advanced (and hidden!) side of Angular in its 23,000+ lines of source code!”
Prototyping Animation with Keynote
“One look on Dribbble, and you’ll notice the abundance of animations that emphasize interaction. The increasing number of devices, screens, and use cases have required designers to think of new ways to improve the usability of applications. Animation can be a tool for solving these problems. A simple effect can help a user transition between screens, and understand a cohesive experience across an ecosystem of devices. A well-designed animation guides users to the most crucial areas of the product, and is just plain delightful!”
Create an Icon Font Using Illustrator
“An icon system can often become central design element in your web project. You can find many free or commercial icon sets on the web, and they are often included in major CSS frameworks (Bootstrap 3 Glyphicons is a perfect example).”
Swarm.js React — real-time, offline-ready Holy Grail web apps
“The state of sync in web apps is that sync sucks. GTalk loses messages inbetween desktop and mobile. Apple iCloud can’t merge back document replicas if those were edited concurrently. Google Docs needs some ungodly chemistry to resync after working offline. These are SNAFUs I personally experienced and I have also heard other folks complaining about Evernote, Skype, Dropbox, you name it.”
Is Onsen UI the Answer to Cordova UI Development
“Onsen UI is a new JavaScript and CSS framework for developing mobile apps. With its large selection of web based UI components, you can develop HTML5, PhoneGap and Cordova apps. With a focus on native-like performance, user experience, responsive design and diverse platforms, it seems quite promising. It combines the power of HTML 5 , CSS, AngularJS, jQuery and Font Awesome to create impressive looking apps.”
The Importance of Navigation Design Patterns
“In this article we discuss the importance of navigation design patterns using examples from some of the hottest websites and web apps.”
Learning much javascript from one line of code
“Since javascript is everywhere nowadays, it is really easy to learn new stuff everyday. Once you know the basics of the language, you can take bits of code from here and there that have a lot of knowledge in them. Bookmarklets are perfect examples of a bunch of packed functionality, whenever I discover a useful one, I enjoy studying their source, discovering how it can do so much. Also snippets to use external services, like the google analytics code, or facebook likebox, can teach us more than some books.”
Typekit Practice
“Whether you’re a novice or an expert in any medium, good decisions take practice — and great ones stand on a solid foundation. Typekit Practice is a collection of resources and a place to try things, hone your skills, and stay sharp. Everyone can practice typography.”
Setting subheads with CSS
“Subheads are typographic devices that establish content structure for the reader, providing a short overview of the content that follows. We can use them as points of visual interest or as simple navigational aids that gradually disclose the content. However, default subhead styles rendered by the browser can be too generic. If you’re looking for some variety, you can achieve some interesting effects with a pinch of CSS.”
Build Web Layouts Easily with Susy
“I've been coming around to the idea of using Susy (a Sass add-on for grids) lately. I like the idea of grids-on-demand, rather than a strict framework (no matter how simple). We even added support to CodePen. Last week I ran into Eric Suzanne, the creator of Susy, and I told him Zell Liew was working on a guest post for this site. He was "Oh, Zell! Yeah he's awesome, he's like the unofficial promoter and trainer for Susy." And so, here's Zell introducing us to Susy!”
18 Critical Oversights in Web Development
“Over the past years I had the opportunity to work on some interesting projects, complex in nature with an ongoing development, constantly upgrading, refactoring and adding new features to them. This article will cover the biggest coding oversights most PHP developers make, when dealing with medium and large projects. Oversights such as not differentiating between development environments or not implementing caching and backup.”
All About Circuits
“This site provides a series of online textbooks covering electricity and electronics. The information provided is great for both students and hobbyists who are looking to expand their knowledge in this field. These textbooks were written by Tony R. Kuphaldt and released under the Design Science License.”
Fast, auto-generated streaming JSON parsing for Android
“The Instagram engineering team is constantly looking at how we can improve the speed, reliability and overall performance of the app. One of the things we wanted to improve is how quickly people using the Android app can view “News” in their Instagram feed—the place you go to see when people tag you, like or comment on one of your posts, or even to see what the people you follow are up to.”
How To Create Flat Style Breadcrumb Links with CSS
“With all the progressions of CSS and CSS3 over recent years we’ve reached a point where many of the old coding techniques that involved background images can now be created entirely with CSS. In this tutorial we’ll look at creating a series of breadcrumb navigation links in a flat design style without the need for the previously popular “sliding doors background image” method.”
Master CSS Colors With This Sass Function
“Color management in CSS isn't easy. Each element may have colors for their background, border and text. They're often redundant — using the same hex color dozens of times in a CSS document isn't unusual.”
Responsive Spritesheets with Sass
“I don’t know why, but I only recently realized how much of a headache working with spritesheets in your CSS is. If you’re working with images in list items, you have to retype the same URL path, the same sizing, and same background-positioning (with only a minor tweak in whichever direction blows your hair back).”
C3.js
“C3 makes it easy to generate D3-based charts by wrapping the code required to construct the entire chart. We don't need to write D3 code any more.”
10 Remarkable Website Typography Designs
“Just a few years ago if you used the font Proxima Nova on your website, other designers would marvel at how awesome your “typography” was.”
Verge: Virtual Reality
“The Rise and Fall and Rise of Virtual Reality”
The WordPress Database Demystified
“Since it was released over a decade ago, WordPress has become the most popular CMS choice for beginners and experts alike. Although the installation of WordPress, and the addition of data does not require any knowledge of the underlying structure, you might find yourself in a situation where some knowledge of the database is required.”
VNC server with UDOO
“Welcome to this Remote Desktop Tutorial. As you may imagine, what we are going to achieve is all about convenience.”
Measurement Protocol Developer Guide
“This document demonstrates how to format HTTP requests to send common hit types to the Google Analytics Measurement Protocol.”
Best Buy Recommendations API
“Welcome to our new Recommendations API (BETA). We are enhancing our product offerings by providing the ability for you to pull our trending, most viewed and also viewed products based on customer behavior at BESTBUY.COM. We have also provided a way for you to look up similar products based on a SKU.”
Storemapper: Bootstrapped to $50,000/year in 2 years (with live metrics)
“Two years ago I launched Storemapper an embedded store locator service that runs on any website or ecommerce platform. Today around 500 brands use Storemapper to help their customers find the closest place to buy their stuff.”
How To Validate Your Business Idea By Testing A Hypothesis
“Many business founders start by building products without knowing if the problem they want to solve is something people actually need. After launching a solution to a non-existent problem, they wait for sweet sounds of the cash registers ringing, but all they hear are crickets chirping. Nobody cares!”
Open Source Email Templates
“Open Source Email Templates. Responsive, Free, and Community Driven.”
Marka
“Beautiful icon transformations”
Doomsday rule
“The Doomsday rule or Doomsday algorithm is a way of calculating the day of the week of a given date. It provides a perpetual calendar since the Gregorian calendar moves in cycles of 400 years.”
Opinionated Rundown of JS Frameworks
“As a portion of our crazy training events I give a short talk about JS frameworks. I’ve shied away from posting many of my opinions about frameworks online because it tends to stir the pot, hurt people’s feelings, and unlike talking face to face, there’s no really great, bi-directional channel for rebuttals.”
CSS "position: sticky" - Introduction and Polyfills
“Sometimes, due to a client request or because we have determined this is the best approach, we may require that a main navigation stay visible at all times on the page, without it being fixed in place, essentially following the page content. In recent years, a lot of JavaScript-based solutions have seen the light of day because CSS alone was unable to achieve this task.”
Node.js and express wrapper for Yahoo Fantasy API
“With the NFL season just 31 days away (8/3/2014), I'm proud to release a Node.js wrapper for the Yahoo Fantasy API! It's not a whole lot yet, and basically just helps with the setup and not with individual API calls, but it's still one of the only one's around, and should greatly ease the pain of working with the API.”
Metacademy - Level-Up Your Machine Learning
“Since launching Metacademy, I've had a number of people ask, What should I do if I want to get 'better' at machine learning, but I don't know what I want to learn? Excellent question! My answer: consistently work your way through textbooks.”
Discovering private APIs with Charles.app
“Nowadays, so many companies have apps, and they have to get their data from somewhere. This has opened a whole new world of (quasi-)open data.”
Using Sass to Build Color Palettes
“The other day, UI developer Alexandre Broudin asked me how I would use Sass to build a variety of palettes similar to a given palette where only the base color would change. I love playing with colors in a programmatic way so I decided to give it a try.”
Notification Styles Inspiration
“Some simple ideas and effects for unobtrusive website notifications. A little script is employed for showcasing some styles and CSS animations are used for the effects.”
Ask DN: What are your little SASS/LESS time savers
“Got any helpful tips?”
Create high-performance mobile UIs with Famo.us
“With the Famo.us platform, mobile web UIs written in JavaScript can be as compelling as native-code implementations. Work through this article's examples to find out how Famo.us helps you easily create a high-performance user experience in your mobile apps.”
Getting Started with Sass and Bourbon
“In this article, I hope to get you started with precompiling, or preprocessing, your CSS by showing you how to install Sass and Bourbon, and discussing how to make these tools part of your workflow.”
Game Programming Patterns
“I’m Bob Nystrom. I started writing this book while working at Electronic Arts. In my eight years there, I saw a lot of beautiful code, and a lot of really horrendous code. My hope was that I could take what I learned from the beautiful stuff, write it down here, and then teach it to the people writing the awful stuff.”
Marketing your startup: What's on your checklist?
“There are many ways to promote your startup. What are some tactics you've used that were effective, that you'd recommend to others?”
Accessible contrast with Less and Sass
“Contrast is a critical factor in web design, it's important to get right because it has a strong influence on the visual aesthetic, but it's especially important for readability and accessibility of text on the page.”
Deconstructing E-Commerce Search
“In this article we’ll introduce 12 types of search queries identified during our large-scale usability study of e-commerce search. While not exhaustive they reflect the main types of queries that users rely on when searching in an e-commerce context.”
Google design guidelines
“We challenged ourselves to create a visual language for our users that synthesizes the classic principles of good design with the innovation and possibility of technology and science. This is material design. This spec is a living document that will be updated as we continue to develop the tenets and specifics of material design.”
Ideas for Subtle Hover Effects
“It’s time for some fresh hover effect inspiration! Nowadays we are seeing a lot of delicate designs with fine lines, lots of white space, clean typography and subtle effects. With that beautiful trend in mind we want to share some creative ideas for grid item hover effects. It’s all about being subtle with that little delightful surprise.”
Find Guidelines
“The fastest way to brand assets.”
Build Interactive Voicemail with Twilio, MongoDB, Angular, and node.js
“In the summer of last year, we noticed a really cool, telephone-powered, interactive advertising experience created for Nike and basketball star LeBron James. In the short commercial spot, notable people like Spike Lee, Warren Buffet, and Dr. Dre are heard leaving voicemail messages for the NBA finals MVP, congratulating him on the championship. In this tutorial, we’re going to show how you can build an interactive voicemail (and text message) box to support a marketing campaign around a brand or celebrity. Fans can call or text a number you set up to communicate personally with their favorite sports stars or consumer brands.”
Google's BigQuery Provides Free Access to GDELT
“The entire quarter-billion-record GDELT Event Database is now available as a public dataset in Google BigQuery.”
Beer Locker: Building a RESTful API with Node - Passport
“In this part we will dive into creating user accounts and authentication using Passport. By the end of this article you will have learned how to add user accounts, implement authentication, and control access to beer lockers.”
Fluxxor
“Fluxxor is a set of tools to facilitate building JavaScript data layers using the Flux architecture by reifying many of the core Flux concepts. It works particularly well in conjunction with React as the view layer, and contains a few helpers to make integration with React applications easier.”
Guide to Landing Page Optimization
“Landing pages rule. Blah. Homepages suck. Blah. Do some A/B testing. Blah. Base your optimization strategy on customer feedback. Blah. All of those statements are true. But they sound boring and being boring is lame. It's twenty fourteen and I refuse to be lame.”
HTML5 Forms: CSS
“In the second article of this three-part series about HTML5 forms, we’re going to look at styling or — more specifically — the pseudo-class selectors you can use to target input fields in various states. If you haven’t read it already, please refer to part one to ensure you understand the basic markup concepts.”
Managing Responsive Breakpoints with Sass
“When dealing with responsive design, you often find yourself defining a lot of media queries, checking various properties, with various values. Because it can quickly get messy, it is usually considered a good practice to use Sass (or any other preprocessor, for that matter) to handle responsive breakpoints.”
10 Articles Every Programmer Must Read
“Being a Java programmer and Software developer, I have learned a lot from articles titled as What Every Programmer Should Know about ..... , they tend to give a lot of useful and in-depth information about a particular topic, which otherwise is very hard to discover. In my quest of learning I have come across some very useful articles, which I have bookmarked for reference and multiple reading. I personally think that all programmer can benefit by reading these articles, which makes me write this post and share all of these "What Every Programmer Should Know" articles with you guys.”
Parallax Done Right
“Parallax has become, for better or worse, an increasingly popular web trend. The first parallax site I ever saw was Ian Coyle’s BetterWorld for Nike. I was in love. At the time, I’d never seen the technique before. It felt like I’d left the web of PDF-esque static pages and entered the future.”
Name that Color
“Being a typical guy, I have no clue what the colors Lavender and Mauve look like. You can show me Indigo and I won't know if it's more like Violet or Purple. So I made this little app where you can create a color on the screen (or copy-paste CSS hex# color) and find out the name of the closest matching color.”
Parsing English with 500 lines of Python
“A syntactic parser describes a sentence’s grammatical structure, to help another application reason about it. Natural languages introduce many unexpected ambiguities, which our world-knowledge immediately filters out. A favourite example:”
So You Want to Accept Credit Cards Online
“Until recently, accepting credit cards on a website was expensive and complicated. But that was before Stripe: a radically different and insanely awesome credit card processing company. Today, I'll show you how to start accepting cards in 30 minutes or less - without spending a dime.”
Programming Sucks
“Every friend I have with a job that involves picking up something heavier than a laptop more than twice a week eventually finds a way to slip something like this into conversation: "Bro, you don't work hard. I just worked a 4700-hour week digging a tunnel under Mordor with a screwdriver."”
Express.js 4, Node.js and MongoDB REST API Tutorial
“Usually good things don’t stay the same, so our tutorial on building a JSON REST API server with Node.js and MongoDB using Mongoskin and Express.js, and testing it with Mocha and Superagent, has became a bit outdated with the new Express.js 4 version release. Here’s a brand new, revisited tutorial for Express.js 4, Node.js and MongoDB (Mongoskin) free-JSON RESTful API server.”
CSS Shapes 101
“Rectangles inside other rectangles: this is what our webpages have always been made of. We’ve long tried to break free from their restrictions by using CSS to create geometric shapes, but those shapes have never affected the content inside the shaped element, or how the element is seen by other elements on the page.”
Velocity.js
“Velocity is a jQuery plugin that re-implements $.animate() to produce significantly greater performance (making Velocity also faster than CSS animations) while including several new features to improve animation workflow.”
Advanced animation path
“In this post series I’ll share with you some neat SVG techniques that will help you on your daily web dev route. This particular post is dedicated to defining advanced animation path.”
Jade - Template Engine
“Welcome to the Jade templating engine. Jade is designed primarily for server side templating in node.js, however it can be used in many other environments. It is only intended to produce XML like documents (HTML, RSS etc.) so don't use it to create plain text/markdown/CSS/whatever documents.”
How To Remotely Copy Files Over SSH Without Entering Your Password
“SSH is a life-saver when you need to remotely manage a computer, but did you know you can also upload and download files, too? Using SSH keys, you can skip having to enter passwords and use this for scripts!”
HandlingExceptions - Python Wiki
“The simplest way to handle exceptions is with a "try-except" block:”
Seven JavaScript Quirks I Wish I’d Known About
“If you are new to JavaScript or it has only been a minor part of your development effort until recently, you may be feeling frustrated. All languages have their quirks – but the paradigm shift from strongly typed server-side languages to JavaScript can feel especially confusing at times. I’ve been there! A few years ago, when I was thrust into full time JavaScript development, there were many things I wish I’d known going into it. In this article, I’ll share a few of these quirks in hopes that I might spare you some of the headaches I endured. This isn’t an exhaustive list – just a sampling – but hopefully it will shed some light on the language as well as show how powerful it can be once you get past these kinds of hurdles.”
RESTful API With Node.js MongoDB
“This article will consider building a REST API for mobile applications using Node.js and Express.js framework with Mongoose.js for working with MongoDB. For access control we'll use OAuth 2.0, with the help of OAuth2orize and Passport.js.”
Icon System with SVG Sprites
“I've been a big proponent of icon fonts. Lots of sites really need a system for icons, and icon fonts offer a damn fine system. However, I think assuming you're good with IE 9+, using inline SVG and the element to reference an icon is a superior system.”
Superhero.js
“Creating, testing and maintaining a large JavaScript code base is not easy — especially since great resources on how to do this are hard to find. This page is a collection of the best articles, videos and presentations we've found on the topic.”
4 Design Patterns That Violate Back-Button Expectations
“During all our usability studies we’ve observed how users, both novice and expert, rely extensively on the browser back button. Often this has severe usability implications in these modern days where we design webpages with overlays, toggled states, accordion checkouts and one page applications. These new-fangled web design patterns often have a default technical structure which break user expectations and clash with the user’s mental model for how the decades-old browser “back” button functions.”
HyperDex
“HyperDex is a next generation key-value store with a wide array of features. HyperDex may be a good fit for you if your application needs to: Store rich datatypes such as strings, integers, floats, lists, maps, and sets. Search and retrieve objects efficiently by secondary attributes. Ensure that your data is up to date at all times with strong consistency guarantees. Protect your data against a configurable number of simultaneous failures. Perform atomic transactions over multiple objects, in a fast, scalable NoSQL data store.”
Create a Hill Scene Using Gradients in Adobe Illustrator
“Recently I came across an inspiring photograph by Felicia Simion, featuring hills with a gradient appearance. Once I fell in love with the image, I just had to create a version in vector. Felicia has been kind enough to grant me permission to use her artwork as inspiration for this tutorial.”
Schedules & Scores API for Streaming Live Sports Stats
“One of my side projects (Game Time, Baby!) required a way to programmatically load realtime live sports scores and schedules via an API. This page contains a rundown of the various options and services available.”
A Guide To Project Management
“It’s difficult to define what a “good” project manager is these days. Every organization defines the role, and often the title, differently. Project managers are needed in many industries. As a PM, you might work on small or large teams with job duties that range from budget and timeline only to everything you can think of under the operational sun. Maybe you’re not even a project “manager” by title or you work on your own, but you’re responsible for managing work. No matter where you stand, there are things you’ll need and want to learn as you jump in to managing all of these things. You’ve come to the right place.”
How to Easily Double Your Traffic from Social Media
“Many businesses are publishing content as a way to build their audiences and increase traffic to their websites. However, they may not be getting everything they could from each piece of content they create.”
Creating Style Guides
“Several years ago, I was working on a large, complex application. It was a bit of a legacy project: many different designers and front-end developers had come and gone, each appending a new portion to the sprawling application. By the time I arrived, the CSS was huge, the styles were varied, and it took a lot of effort to find out if anything was reusable.”
7 unbreakable laws of user interface design
“While web pages today have simple user interfaces with no more than navigation and contact forms, the rise of new technologies and standards will create a demand for more dynamic and customized experiences. This, inevitably, means more user interface work. So let’s see what you need to remember.”
Font Size Idea: px at the Root, rem for Components, em for Text Elements
“Me, for the last year or so: "rem's are so cool! I'm gonna size everything with them, that way I can adjust the font-size on the root element and everything will scale with it!" It was a nice dream. And it wasn't a disaster. That's what I'm doing right now here on CSS-Tricks and this is how it plays out in a very simple scenario:”
Killing Contracts: An Interview With Andy Clarke
“Do you remember those “10 Useful Legal Documents for Designers?” Well, it turns out that you, designers who read Smashing Magazine, liked one in particular: a plain-language, straightforward “Contract of Works for Web Design,” which is based heavily on Andy Clarke’s “Contract Killer”. Since Mr. Wong published that template ten months ago, more than 1,600 designers have downloaded it on Docracy alone.”
Contract Killer Stuff
“When times get tough, it can often feel like there are no good people left in the world, only people who haven’t yet turned bad. These bad people will go back on their word, welch on a deal, put themselves first. You owe it to yourself to stay on top. You owe it to yourself to ensure that no matter how bad things get, you’ll come away clean. You owe it yourself and your business not to be the guy lying bleeding in an alley with a slug in your gut.”
“Visual Inventory,” an article by Dan Mall
“Learning new things takes time. When our industry shifted from table-based layouts to using CSS for layouts, a large chunk of that discussion was devoted to increasing project timelines (and budgets). It wasn’t that CSS took longer; it’s just that we didn’t know as much about it. Ask those same people today to build a table-based layout, and they’ll tell you that it’ll take twice as long. We make time to accommodate learning what we don’t know; it’s only natural.”
The Ridiculously Exhaustive Social Media Dimensions Blueprintjeffberezny.com
“Like all new technology, social media changes fast. Very fast. Just trying to keep your head around all of the different platforms, how to approach them and, of course, how to design for them can be a full time job. It would be nice if all of the platforms used the exact same dimensions and you could just swap photos between them all so that your brand has a nice consistent look across the board.”
Introducing the Blaze live templating engine and Meteor 0.8.0
“Today we are delighted to release Blaze, our next-generation live templating engine. Many production Meteor apps are already running on it, and with 0.8.0, we're now ready to complete the transition. So that we can focus our energy on Blaze, we encourage everyone to take the 0.8.0 update as soon as you can with meteor update. If you're new to Meteor, visit www.meteor.com to get started.”
Nodemailer
“Nodemailer is an easy to use module to send e-mails with Node.JS (using SMTP or sendmail or Amazon SES or even your own method) and is unicode friendly - You can use any characters you like ✔”
Color Systems — Part 1
“What is color? How do you define it? How do you describe it? How can we ensure that when you tell me to make something red, I make it the exact same red you intended? For centuries people have been developing systems to describe color to answer these questions.”
Taking A Second Look At Free Fonts
“Once thought of as amateurish by professional designers, free and open-source fonts have gone through something of a renaissance in just the last few years. The quality of available free fonts has increased dramatically. To be frank, free fonts don’t have a good reputation, and often they are knock-offs of thoroughly crafted, already established typefaces. So is it time for professional designers to take a second look?”
Ridiculously Responsive Social Sharing Buttons by KNI Labs
“Love them or hate them social sharing buttons appear to be with us for a while. It seemed like we were constantly making custom buttons for every single project, so we decided to create a super flexible system that would work in any container.”
Off The Beaten Canvas: Exploring The Potential Of The Off-Canvas Pattern
“The off-canvas flyout menu has taken over as the primary navigation pattern for mobile layouts — even some desktop layouts have jumped on board. And for good reason: An off-canvas menu is a great way to maintain context while giving the user a lot of additional information.”
Build APIs
“API Services provides tools and RESTful APIs that enable you to integrate API proxy deployment and management into your organization\'s SDLC. A common usage of the RESTful API is to write scripts or code that programmatically deploy API proxies, or that migrate API proxies from one environment to another, as part of a larger automated process that also deploys or migrates other applications. API Services makes no assumptions about your SDLC (or anyone else\'s, for that matter). Rather, it exposes atomic functions that can be coordinated by your development team to automate and optimize your API development lifecycle.”
Getting Started With Pattern Libraries
“Three weeks ago, A List Apart went open source. The markup on the website is something I feel very close to. Over the years, if I’ve been unsure of how to mark something up, I’ve often referenced the HTML on A List Apart to see how it’s been done there because I know the people who work on it really care about semantics.”
apiDoc - Inline Documentation for RESTful web APIs
“apiDoc creates a documentation from API descriptions in your source code.”
Color Theory Tutorial, Concepts, Essays and Color Basics
“If you are involved in the creation or design of visual documents, an understanding of color will help when incorporating it into your own designs. Choices regarding color often seem rather mystical, as many seem to base decisions on nothing other than \"it looks right.\" Although often told I had an eye for color, the reason why some colors worked together while others did not always intrigued me and I found the study of color theory fascinating.”
The Web Developer\'s SEO Cheat Sheet 2.0
“It is my honor and privilege today to introduce the brand-new version of The Web Developer\'s SEO Cheat Sheet. This free and downloadable document covers all of the important SEO code and best practices that are needed by online marketers and developers.”
How SVG Line Animation Works
“I bet all of you have seen that little trick where an SVG path is animated to look like it\'s drawing itself. It\'s super cool. Jake Archibald pioneered the technique and has a super good interactive blog post on how it works. Brian Suda wrote about it on 24 Ways. Polygon used it to great effect on a custom designed article and wrote about it. Codrops has some neat examples.”
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.”
Make a Flippin’ 3D Countdown with CSS
“In January, we worked with Dick’s Sporting Goods to launch Gear in Action, an interactive lookbook featuring new products for the 2014 Baseball season. During the video presentation, users have the opportunity to click on products in the video, view more details (example), and see purchasing options.”
Build Desktop Apps with JavaScript and Node WebKit
“I’m a big fan of platforms that enable me to experiment and do creative things. As someone who was big into Flash and tends to do mostly HTML/JS/CSS now, the main problem with both of these is that they are limited by the capability of the browser. If the browser allowed me to do everything I wanted, we’d have a lot of unhappy and insecure browser users. I’m talking about things like access to the user’s file system, running random bits of C++, et cetera. Basically, lots of the ideas I have that would be super cool to do are also things that malicious developers would love to do to compromise your machine.”
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.”
UX Crash Course: 31 Fundamentals
“The following list isn’t everything you can learn in UX. It’s a quick overview, so you can go from zero-to-hero as quickly as possible. You will get a practical taste of all the big parts of UX, and a sense of where you need to learn more.”
The Only Interview Question That Matters
“This single question provides the depth and breadth of insight needed to reach a fast, unanimous Hire/Don\'t Hire decision.”
Stock photos that don’t suck
“Finding great stock photos is a pain. You’re left with either low-res amateur photos, people wearing cheesy headsets, or photos that are out of budget for the project you’re working on. Below is an ongoing list (so bookmark it) of the best stock photo sites I’ve come across.”
Where the best designers go to find photos and graphics
“I’ll let you in on a little secret: beautiful websites aren’t made, they’re found. Smart designers know where to find that perfect photo, subtle pattern or that unique icon. Here’s where the best designers go to find photos, graphics, icons, and more.”
Ruby TCP Chat
“Today, we are going to build a little TCP ruby chat application using the ruby standard library Socket. I’m using ruby 2.0.0, and Ubuntu Linux 12.04LTS, but it should work on Mac OS too. I haven’t tried it on Windows.”
Scripts Page
“Welcome to the Russell Brown Show and this helpful set of scripts, panels, and actions that can assist with several of your design and production tasks.”
Callbacks, Promises, Signals and Events
“Sometimes I get involved in discussions on twitter and Facebook related to development. This week I ended up sending a link to an old(ish) twitter thread explaining when to favor Promises/Callbacks and when to use Signals/Events for asynchronous operations. I think this topic deserves further explanation.”
Bulletproof Accessible Icon Fonts
“Care must be taken when implementing icon fonts to ensure a great experience for all users. What happens when your font doesn’t load? What happens when @font-face isn’t supported in the browser? We’ll show you how to implement bulletproof font icons.”
A More Modern Scale for Web Typography
“I’m a big believer in responsive web design. It’s the only way I know to provide the best experience across the increasingly fragmented landscape of devices and capabilities that is the new normal on the web today. But most of the advice you’ll find about responsive design ignores relative scale in typography.”
Cookies vs Tokens. Getting auth right with Angular.JS
“There are basically two different ways of implementing server side authentication for apps with a frontend and an API: The most adopted one, is Cookie-Based Authentication (you can find an example here) that uses server side cookies to authenticate the user on every request. A newer approach, Token-Based Authentication, relies on a signed token that is sent to the server on each request.”
Make Sure Your Columns Don't Collapse Horizontally
“You might be familiar with elements collapsing vertically. If an element only contains other elements that are floated, the parent element will collapse to zero height. We often employ the clear fix for that. But if an element doesn't contain anything, it can collapse horizontally as well, which can be quite awkward for layout.”
BBC - Future Media Standards
“The HTML metadata standard specifies requirements and recommendations for embedding metadata - information about a document - in all new HTML pages published on BBC online (bbc.co.uk).”
Bigfoot
“Footnotes on the web are a pain in the ass. You click on a tiny number, get transported somewhere near the bottom of the page, find the footnote you were looking for, and click on a link to go back to where you were on the page.”
Responsive Data Table Roundup
“There has been a bunch of takes on responsive data tables since I first published about it.”
URL Rewriting for the Fearful
“I think it was Marilyn Monroe who said, “If you can’t handle me at my worst, please just fix these rewrite rules, I’m getting an internal server error.” Even the blonde bombshell hated configuring URL rewrites on her website, and I think most of us know where she was coming from.”
Git/Github Resources
“I suck at Git/Github and need to get a lot better. I asked for resources a while back and here’s what people came back to me with:”
Clean Up Your Mess - A Guide to Visual Design for Everyone
“If you're like most people, you feel like a baby when it comes to visual design. You sometimes have a vague sense of what you want, but can't articulate it or make it come about. All you can do is point and cry. This guide will help you communicate with conscious skill. It will show you how to create designs that are easy to understand and attractive.”
Adactio: Journal—Classy values
“I don’t want to attempt to summarise either article as they both give fairly lengthy in-depth explanations of their positions, although I find that they’re both a bit extreme. They’re both ostensibly about CSS, though in reality they’re more about the class values we add to our HTML (and remember, as Ben points out, class is an HTML attribute; there’s no such thing as CSS classes).”
Building a Live-score Widget Using PHP Web Sockets
“The introduction of web sockets makes it possible for web applications to handle near real-time data without resorting to "hacks" such as long-polling.”
6 Tips for Creating AJAX-Heavy Websites
“We all know the many advantages of using AJAX for given tasks: users don't need to wait for a new page load, actions are performed in the background, and we can provide a much more dynamic user experience. The ideas are simple but the execution of AJAX-heavy web application creation can be very difficult.”
Full-width justified vertically centered navbar
“In a couple of recent projects I’ve faced designs where the main navigation bar gave me more trouble than usual. These are the prerequisites that make the problem tricky to solve”
Using IndexedDB to Manage 3D WebGL Assets
“In this article, I’d like to share everything I’ve been learning while developing the support for IndexedDB inside our 3D WebGL Babylon.JS game engine. Indeed, since 1.4.x, we’re now supporting storing & loading the JSON scenes containing our 3d meshes and their .PNG or .JPG textures as blobs from IndexedDB.”
PHP Framework Benchmark
“As I wanted to set up a system to benchmark PHPixie I decided I might as well benchmark other frameworks too.”
Lanyrd: from idea to exit - the story of our startup
“Our startup story begins in June of 2010 with our wedding - a rather unconventional beginning to be sure.”
Wit — Natural language for your app
“In the era of Siri, there are situations where your users expect a hands-free interface: while they drive, work out, wear Google Glass or the new generation of smart devices. However for us developers, voice interfaces often mean frustration and bad UX. Today, with the combination of the best voice-to-text engines and Wit, you can finally bring the power of voice to your app.”
Client-side full-text search in CSS
“The advantage of using CSS selectors rather than JavaScript indexOf() for search is speed: you only change one element at each keystroke (the <style> tag) instead of changing all the elements matching the query.”
Apple Inc.: Does the Apple logo really adhere to the golden ratio
“I've been fascinated with this premise for years now, and this week I saw this popular graphic pop up yet again...I'd seen this graphic debunked, but I decided it was finally time to sit down and answer this for myself definitively.”
Using Node.js and Websockets to Build a Chat Service
“Node.js and Websockets are the perfect combination to write very fast, lag free applications which can send data to a huge number of clients. So why don’t we start learning about these two topics by building a chat service! We will see how to install Node.js packages, serve a static page to the client with a basic web-server, and configure Socket.io to communicate with the client.”
10 Easy Steps to a Complete Understanding of SQL - Tech.Pro
“Too many programmers think SQL is a bit of a beast. It is one of the few declarative languages out there, and as such, behaves in an entirely different way from imperative, object-oriented, or even functional languages (although, some say that SQL is also somewhat functional).”
Accessible Mega Menu
“The accessible mega menu supports keyboard interaction modeled after the behavior described in the WAI-ARIA Menu or Menu bar (widget) design pattern, however we also try to respect users' general expectations for the behavior of links in a global navigation.”
Use CSS transitions for link effects
“Bringing hovers back from the vaults, Jenn Lukas explains how to use CSS3 transitions to create fun link effects and enhance user experience”
Semantic CSS With Intelligent Selectors
““Form ever follows function. This is the law.” So said the architect and “father of skyscrapers” Louis Sullivan. For architects not wishing to crush hundreds of innocent people under the weight of a colossal building, this rule of thumb is pretty good. In design, you should always lead with function, and allow form to emerge as a result.”
Comparing and contrasting ins, del, and s
“Since the mists of HTML 2 we’ve been able to semantically indicate added or removed information using the elements and respectively. While seemingly simple on the surface these elements have hidden depths.”
50 Totally Free Lessons in Graphic Design Theory
“While many of us can create something that looks good in Photoshop or attractive when spliced into CSS, but do we actually understand the design theory behind what we create? Theory is the missing link for many un-trained but otherwise talented designers.”
How to Find or Validate an Email Address
“Matching a valid email address is a perfect example showing that (1) before writing a regex, you have to know exactly what you're trying to match, and what not; and (2) there's often a trade-off between what's exact, and what's practical.”
Butterick’s Practical Typography
“Typography is the vi­su­al com­po­nent of the writ­ten word. And be­ing a pub­lish­er of the writ­ten word nec­es­sar­i­ly means be­ing a typographer. This book will make you a bet­ter typographer.”
Your First Rendezvous With Photoshop
“Are you new to Photoshop? This tutorial is part of a 25-part video series demonstrating everything you will need to know to start working in Photoshop.”
Real-World Off-Line Data Storage
“In many projects there comes a time when you’ll need to store some data off-line. It may be a requirement or just an improvement for your users, but you have to decide which of the available storage options you will use in your application. This article will help you choose the best one, for your app.”
5 key principles for better web development
“I remember a few years back when I began working on my first enterprise project, it was a massive learning curve for me and, despite many set-backs over the course of the project, I was so proud of this thing of beauty I'd created when it went live... Slowly new features were requested. These were exciting times... Then one day I read the words many creatives fear. Words of woe: 'Our NEW website has gone live". It was over.”
Resize an Image Using Canvas, Drag and Drop and the File API
“Recently I was asked to create a user interface that allows someone to upload an image to a server (among other things) so that it could be used in the various web sites my company provides to its clients. Normally this would be an easy task...”
CSS Triangles
“Lucky for me, MooTools Core Developer Darren Waddell shared with me a great trick: CSS triangles. Using pure CSS you can create cross-browser compatible triangles with very little code!”
Tour Baikonur, the world's first and largest operational spaceport
“Both Sputnik 1 and Vostok 1 were launched from Baikonur Cosmodrome, located in desert of Kazakhstan. It has since served as a launch pad for generations upon generations of spacecraft, including the International Space Station. Take a tour of Baikonour as it looks today.”
Download The United States Code
“Each update of the United States Code is a "release point". This page contains links to downloadable files for the most current release point. The available formats are XML, XHTML, and PCC (photocomposition codes, sometimes called GPO locators). Certain limitations currently exist.”
Phalcon PHP - High performance PHP framework
“Phalcon is an open source, full stack framework for PHP 5 written as a C-extension, optimized for high performance. You don’t need to learn or use the C language, since the functionality is exposed as PHP classes ready for you to use. Phalcon also is loosely coupled, allowing you to use its objects as glue components based on the needs of your application.”
Design for Hackers: Why Monet Never Used Black
“Monet’s paintings evoke a sense of energy and life, they leap off the canvas with color and contrast, but Monet somehow managed to avoid using the color black for nearly his entire painting career. By avoiding black in your own designs, you can replicate some of this dynamism.”
A Race to Save the Orange by Altering Its DNA
“With a precipitous decline in Florida’s harvest predicted within the decade, the only chance left to save it, Mr. Kress believed, was one that his industry and others had long avoided for fear of consumer rejection. They would have to alter the orange’s DNA — with a gene from a different species.”
10 startup mistakes and how to avoid them
“Laurence McCahill from digital product specialists Spook Studio highlights some common early-stage pitfalls, with some guidance on how you can avoid them.”
Resources to Get You Up to Speed in Ember.js
“It aims to make it substantially easier to build single-page web apps by abstracting a lot of the complexities for writing scalable and maintainable MVC-based code.”
Building The New Financial Times Web App (A Case Study)
“We didn't just want to build a product that fulfilled its current requirements; we wanted to build a foundation that we could innovate on in the future. This meant building with a maintenance-first mentality, writing clean, well-commented code and, at the same time, ensuring that our code could accommodate the demands of an ever-changing feature set.”
5 HTML5 and ARIA design patterns
“With HTML5 and ARIA now in regular use across the web, several design patterns are emerging that solve common scenarios.”
Flight by Twitter
“Flight is a lightweight, component-based JavaScript framework that maps behavior to DOM nodes.”
The unprofitable SaaS business model trap
“There's a tacit assumption that if only we just stopped spending to grow, we'd be profitable. The fallacy is: That time never comes.”