Web Design Bookmarks

Note: This page is out of date, and is currently being rewritten. Instead of posting it all at once, I’ve started to put sections up as I complete them. I’ll post on Twitter when new sections are added.

Highlights

Coming Soon!

Recommended Resources

Coming Soon!

Blogs

Coming Soon!

Twitter

  1. @SohTanaka
  2. @davidwalshblog
  3. @smashingmag
  4. @theleagueof
  5. @24ways
  6. @dhh
  7. @jeresig
  8. @rauchg
  9. @paul_irish
  10. @rails
  11. @rjs
  12. @codinghorror
  13. @chriscoyier
  14. @sstephenson
  15. @tenderlove
  16. @jasonzimdars
  17. @fakedarren
  18. @codepo8
  19. @zeldman
  20. @yikihiro_matz
  21. @meyerweb
  22. @lukew
  23. @mdo
  24. @LeaVerou
  25. @reactjs
  26. @Vjeux
  27. @codrops
  28. @jaffathecake
  29. @vpieters
  30. @jacobrossi
  31. @rem
  32. @sebmarkbage
  33. @joewalnes
  34. @chriseppstein
  35. @brad_frost
  36. @reybango
  37. @grorgwork
  38. @nzgb
  39. @sarah_edo
  40. @SaraSoueidan
  41. @HugoGiraudel

Front End

Coming Soon!

HTML 5

  1. HEAD tag elements - An exhaustive list of what goes in the <head> tag.
  2. Offline Webapps - A list of resources on how to make your webapp work offline.
  3. HTML Schemas - A guide on how to use schemas for different sets of structured data.
  4. Form Autofill - Tips on how to guide the browser in autofilling form fields. This is particularly useful since form autofilling doesn’t have a lot of documentation.
  5. Form Autcomplete - Additional resources on specifying autocorrect and autocapitalization attributes.
  6. Mobile Keyboards - A set of tips and tricks to help indicate to mobile browsers what keyboards to use for different input types.
  7. Form Validation - How to use the pattern attribute and style error messages with CSS and JavaScript.
  8. Form Validation - An article that looks at HTML5 form validation options.
  9. Picture Element - A introduction to the <picture> element and what its intended usage is.
  10. When to not use Picture - When and where to not use the <picture> element.
  11. Picture Snippets - Additional technical information on using the <picture> element.
  12. Viewport - Snippet for correctly setting the viewport on responsive designs.
  13. Color Input via Datalist - Snippet for choosing a color from a set defined in a datalist.
  14. Prevent Chrome Translation - David Walsh shows how to prevent Chrome from prompting the user to translate the page.
  15. Plyr - A well designed HTML5 media player.

CSS

Coming Soon!

CSS3

Core

  1. Normalize.css - I rarely see a project that isn’t using this. Whenever you create a new website, your first step should be including this file.

Flexbox

  1. Flexbox Cheatsheet - I use this cheatsheet the time. Very helpful explanation on what the different Flexbox properties do.
  2. Solved by Flexbox - Flexbox is amazing. If you’re having trouble learning it, this is a great guide for common layouts.
  3. Flexbox Reading List - Learn Flexbox, it is absolutely worth it. I promise.

Tricks for Polish

  1. Modal Overlay with CSS - Instead of a complicated HTML / CSS hybrid, Lea Verou shows how to get an overlay with one line of CSS. Apologies for not having the original tweet.
  2. Easy Visual Separator - My favorite way of styling a partial underline / border.
  3. Font Smoothing - I’m not sure if this is needed anymore, but for a time it was a lifesaver.
  4. Font Features - Neat CSS tricks to get the most out of web typography.
  5. Correct Rounded Corners - A quick explanation on correctly rounding corners with borders.

Responsive Media and Layouts

  1. Flexible Cover Images - With the modern web’s trend of large banner images (guilty!) this is a handy link to have.
  2. Fluid Videos - You no longer need JavaScript to scale a video to a container!
  3. CSS Tetris - Some tricks on how to leverage CSS to prevent orphan grid items.
  4. Object Fit - This is something I need to learn more about. I think it has huge potential to ease responsive designs.
  5. Object Fit / Position - More information on the above.
  6. Full Screen Images - Additional information on large image trends in web development. This article is older; focus on the background-size: cover bit. You shouldn’t need prefixes / IE hacks anymore. NOTE: I learned this the hard way when working on Company Inc., but mobile browsers don’t support full screen background images very well (or at all) due to the massive performance hit.

Colors and Fonts

  1. HTML5 Placeholder Styling - A guide on styling the placeholder text on HTML input elements.
  2. Native System Fonts - A growing trend in CSS is using the native system font as the body font-family. This bootstrap pull request contains information on how to achieve that - as it turns out, it’s pretty tricky!
  3. Clrs - A set of replacements for the default web colors. I use these frequently in other places as well - the color choices are great.
  4. Colors from Miyazaki Films - I haven’t ever used these, but I think it’s a fun resource to have in your pocket.

