Blog

If You’re Inlining SVG Icons, How Do You Deal With Unique Titles and IDs?

Just inlining SVG seems to be the easiest and most flexible icon system. But that chunk of <svg> might have a <title>, and you might be appying IDs to both of those elements for various reasons.One of those reasons might be because you just want an ID on the icon to uniquely identify it for JavaScript or styling purposes. Another of those reasons is that for accessibility, it’s recommended you use aria-labelledby to connect the id and title, like: <!-- [...]

Web Development Reading List #188: Real-World Accessibility, Flexbox Madness, And The Ephemerality Of Things We Build

   CSS is an amazing tool which we constantly use but we don’t seem to honor it appropriately. Whenever I see the growing browser support of the :focus-within selector, the much wanted justify-content: space-evenly for Flexbox or how great CSS Grids already work, I feel really grateful to have such awesome tools available to work with.And with advanced new media queries such as prefers-reduced-motion, screen [...]

Web Design Weekly #285

Headlines How we built Uber’s high performance web app In this article Angus Croll describes how his team built m.uber and shares the challenges of implementing the native app experience in a super-lightweight web app. (eng.uber.com) A day without Javascript (sonniesedge.co.uk) Articles Maintainable project structure for React/Redux Matteo Mazzarolo shares some information on his journey to achieving a comfortable Redux project structure. (hackernoon.com) Styled-Components in Action In this article Varayut Lerdkanlayanawat walks you through the main concepts of Styled-Components along with some nice coding examples. (medium.com) Keyboard-Only Focus Roman [...]

Challenge Yourself More Often By Creating Artwork Every Day

   Whether you’re into good ol’ drawing and painting, or quick editing in Photoshop or Illustrator, one thing’s for sure: they’re all creativity’s best friends. Some draw pictures all day, while others find their inspiration in uncommon sources in order to break out of the box.Whatever it is that you decide to do, it’s good to challenge yourself more often and get out of your comfort [...]

Free Business Icons For The Startup World (28 Icons, 5 Formats)

   What comes to your mind when you hear the word “business”? White collars, cubicle offices, and encrusted habits? Not when you ask the folks at Vexels. Their Business Concept icon set manages to break free from the conceptions that are stuck in our heads and paints a fresh and creative picture instead. One that captures the liveliness of today’s startup world. And, well, we are [...]

Web Design Weekly #276

Headlines Painting with Code Airbnb’s new open source library lets you design with React and render your production React components into Sketch, use real API data seamlessly and use Sketch as a canvas to build experimental tooling on top of.  (airbnb.design) Free eBook: How to start a WordPress maintenance business Our 50+ page eBooks covers everything you need to know to start your WordPress maintenance business. (godaddy.com) Articles When Does a Project Need (insert JS framework)? A post which focuses on React but with the idea [...]

Web Development Reading List #187: Webpack 3, Assisted Writing, And Automated Chrome Testing

   This week, we’ll explore some rather new concepts: What happens if we apply artificial intelligence to text software, for example? And why would a phone manufacturer want its business model to be stolen by competitors?We’ll also take a look at how we can use the new headless Chrome browser for automated testing and learn to build smarter JavaScript bundles with Webpack 3’s new scope hoisting. [...]

How To Rename a Font in CSS

Nothin’ like some good ol’ fashioned CSS trickery. Zach Leatherman documents how you can use @font-face blocks with local() sources to redefine a font-family. It can actually be a bit useful as well, by essentially being an abstraction for your font stack. @font-face { font-family: My San Francisco Alias; src: local(system-ui), local(-apple-system), local('.SFNSText-Regular'); } p { font-family: My San Francisco Alias, fantasy; } Direct Link to Article — PermalinkHow To Rename a Font in CSS [...]

Starry Summer Nights, Unexplored Worlds, And… Ice Cream! (July 2017 Wallpapers)

   July is almost here, and that means, well, new wallpapers. It’s been nine years already since we embarked on this mission to welcome the new month with a fresh batch of desktop eye candy, with wallpapers that are a bit more distinctive as the usual crowd. And it wasn’t any different this time around.Bound to spark new ideas, artists and designers from across the globe [...]

Web Design Weekly #277

Headlines Getting Started With Headless Chrome Headless Chrome is shipping in Chrome 59. It’s a way to run the Chrome browser in a headless environment. Essentially, running Chrome without chrome! It brings all modern web platform features provided by Chromium and the Blink rendering engine to the command line. (developers.google.com) We’ve Mastered the Screen, What’s Next? (medium.com) Snag the hottest new domain name for designers .design domains were just released and some of the best ones are still available. Normally cost $ 35 [...]