-
-
Constraint validation
When the user agent is required to statically validate the constraints of form element form, it must run the following steps, which return either a positive result (all the controls in the form are valid) or a negative result (there are invalid controls) along with a (possibly empty) list of elements that are invalid and for which no script has claimed responsibility.
The HTML5 JavaScript constraint validation API for determining real-time form field validation. As referenced in Google Developers' Web Fundamentals documentation Provide real-time validation.
-
WebP
WebP is a new image format that provides lossless and lossy compression for images on the web. WebP lossless images are 26% smaller in size compared to PNGs. WebP lossy images are 25-34% smaller in size compared to JPEG images at equivalent SSIM index. WebP supports lossless transparency (also known as alpha channel) with just 22% additional bytes. Transparency is also supported with lossy compression and typically provides 3x smaller file sizes compared to PNG when lossy compression is acceptable for the red/green/blue color channels.
The page provides a downloadable converter.
-
Aphyr
Copyright © 2014 Kyle Kingsbury. Non-commercial re-use with attribution encouraged; all other rights reserved.
Real respectable developer. Clojure, search, photography, more.
-
Michael Biernat
Web Designer
Some dude's site that I came across when searching about Emmet & CSS. He basically took the Emmet docs and re-presented it. Plus he's from Michigan, and he's got a simple tutorial about parallax scrolling
-
CalDav Protocol
This web site describes the CalDAV protocol, and includes details about the protocol, related standards, CalDAV products and other related information. It is kindly being hosted by The Calendaring and Scheduling Consortium.
-
OpenGeofiction
OpenGeofiction is a map of an imaginary world, created by a community of worldbuilders. You can take part in this project too.
-
Technology Access and Adoption in Seattle
Welcome to our profile on how Seattle residents use information and communications technology
-
Splashbase
Search & discover free, public domain, hi res photos
-
Topic
Follow the topics you care about, grow your reputation, get notified about the hottest news as they happen and chat with people like you.
New twitter & reddit kind of app with a slight spin. Criticism in the HN thread makes some good points.
-
An Incremental Approach to Content Management Using Git
One of the many challenges with building or refreshing a website is the selection of a Content Management System (CMS). Despite our best efforts the CMS can often be a source of difficulty in a project, but there are alternatives. Read about the approach we took on www.thoughtworks.com to developing functionality to support content management in an incremental fashion.
-
Poetica
Our aim is to make the web a truly collaborative experience, by turning anywhere you can create content online into a space to work with others.
A Poetica co-founder (James Weiner) was the founding designer at the UK Government Digital Service.
-
Introducing the Web Audio Editor in Firefox Developer Tools
In Firefox 32, the Web Audio Editor joins the Shader Editor and Canvas Debugger in Firefox Developer Tools for debugging media-rich content on the web.
-
Wavepot
Digital audio workstation of the web
-
Grid Style Sheets
GSS reimagines CSS layout & replaces the browser’s layout engine with one that harnesses the Cassowary Constraint Solver — the same algorithm Apple uses to compute native layout.
-
Next-gen constraint layouts in the browser with Grid Style Sheets
Complex layouts, positioning, making beautiful UI’s for the web – it all gets pretty challenging for a complex web app. Could there be an easier way? In this post I want to share on possible future tech you can try today.
A useful article that demos how to implement Grid Style Sheets
-
Slim
A Fast, Lightweight Template Engine for Ruby
-
Understanding the Humble Clearfix
A useful article that makes it to my bibliography on responsive/layout/grid design, especially my immediate web work where I'm desperately trying to keep layout simple yet robust. This resource was referenced in Adam Kaplan's cool GRID.
-
Improving the hamburger button
by Adrian Zumbrunnen
Another good reference on including the word "Menu" along with the hamburger.
-
jq
jq is a lightweight and flexible command-line JSON processor.
-
Collections JS
This package provides JavaScript implementations of common collections, with many useful features.
-
Philip I. Thomas
Explorer and engineer
-
Fun Jekyll Tricks
Here are a few tricks we found that make working with Jekyll a lot more fun.
A brief tutorial on getting more work out of Jekyll.
-
The Browser Hacker's Handbook
The Browser Hacker's Handbook gives a practical understanding of hacking the everyday web browser and using it as a beachhead to launch further attacks deep into corporate networks.
-
GitHub Octicons
Your project. GitHub's icons.
-
5iler
5iler (pronounced ‘filer’) is a notepad for the rhythm of your mind.
Cool app that constrains the notebook capacity in order to focus the user on only the ideas to jot down.
-
subrosa
Subrosa is an encrypted communication platform. Reclaim your privacy and communicate freely.
-
Planleaf
Task management with email. Manage tasks completely over email with anyone, anywhere.
-
Hamlet
Simple and powerful reactive templating
-
Bike Index
Do Right By Your Bike. Bicycle registration that just works. Online, powerful, free.
-
Leaflet.js
An Open-Source JavaScript Library for Mobile-Friendly Interactive Maps.
-
Visualizing MBTA Data
An interactive exploration of Boston's subway system
See also Current MBTA Delays.
-
Boba.js
A JavaScript library for Google Analytics
Boba as in tracker. The parent company, space150, promotes the idea of rebranding themselves every 150 days to maintain the core of what they stand for while shifting their appearance to match the prevailing cultural trend.
-
labratrevenge
Copyright © Justin Palmer
Data & GIS dude @GitHub. See also dealloc.me, and especially "Finding the perfect house using open data". Dope Shit.
-
Can I Use
Compatibility tables for support of HTML5, CSS3, SVG and other technologies in various browsers.
-
Viewport Units @ Can I Use
Compatibility table for support of Viewport units:
vw
,vh
,vmin
,vmax
in desktop and mobile browsers. -
TicTail
Tictail is an easy and free online shop solution that not only helps you create a beautiful online store within minutes but also helps you run it with ease.
-
Mo Servers Mo Problems by Nick Stielau
Video presentation & slides from a Drupalcon 2014 presentation about servers and containers; related to Docker.
-
JSNice
JSNice is a new kind of statistical de-obfuscation and de-minification engine for JavaScript. Given a JavaScript program, JSNice automatically suggests new likely identifier names and types.
-
bounce.js
bounce.js lets you create tasty CSS3 powered animations in no time.
-
Steady.js
A jank-free module to do logic on the
onscroll
event without performance regressions in a @media-query like conditions. -
Jank Free
Let's make the Web silky smooth!
-
Yosemite UI Kit
The most comprehensive Yosemite UI KitDesigned exclusively for Sketch 3
-
Sam Solomon
Entrepreneur hacker with good design and good points. Plus I think this picture pulls from Wild Style.
-
Creditcard.js
Creditcard.js is a more usable credit card form.
-
“X-UA-Compatible” content=“IE=9; IE=8; IE=7; IE=EDGE”
What is the meaning of this statement ?
A Stack Overflow question about
http-equiv
with a great answer. -
Vertical align anything with just 3 lines of CSS
With just 3 lines of CSS (excluding vendor prefixes) we can, with the help of
transform: translateY
, vertically center whatever we want, even if we don’t know its height.A useful article that uses the same approach as the code block I posted here down below under the title Patricia Palladino.com.
-
HTML5 Rocks
A resource for open web HTML5 developers.
A place where many of the killer Web engineers, especially from google, publish important articles. Lots of Web Component stuff inside.
-
The Extensible Web Manifesto
We—the undersigned—want to change how web standards committees create and prioritize new features. We believe that this is critical to the long-term health of the web. We aim to tighten the feedback loop between the editors of web standards and web developers.
-
<web>components</web> by Eric Bidelman
This is a slick ass slide show about Web Components by a guy at Google. Chrome Canary is recommended for viewing.
-
Custom Elements
a web components gallery for modern web apps
A place to share reusable elements created using Web Components. Another Zeno Rocha project.
-
Polymer Designer Tool
Here is the source of the designer tool, and here is a video primer on the designer tool. Way out!
-
Polyfill
In web development, a polyfill (or polyfiller) is downloadable code which provides facilities that are not built into a web browser.
From my very cursory investigation into Web Components so far, I learned that understanding polyfill is important to understanding Web Components.
-
X-Tag
X-Tag is a small JavaScript library, created and supported by Mozilla, that brings Web Components Custom Element capabilities to all modern browsers.
Mozilla's project, similar to Google's Polymer.
Click through this site. The way it renders its different pages via horizontal motion is dope shit.
-
Polymer
Building blocks for the web. Polymer is a library that uses the latest web technologies to let you create custom HTML elements. Build anything from a button to a complete application as an encapsulated, reusable element that works across desktop and mobile.
Google's project, similar to Mozilla's X-Tag.
-
WebComponents.org
A place to discuss and evolve web component best-practices.
Major resource for keeping tabs on Web Components.
-
Zeno Rocha
Front-end engineer.
This dude's slides, Web Components: a chance to create the future, were how I learned about Web Components. This guy is literally a web superhero.
-
Introduction to Web Components
This document is a work in progress. It relates all concepts associated with Web Components into one coherent, non-normative narrative.
A W3C Working Draft. This is next level html5, manipulating the shadow DOM, html includes, and more. Lots to learn.
-
FullCalendar
FullCalendar is a jQuery plugin that provides a full-sized, drag & drop calendar. It uses AJAX to fetch events on-the-fly for each month and is easily configured to use your own feed format.
-
Moment.js
A javascript date library for parsing, validating, manipulating, and formatting dates.
At the time of posting I'm not exactly sure what this is about. But it's a dependency of FullCalendar2.0 which I'm about to use for a project, so I include it here for future reference & for others.
-
JavaScript
JavaScript is a lightweight, interpreted, object-oriented language with first-class functions, most known as the scripting language for Web pages, but used in many non-browser environments as well such as node.js or Apache CouchDB. It is a prototype-based, multi-paradigm scripting language that is dynamic, and supports object-oriented, imperative, and functional programming styles.
A thorough collection of resources via the Mozilla Developer Network for understanding JavaScript.
-
Matt D. Smith
A designer living in Athens, GA with a beautiful wife and 3 amazing kids.
Great web designer. Created the Float Label Pattern, and wrote a good article on keeping the hamburger menu icon. A good example to study an approach to html. Creator of Athens Made.
-
Runnable
Run your code online.
I'm not exactly sure what's going on here, but dig it. It's like a JS Fiddle for web apps.
-
Patricia Palladino.com
I'm a software developer and computer sciences major living in Buenos Aires, Argentina.
Included here for his approach to vertically centering a small amount of page content. In the event he changes the linked styles in the future, the code is preserved here for reference:
html { overflow-y: scroll; -webkit-background-size: cover; -moz-background-size: cover; -o-background-size: cover; background-size: cover; min-height: 100%; } #container { position: fixed; top: 50%; left: 50%; -webkit-transform: translateX(-50%) translateY(-50%); transform: translateX(-50%) translateY(-50%); width: 35em; }
-
5 Common Server Setups For Your Web Application
When deciding which server architecture to use for your environment, there are many factors to consider, such as performance, scalability, availability, reliability, cost, and ease of management.
A Digital Ocean article that is useful for my understanding of web apps beyond the product that DO provides.
-
Making Everyone Go Away
As a bit of a hermit and someone who occasionally plays Project Zomboid with the zombies disabled just to fantasize about being the only person on Earth, I had this neat idea.
Cool demo from this odd musician fighter hacker dude, about removing people from photographs of urban space. The HN comment thread about it shares more useful info.
-
John Saddington
Hacker. Human.
Can't remember how I came on his site, but something tells me to read more of it.
EDIT: the next after posting this link I came across The Iron Yard, a growing startup accelerator/code school/coworking space and more type of organization that John works for. Good web design found herein.
-
Cornell University Brand Book
We're evolving the use of the Cornell insignia. Our brand is a reflection of everything we do and say, everything we print and broadcast.
Useful & interesting styleguide for print, web, and video. Design work by AWP, tipped off via Tyler Finck
-
Pollen: the book is a program
Pollen is a publishing system that helps authors create beautiful and functional web-based books. Pollen includes tools for writing, designing, programming, testing, and publishing.
Interesting idea. Pollen's creator used it to write a digital book - Practical Typography.
-
Respond CMS
Respond is an open source, responsive content management system that you can use to build responsive sites.
-
Pikock
Build multi-device websites without coding.
Not free.
-
The Makings of a Great Logo
6 questions to ask yourself when designing your brand.
This is a useful article for me. The site however, plays this silly game of not publicly posting their article links. Requiring instead to follow their twitter to get notified of new posts. Bad marketing antipattern.
-
100+ Interesting Data Sets for Statistics
Looking for interesting data sets? Here's a list of more than 100 of the best stuff, from dolphin relationships to political campaign donations to death row prisoners.
Great articl by this guy Robert Seaton.
-
The Global Database of Events, Language, and Tone
The Global Database of Events, Language, and Tone (GDELT) is an initiative to construct a catalog of human societal-scale behavior and beliefs across all countries of the world, connecting every person, organization, location, count, theme, news source, and event across the planet into a single massive network that captures what's happening around the world, what its context is and who's involved, and how the world is feeling about it, every single day.
GSLIS alum.
-
A Hacker's Guide to Git
Git is currently the most widely used version control system in the world, mostly thanks to GitHub. By that measure, I’d argue that it’s also the most misunderstood version control system in the world.
-
Headroom.js
Headroom.js is a lightweight, high-performance JS widget (with no dependencies!) that allows you to react to the user's scroll.
Easy js include that hides a navbar after scrolling down and displays it upon scrolling up.
-
Font Awesome to PNG
I'm a small web app returning Font Awesome icons as png. You can define the color and size of the Font Awesome icons and download them directly.
Check the HN thread about this app for other similar resources and the great hacker response of "It's just a single-purpose little hack, not a product, let the author have his fun."
-
Jekyll-Styleguide
Use Jekyll to easily generate a (OO)CSS Styleguide/Pattern Library.
Via David Hund
-
gulp.js
The streaming build system. gulp's use of streams and code-over-configuration makes for a simpler and more intuitive build.
-
Markdown Resources
A curated collection of Markdown resources: apps, dialects, parsers, people, ...
I just &heart; curated lists. And here's the HN thread from which this tip came.
-
Gumby Framework
Create rapid and logical page layout and app prototypes with Gumby Framework, a flexible, responsive CSS framework, powered by Sass.
Another CSS & framework likely to elicit moans of bloat. Yet there are things to be learned within. Also, the Illinois Meat Lab uses Gumby.
-
KSS Knyle Style Sheets
Documentation for any flavor of CSS that you’ll love to write. Human readable, machine parsable, and easy to remember.
Living styleguide reference.
-
A Maintainable Style Guide
Anyone who has attempted to maintain a UI Style Guide over a long period of time will attest that it is a very difficult process. They are generally prioritised below the maintenance of your applications themselves and as such are likely the first candidates to fall behind and the last to be brought out of tech debt.
This guy has written a bunch of useful stuff.
-
StaticGen
Top Open-Source Static Site Generators
Good list, limited to availability on GitHub.
-
BitBalloon
The ultimate hosting platform for your static sites & apps
-
Ask HN: Which service do you use to sell downloads?
Some useful references in the comments.
-
HTML Wireframes
Brad Frost on wireframing in the browser.
-
Coffitivity
Our coffee shop sounds boost creativity. Check out these FREE tools designed to keep you at your best.
Immersive streaming noise.
-
Teleport
Browse the web from a country of your choice. No downloads or browser extensions to install. Type in a website address, select a country and get teleported!
-
uncss
Find Unused CSS
via David Walsh
-
UnCSS
UnCSS is a tool that removes unused CSS from your stylesheets. It works across multiple files and supports Javascript-injected CSS.
The uncss that Addy Osmani built from for his grunt-uncss in his Automating Front-end Workflow slides.
-
10 Ways to Create an Effective Website Design Brief
A good website design brief is a great way to consolidate all the information about the project and ensure that you and your client see the project in the same way. It will help you to jump-start a website design process into the right direction and will also serve as the foundational document during the design process.
Some useful tips.
-
Build in Amsterdam
Combining branding, design and advanced technology
Sophisticated site. Plus we're headed to Amsterdam.
-
Learn to Code HTML & CSS
Learn to Code HTML & CSS has one goal — to teach people how to build beautiful and intuitive websites by way of clear and organized lessons. The guide covers a variety of web design and development topics, ranging from beginner to advanced skill levels.
-
Hoist
Quickly build web apps your users will love.
-
Automating Front-end Workflow by Addy Osmani
Writing a modern web app these days can sometimes feel like a tedious process; frameworks, boilerplates, abstractions, dependency management, build processes..the list of requirements for a front-end workflow appears to grow each year.
-
Jr.
A static, static content generator that moves the "generator" part to the browser. This site is pure text files with a single Javascript included on each page that renders the theme and assets as needed.
-
Making Your Writing Work Harder For You
Let's talk blogging. I hate blogging, in that peculiar manner of hatred that one only discovers after spending lots of time getting good at the hated thing. How do I hate blogging, let me count the ways.
This is a really great article that makes lots of good points that take the cake in "defining the best of thought of this general period".
The HN thread about it probably has some useful stuff too.
-
HOODIE
Very fast app development. We want to enable you to build complete web apps in days, without having to worry about backends, databases or servers, all with an open-source library that's as simple to use as jQuery.
-
HN: Starbucks Style Guide
A few resources can be found in the HN comment thread around the Starbucks styleguide.
-
Web Accessibility Toolkit
Making digital resources usable & accessible in research libraries
-
The Open Graph Protocol
The Open Graph protocol enables any web page to become a rich object in a social graph. For instance, this is used on Facebook to allow any web page to have the same functionality as any other object on Facebook.
-
Crowsnest
A RESTful API for controlling air conditioners, light bulbs, cameras and everything in between
Woah.
-
Is it possible to apply CSS to half of a character?
HN post of a Stack Overflow question that produced great answers, including in the HN comments. Folks hacked styles that applied to apply different colors to the same text character (striped, checkered).
tl/dr; See this comment: "it's just combining the
:before
class withattr()
, and then styling it withwidth: 50%
". -
Simple Design is What You Need, Not What You Want
Great design tips for communicating and being supportive. Human and simple.
-
Tim Bray
On the IETF, ol networked head, had something to do with XML, and author of Pervasive Monitoring Is an Attack.
-
Let's Make a Bubble Map
My previous Let’s Make a Map tutorial describes how to make a basic map with D3 and TopoJSON; now it’s time to cover thematic mapping in the form of a graduated symbol map. The simplest graduated symbol is a circle, or bubble, whose size is proportional to the associated data. In this tutorial, we’ll make a bubble map of population by U.S. county.
-
Mike Bostock
Graphics Editor @nytgraphics. Creator of #d3js.
This guy's public writing maintains a high level of clarity & instruction. It all looks good too.
-
Grid
A simple guide to responsive design. Made by Adam Kaplan.
Solid. This kinda exemplifies work hard & be nice.
-
Macaw
Stop writing code, start drawing it. Macaw provides the same flexibility as your favorite image editor but also writes semantic HTML and remarkably succinct CSS. It's time to expect more from a web design tool.
-
#UofIwebcon 2014 conference tweets archive
Illinois WebMasters' Web Conference tweets. April 28-29, 2014
-
Exposing Your Metadata to Zotero
Whether you are a publisher of a scientific journal, operate a news site, or are a blogger, Zotero users will be eternally grateful if you expose bibliographic metadata on your website.
This docs page along with this Zotero forum discussion seem to be the main references for getting your site content recognizable by Zotero.
-
osxc
simple configuration tool for os x
-
Prose
Prose is a content editor for GitHub designed for managing websites.
-
CSS Variables in Firefox 29
The W3C has published a working draft introducing CSS Variables. Firefox 29 is just out and you can enable variables via about:config by setting
layout.css.variables.enabled
totrue
.At the time of writing, you need to view this link in FireFox 29+ to see the result of css variables.
-
CodeMirror
CodeMirror is a versatile text editor implemented in JavaScript for the browser. It is specialized for editing code, and comes with a number of language modes and addons that implement more advanced editing functionality.
I think this is the basis for the web technologies-based editors of late, like Atom, Light Table and Brackets.
-
NoTex
An online text editor. It supports reStructuredText, Markdown, LaTex, and more!
-
Buttons
A CSS button library built with Sass & Compass
-
Slidebars
Slidebars is a jQuery plugin for quickly and easily implementing app-style revealing, overlay and push menus and sidebars into your website.
-
Adam Smith
I'm a web designer and front-end developer based in Barcelona. I offer bespoke web tailoring and themes for WordPress.
Author of Slidebars. Nice clean & solid styles.
-
Seattle Icons
Icons representing neighborhoods, landmarks, & other important features of Seattle, WA, released as Creative Commons.
Seth Vincent ftw! This is a great idea.
-
Seattle.io
seattle.io is a guide to the city's neighborhoods & communities.
Kind of a LocalWiki & web dev meetup mash up.
-
Kimono
Turn websites into structured APIs from your browser in seconds.
-
NPR open-sources Copytext, a library for handling spreadsheets as Python objects
HN post linked to http://copytext.readthedocs.org/en/latest/
-
CSS Diner
It's a little game to help you learn CSS selectors. Type in the correct selector to complete each level. Get help on the right.
Gets into the selectors nitty-gritty. Select the plates!
-
CSS Vocabulary
A small app to browse through which is what in css.
Nice little page that highlights the formal segments of CSS.
-
Goji
A web microframework for Golang.
-
Autoprefixer
Parse CSS and add vendor prefixes to rules by Can I Use.
-
Nicolas Gallagher
Author of Normalize.css.
-
SUIT CSS
CSS for building self-contained, composable, configurable UI components.
-
Solved by Flexbox
Cleaner, hack-free CSS.
In addition to showcasing the power of Flexbox, this site also aims to be an example of modern CSS design and architectural practices. Namely modular, reusable style rules built on a predictable and testable naming convention.Practical content + web dev theory.
-
skelJS
A www frontend framework. One 20kb file. Four powerful components:
-
Effeckt.css
Performant CSS transitions & animations on GitHub.
Useful library of css animations.
-
Got sliders on your website? Stop that.
Useful reference on the slider debate. Bad forum title.
-
Whither print.css? A Rallying Cry for a Web That’s Fit to Print
Analysis of styles for printing pages.
-
Be a person, use an automated response.
How automation and robots can make the job application process more humane.
A reminder about deliberately crafting feedback in designing UX. Substitute "input" for "job application" above.
-
GitHub Cheat Sheet
A collection of cool hidden and not so hidden features of Git and GitHub. This cheat sheet was inspired by Zach Holman's Git and GitHub Secrets talk at Aloha Ruby Conference 2012 (slides) and his More Git and GitHub Secrets talk at WDCNZ 2013 (slides).
-
Animating SVG with CSS
There isn't just one way to animate SVG. There is the
<animate>
tag that goes right into the SVG code. There are libraries that help with it like Snap.svg or SVG.js. We're going to look at another way: using inline SVG (SVG code right inside HTML) and animating the parts right through CSS.Via CSS-Tricks.
-
On The Grid
On the Grid is a design podcast featuring Matt McInerney, Andy Mangold & Dan Auer. Every episode the three of us call in for a conversation about design's effect on the world, and the world's effect on design.
-
David Bushell
Designer, front-end developer, and writer from North West UK.
Great designer. Here's an article of his about controlling list columns using
column-count
. -
Atom
A hackable text editor for the 21st Century. Atom is modern, approachable, and hackable to the core.
-
Light Table
The next generation code editor.
Built with Clojure.
-
Brackets
Brackets is an open source code editor for web designers and front-end developers.
-
Sublime Text
Sublime Text is a sophisticated text editor for code, markup and prose. You'll love the slick user interface, extraordinary features and amazing performance.
-
Less
Less is a CSS pre-processor, meaning that it extends the CSS language, adding features that allow variables, mixins, functions and many other techniques that allow you to make CSS that is more maintainable, themable and extendable. Less runs inside Node, in the browser and inside Rhino. There are also many 3rd party tools that allow you to compile your files and watch for changes.
-
Sass
CSS with superpowers.
-
Code Kit
CodeKit helps you build websites faster and better. Compile Everything. Auto-Refresh Browsers. Bower Built-In...
Here's an informative article on CSS-Tricks about Code Kit 2.0
-
Geomicons Open
Open Source Icons for the Web
-
Animate.css
Just-add-water CSS animations.
-
Indexhibit
A user friendly CMS to build and manage the content of your website, using the established format consisting of an index for navigating the site and an exhibit area for displaying your works.
Old school and academic.
-
Metalsmith
An extremely simple, pluggable static site generator.
-
Craft
Craft is a content management system (CMS) that’s laser-focused on doing one thing really, really well: managing content. And since content comes in all shapes and sizes, we’ve built Craft to be as flexible as possible, without compromising on the ease of use for content authors.
-
Assemble
The static site generator for Node.js, Grunt.js and Yeoman.
-
Middleman
Middleman is a static site generator using all the shortcuts and tools in modern web development.
-
Koken
Creative website publishing. Koken is a free system designed for photographers, designers, and creative DIYs to publish independent websites of their work.
-
Dropr
The easy online portfolio.
-
Siteleaf
Content management simplified. Edit in the cloud, publish anywhere.
-
Designing in the Open
Designing in the open means sharing your work and/or process publicly as you undertake a design project.
-
Pattern Lab
Pattern Lab is a collection of tools to help you create atomic design systems.
-
Streamline Icons
Download 1600+ Vector Icons for Designers & Developers
-
The Noun Project
Creating, Sharing and Celebrating the World's Visual Language.
Dude up top comes from here.
-
Font Awesome
Font Awesome gives you scalable vector icons that can instantly be customized — size, color, drop shadow, and anything that can be done with the power of CSS.
-
Open Iconic
An open source icon set with 218 marks in SVG, webfont and raster formats.
-
Mixture
Mixture. A rapid front-end development toolset for Mac & Windows.
-
Matt Soria
Web Dood, Illustrationist, Happy Person.
-
Zander Martineau
Creative Technologist. London.
-
Stylus
Expressive, dynamic, robust CSS
-
Jeet Grid System
A grid system for humans. We still build things the way machines read them - not the way we intuit them. Jeet allows you to express your page grid the same way a human would describe it. No more needlessly nesting elements. No more rigid twelve column rules. Enjoy building faster with less code, and more flexibility with Jeet.
-
Kickoff
A lightweight front-end framework for creating scalable, responsive sites
-
Roots
Roots is a toolkit built on best practices for advanced front-end web development. Roots comes in the form of a static site build tool by default, but also includes templates and plugins for express and rails.
-
Semantic Grid System
Set column and gutter widths, choose the number of columns, and switch between pixels and percentages. All without any .grid_x classes in your markup. Oh, and did we mention it's responsive? Runs on LESS, SCSS, or Stylus
-
Foundation
The most advanced responsive front-end framework in the world.
-
Pure CSS
A set of small, responsive CSS modules that you can use in every web project.
-
CSS Wizardry
Hi there, I’m Harry; I am a Consultant Front-end Architect, writer, and speaker from the UK
-
Ghost
Ghost is a platform dedicated to one thing: Publishing. It's beautifully designed, completely customisable and completely Open Source. Ghost allows you to write and publish your own blog, giving you the tools to make it easy and even fun to do.
-
Monstra
Monstra is a modern and lightweight Content Management System.
A free software CMS that uses XML as its database.
-
Atomic Design
As the craft of Web design continues to evolve, we’re recognizing the need to develop thoughtful design systems, rather than creating simple collections of web pages.
Brad Frost's work emphasizing component- and system-based web design.
-
Future Friendly
In today's incredibly exciting yet overwhelming world of connected digital devices, these are the truths we hold to be self-evident. #FFLY
Further work from folks who've done a lot of thinking, writing and bibliography building about mobile-first, responsive, adaptive, atomic, content-first, etc., web design. The title does a good job of highlighting the essence of these ideas.
-
Style Guide Links
As a follow up to my article on A List Apart I thought I would put together a list of links that have been extremely helpful to me as I’ve thought about style guides.
The more style guides out there, the better. They are great for learning. Brad Frost has done an important job in talking about this as well.
-
Table Grid by @mdo
This is a serious-fun-dumb-useful experiment for writing a simple, responsive, and mobile-first CSS grid system. With tables. CSS grid systems are typically built in one of two ways today—
float
s or somedisplay: inline-block;
hackery. Both are fine and well established, buttable
s are way fucking cooler. They give us some awesome power with thetable-layout
property and offer dead simple vertical centering.The experimental basis for the grid system @mdo used (and tweaked a bit) for his Code Guide and WTF, HTML and CSS?.
-
Code Guide by @mdo
Standards for developing flexible, durable, and sustainable HTML and CSS. Enforce these, or your own, agreed upon guidelines at all times. Small or large, call out what's incorrect. For additions or contributions to this Code Guide, please open an issue on GitHub.
Great rule guide for keeping web code organized with a team or individually. The guide's layout itself employs an interesting minimal grid system.
-
WTF, HTML and CSS?
Reasons HTML and CSS might make you say what the fuck. A curated list of commonly frustrating HTML and CSS quandaries, miscues, and dilemmas.
-
Meteor
Meteor is an open-source platform for building top-quality web apps in a fraction of the time, whether you're an expert developer or just getting started.
-
The Meteor universe
a list of Meteor resources
-
Slick
The last carousel you'll ever need.
- Fully responsive. Scales with its container.
- Separate settings per breakpoint
- Uses CSS3 when available. Fully functional when not.
- Swipe enabled. Or disabled, if you prefer.
- Desktop mouse dragging.
- Infinite looping.
- Fully accessible with arrow key navigation.
- Add, remove, filter & unfilter slides.
- Autoplay, dots, arrows, callbacks, etc...
It's actually a nice carousel. The author's a good and productive guy.
-
Write Code Every Day
I decided to set a couple rules for myself:
- I must write code every day. I can write docs, or blog posts, or other things but it must be in addition to the code that I write.
- It must be useful code. No tweaking indentation, no code re-formatting, and if at all possible no refactoring. (All these things are permitted, but not as the exclusive work of the day.)
- All code must be written before midnight.
- he code must be Open Source and up on Github.
Some useful guidance.
-
Hacker News
Probably the best overall one-stop source. The comments are often especially valuable. Requires commitment.
-
Mule Radio Syndicate
From our ass to your ears
Assorted podcasts with a couple that focus on the web. Via Mule Design Studio
-
The Changelog
The Changelog is a member supported blog, weekly newsletter and podcast that covers the intersection of software development and open source.
They pay attention to Hacker News and have good podcasts. Lots of node.js stuff.
-
Podcasts for Bootstrappers and Solopreneurs
These are the best podcasts from the entrepreneur community that provide honest and more importantly actionable advice for you to grow your business.
-
Mozilla Developer Network
Shared knowledge for the Open Web
-
MDN HTML5 Guide
Designed to be usable by all Open Web developers, this reference page links to numerous resources about HTML5 technologies, classified into several groups based on their function.
-
skien.cc
a mathematician / economist / statistician by schooling, a data scientist by trade, and a python hacker by night, skien.cc (pronounced skīəns) is my blog aimed to track explorations in all of the above.
Useful blog on python and general programming.
-
Shit for making websites
Great website curating dope shit for web dev, kinda like this site.
-
Bower
Bower is a package manager for the web. It offers a generic, unopinionated solution to the problem of front-end package management, while exposing the package dependency model via an API that can be consumed by a more opinionated build stack. There are no system wide dependencies, no dependencies are shared between different apps, and the dependency tree is flat.
-
Flat UI Colors
This small web app helps you to copy the colors from Flat UI. It's kind of responsive, so you can use it with a tiny browser like a widget. I'll be providing more small apps like this, so if you are interested follow me @ahmetsulek.
-
iHover
CSS3 hover effects pack. iHover is an impressive hover effects collection, powered by pure CSS3, no dependency, work well with Bootstrap 3!
See especially hover effect 13.
-
Magic Animation CSS3
Come sapete, amo molto il linguaggio CSS ed in particolare mi piace sempre andare oltre, in questo caso ho voluto creare un pacchetto di animazioni in CSS3 che potrete usare liberamente per i vostri scopi e quindi nei vostri progetti web, si chiama Magic!
Slightly over the top, and not exactly an original resource, but a good spin on it. Great background!