Libraries (Animation and Filters)

  1. Animate.css - One of the most prolific CSS animation libraries. A solid choice to use for drop in animations.
  2. Repaintless - Repainting is generally bad for performance - this library is a set of animations that won’t cause a browser repaint. If you’re looking at Animate.css, check this out first.
  3. Hover.css - Hover animations you can add to buttons and other elements.
  4. CSSgram - A library of Instagram filters reproduced using CSS.
  5. CSSCO - Similar to the above, but with VSCO filters.
  6. progrecss - A CSS powered progress bar.
  7. Typesetting - A typography focused CSS boilerplate.

Measurements and Advanced Tips

  1. CSS Pro Tips - A list of CSS tips that contains semi-obscure things.
  2. Drop Line Heights - A quick tip to developers calling on them to reduce their line heights.
  3. Media Query Units - A discussion on the different types of units in CSS and which to use for media queries.
  4. rem and em - A quick guide on when to use rem vs em for unit sizing.
  5. Which CSS Measurement to use When - Another guide explaining the different CSS measurements and when to use them.
  6. :target Animations - A neat way of using :target to create some pure CSS animations.

Cool Effects

  1. Ladda - A great way of inlining loading indicators and displaying them as part of the button.
  2. Float Label - There are several forms of this out there, but this one is my favorite.
  3. Morphing Buttons - A fun concept that takes a button and transforms it into a modal when clicked.
  4. CSS Tooltips - A nice tooltip that you can style / animate as needed.
  5. Glitchy Text - A fun effect that might serve well on an error page.
  6. Glitchy Text 2 - A different style of the above.
  7. Click Effects - Some subtle animated click effects.
  8. Caption Hover Effects - A great collection of hover effects to use.
  9. Notification Styles - A collection of different notification styles and themes.
  10. Hover Effects - Image hover effects that animate text and borders.
  11. More Hover Effects - More of the above.
  12. Dialog Animations - Some crazy ones, but a couple of nice ones here as well.
  13. Credit Card Input - An interesting experiment that styles a credit card input form.
  14. Animated Weather Icons - A fun example of using animated CSS icons.
  15. Rotating Words - Perhaps a little too flashy for practical use, but a fun demo of rotating a word in a sentence.

Animated Icons

  1. CSS Animated Hamburgers - A collection of hamburgers that animate when clicked using CSS.
  2. CSS Loading Animations - A diverse collection of CSS loading animations.
  3. Single Element CSS Spinners - A collection of CSS spinners.
  4. CSS Spin Loaders - Another set of spinners for use on your website.

Frameworks

  1. Bulma - A CSS Framework that uses Flexbox.
  2. Tachyons - Another generic CSS framework, but it had some components I liked.
  3. Spectre - I’m interested in the optimization for asian fonts.

Sass

  1. Sass Boilerplate - My preferred Sass file structure.
  2. Susy - Although I’d recommend using Flexbox now, if for some reason you want a “traditional” grid system I’d start here.
  3. HiDPI Mixin - A mixin for specifying styles on HiDPI displays.
  4. px to rem - A mixin for converting pixel values to rem values.
  5. Breakpoint Mixin - A mixin to ease media query usage.
  6. Shevy - A Sass library for typography and vertical rhythm.
  7. Sass Snippets - Useful mixins for colors, fonts, and breakpoints.
  8. Managing z-index - How to use Sass Maps to manage z-index values.
  9. Sass Maps - Some uses are covered elsewhere here, but the icon idea is great too.
  10. Sass Burger - A mixin for an animated Sass hamburger icon.
  11. Color / Background Color - How to use Sass to automatically swap color based on the background color.
  12. Pantone Colors - Pantone colors as Sass variables.
  13. Glitchy Text Mixin - A Sass mixin to give text a glitch effect.

PostCSS

Coming Soon!

JavaScript

Coming Soon!

Vanilla

Coming Soon!

Node.js

Coming Soon!

React

Coming Soon!

jQuery

Coming Soon!

Service Workers

Coming Soon!

SVG

Coming Soon!

Platform Integration

Coming Soon!

Animation

For CSS animations, look in the CSS section. This deals mainly with theory

Coming Soon!


Back End

Coming Soon!

Ruby

Coming Soon!

Gems

Coming Soon!

Rails

Coming Soon!

Configuration

Coming Soon!

Tutorials

Coming Soon!

Security

Coming Soon!


Design

Coming Soon!

Typography

Coming Soon!

User Interface (UI)

Coming Soon!

User Experience (UX)

Coming Soon!

Accessibility

Coming Soon!


General

Coming Soon!

Theory

  1. Ethical Web Development - If you’re a web developer, live by these principles.
  2. 7 Principles of Rich Web Applications - I mentioned it in the Highlight section already but this article is a phenomenal guide to follow.
  3. No I Don’t Want To Configure Your App - A rant on how you should implement libraries and structure APIs. I very much agree with the way Rails and Ruby operate; I’ve often struggled with JavaScript libraries when trying to lace them together. This article helps voice those frustrations.
  4. The 12 Factor App - I don’t adhere to this as strongly as some but I do think it has some valuable advice.
  5. Public Speaking - If you ever find yourself giving a talk these tips are quite helpful.
  6. Building The Times UI - A nice case study on building a rather complicated site.

Tools

Coming Soon!

Documentation

Coming Soon!

Analytics

Coming Soon!

Performance

Coming Soon!

APIs

  1. Open Weather Map - My personal choice to get weather information.
  2. ipinfo - Useful for getting regional information about a user from their IP address. Please use responsively!