dope shit

web dev hypertext

  1. 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.

  2. 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.

  3. Aphyr

    Copyright © 2014 Kyle Kingsbury. Non-commercial re-use with attribution encouraged; all other rights reserved.

    Real respectable developer. Clojure, search, photography, more.

  4. 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

  5. OpenGeofiction

    OpenGeofiction is a map of an imaginary world, created by a community of worldbuilders. You can take part in this project too.
  6. Splashbase

    Search & discover free, public domain, hi res photos
  7. 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.

  8. 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.
  9. 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.

  10. Wavepot

    Digital audio workstation of the web
  11. 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.
  12. Slim

    A Fast, Lightweight Template Engine for Ruby
  13. 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.

  14. jq

    jq is a lightweight and flexible command-line JSON processor.
  15. Collections JS

    This package provides JavaScript implementations of common collections, with many useful features.
  16. 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.

  17. 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.
  18. 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.

  19. subrosa

    Subrosa is an encrypted communication platform. Reclaim your privacy and communicate freely.
  20. Planleaf

    Task management with email. Manage tasks completely over email with anyone, anywhere.
  21. Hamlet

    Simple and powerful reactive templating
  22. Bike Index

    Do Right By Your Bike. Bicycle registration that just works. Online, powerful, free.
  23. Leaflet.js

    An Open-Source JavaScript Library for Mobile-Friendly Interactive Maps.
  24. 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.

  25. Can I Use

    Compatibility tables for support of HTML5, CSS3, SVG and other technologies in various browsers.
  26. Viewport Units @ Can I Use

    Compatibility table for support of Viewport units: vw, vh, vmin, vmax in desktop and mobile browsers.
  27. 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.
  28. 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.
  29. bounce.js

    bounce.js lets you create tasty CSS3 powered animations in no time.
  30. Steady.js

    A jank-free module to do logic on the onscroll event without performance regressions in a @media-query like conditions.
  31. Yosemite UI Kit

    The most comprehensive Yosemite UI KitDesigned exclusively for Sketch 3
  32. 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.

  33. 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.

  34. 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.
  35. Custom Elements

    a web components gallery for modern web apps

    A place to share reusable elements created using Web Components. Another Zeno Rocha project.

  36. 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.

  37. 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.

  38. 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.

  39. WebComponents.org

    A place to discuss and evolve web component best-practices.

    Major resource for keeping tabs on Web Components.

  40. 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.

  41. 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.

  42. 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.

  43. 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.

  44. 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.

  45. 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;
    }
                      

  46. 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.

  47. 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.

  48. 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.

  49. 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

  50. 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.

  51. Respond CMS

    Respond is an open source, responsive content management system that you can use to build responsive sites.
  52. Pikock

    Build multi-device websites without coding.

    Not free.

  53. 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.

  54. 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.

  55. 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.
  56. 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.

  57. 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."

  58. gulp.js

    The streaming build system. gulp's use of streams and code-over-configuration makes for a simpler and more intuitive build.
  59. 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.

  60. 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.

  61. 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.

  62. StaticGen

    Top Open-Source Static Site Generators

    Good list, limited to availability on GitHub.

  63. BitBalloon

    The ultimate hosting platform for your static sites & apps
  64. Coffitivity

    Our coffee shop sounds boost creativity. Check out these FREE tools designed to keep you at your best.

    Immersive streaming noise.

  65. 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!

  66. 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.

  67. 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.

  68. Build in Amsterdam

    Combining branding, design and advanced technology

    Sophisticated site. Plus we're headed to Amsterdam.

  69. 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.
  70. Hoist

    Quickly build web apps your users will love.
  71. 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.

  72. 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.
  73. 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.

  74. 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.
  75. 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.
  76. Crowsnest

    A RESTful API for controlling air conditioners, light bulbs, cameras and everything in between

    Woah.

  77. 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 with attr(), and then styling it with width: 50%".

  78. 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.

  79. Grid

    A simple guide to responsive design. Made by Adam Kaplan.

    Solid. This kinda exemplifies work hard & be nice.

  80. 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.
  81. 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.

  82. osxc

    simple configuration tool for os x
  83. Prose

    Prose is a content editor for GitHub designed for managing websites.
  84. 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 to true.

    At the time of writing, you need to view this link in FireFox 29+ to see the result of css variables.

  85. 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.

  86. NoTex

    An online text editor. It supports reStructuredText, Markdown, LaTex, and more!
  87. Buttons

    A CSS button library built with Sass & Compass
  88. Slidebars

    Slidebars is a jQuery plugin for quickly and easily implementing app-style revealing, overlay and push menus and sidebars into your website.
  89. 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.

  90. Seattle Icons

    Icons representing neighborhoods, landmarks, & other important features of Seattle, WA, released as Creative Commons.

    Seth Vincent ftw! This is a great idea.

  91. Seattle.io

    seattle.io is a guide to the city's neighborhoods & communities.

    Kind of a LocalWiki & web dev meetup mash up.

  92. Kimono

    Turn websites into structured APIs from your browser in seconds.
  93. 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!

  94. CSS Vocabulary

    A small app to browse through which is what in css.

    Nice little page that highlights the formal segments of CSS.

  95. Goji

    A web microframework for Golang.
  96. SUIT CSS

    CSS for building self-contained, composable, configurable UI components.
  97. 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.

  98. skelJS

    A www frontend framework. One 20kb file. Four powerful components:
  99. 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.

  100. 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.

  101. Atom

    A hackable text editor for the 21st Century. Atom is modern, approachable, and hackable to the core.
  102. Light Table

    The next generation code editor.

    Built with Clojure.

  103. Brackets

    Brackets is an open source code editor for web designers and front-end developers.
  104. 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.
  105. 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.
  106. Sass

    CSS with superpowers.
  107. 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.

  108. Metalsmith

    An extremely simple, pluggable static site generator.
  109. 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.
  110. Assemble

    The static site generator for Node.js, Grunt.js and Yeoman.
  111. Middleman

    Middleman is a static site generator using all the shortcuts and tools in modern web development.
  112. Koken

    Creative website publishing. Koken is a free system designed for photographers, designers, and creative DIYs to publish independent websites of their work.
  113. Dropr

    The easy online portfolio.
  114. Siteleaf

    Content management simplified. Edit in the cloud, publish anywhere.
  115. Designing in the Open

    Designing in the open means sharing your work and/or process publicly as you undertake a design project.
  116. Pattern Lab

    Pattern Lab is a collection of tools to help you create atomic design systems.
  117. The Noun Project

    Creating, Sharing and Celebrating the World's Visual Language.

    Dude up top comes from here.

  118. 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.
  119. Open Iconic

    An open source icon set with 218 marks in SVG, webfont and raster formats.
  120. Mixture

    Mixture. A rapid front-end development toolset for Mac & Windows.
  121. Matt Soria

    Web Dood, Illustrationist, Happy Person.
  122. Stylus

    Expressive, dynamic, robust CSS
  123. 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.
  124. Kickoff

    A lightweight front-end framework for creating scalable, responsive sites
  125. 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.
  126. 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
  127. Foundation

    The most advanced responsive front-end framework in the world.
  128. Pure CSS

    A set of small, responsive CSS modules that you can use in every web project.
  129. CSS Wizardry

    Hi there, I’m Harry; I am a Consultant Front-end Architect, writer, and speaker from the UK
  130. 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.
  131. Monstra

    Monstra is a modern and lightweight Content Management System.

    A free software CMS that uses XML as its database.

  132. 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.

  133. 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.

  134. 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.

  135. 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—floats or some display: inline-block; hackery. Both are fine and well established, but tables are way fucking cooler. They give us some awesome power with the table-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?.

  136. 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.

  137. 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.
  138. 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.
  139. 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.

  140. Write Code Every Day

    I decided to set a couple rules for myself:
    1. 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.
    2. 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.)
    3. All code must be written before midnight.
    4. he code must be Open Source and up on Github.

    Some useful guidance.

  141. Hacker News

    Probably the best overall one-stop source. The comments are often especially valuable. Requires commitment.

  142. 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.

  143. 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.
  144. 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.

  145. 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.
  146. 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.
  147. 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.

  148. 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!