overflow-wrap

The overflow-wrap property in CSS allows you to specify that the browser can break a line of text inside the targeted element onto multiple lines in an otherwise unbreakable place. This helps to avoid an unusually long string of text causing layout problems due to overflow.

(more…)

Tinder for Bananas

I saw this little web app (live demo) by Das Surma going around the other day. It's funny, but it's also a really compelling demo app for a bunch of modern technologies. I'm sure that's the whole point of it.

  • Minimal build process. Just Gulp to use Babel and PostCSS. It's heavy on ES6+ and CSS custom properties.
  • Loads of custom elements, like <tinderforbananas-item>, with the Polymer polyfill for those.
  • Icons are super tiny SVG, they look hand-golfed.
  • ServiceWorker for offline cache.
  • Mobile and performance-first design and interactions.

Maybe it'll be like the HTML5 Boilerplate of the future.

The Line of Death

Eric Lawrence has written a pretty scary post about browser security and malicious websites that hope to trick us:

When building applications that display untrusted content, security designers have a major problem— if an attacker has full control of a block of pixels, he can make those pixels look like anything he wants, including the UI of the application itself. He can then induce the user to undertake an unsafe action, and a user will be none-the-wiser.

And the problem is even worse on mobile:

Virtually all mobile operating systems suffer from the same issue– due to UI space constraints, there are no trustworthy pixels, allowing any application to spoof another application or the operating system itself

Opera Neon

Hot takes!

  • I wanted to give it at least a few days of full-time use, but you can't use extensions (yet?). The web is too hard for me to use without 1Password and Ghostery.
  • The UI feels fresh and interesting. UI polish seems like an excellent direction for Opera to go. Since moving to Blink they aren't spending (as many) resources on under the hood browser stuff, they might as well polish up the hood itself. It's neat how it uses your desktop background as its background. It's not transparent, though, it's just a duplicate image.
  • The pop-out videos are pretty sweet. Safari can do it (awkwardly), but the tray of media in Neon is an upgrade. I don't understand why Chrome and Firefox can't do this... isn't it a macOS level thing?
  • Weird bug: doesn't seem like you can ⌘V paste into the address bar?

How To Create Your Own URL Scheme

A URL Scheme is like "http://..." or "ftp://...". Those seem like a very low-level concept that you don't have much control over, but actually, you do! What sounds like an exotic topic is not so exotic at all: we are constantly using different URL Schemes, on any given day. For example when we're clicking a link to an iPhone app that launches the AppStore. Or when a friend sends us a link to a playlist and it opens in the Spotify desktop app.

In the following short tutorial, we'll look at how custom URL schemes work on macOS and iOS.

(more…)

WebSlides

Looks like a nicely done little system, by José Luis Antúnez for creating presentation slides.

WebSlides makes HTML presentations easy. Just the essentials and using lovely CSS.

An alternative to reveal.js. I like how it utilizes other open source projects.

I always feel like I should be using things like this for my presentations, as someone who normally very much likes working in HTML and CSS. But for some reason, I always reach for Keynote or Slides.com. I think it's a brain-modes thing. When I'm in "I need to work on what I'm going to say at this presentation" brain-mode, I don't want to be messing with markup, I just want to write and maybe pluck at some UI controls.

Modernizing our Progressive Enhancement Delivery

Scott Jehl, explaining one of the performance improvements he made to the Filament Group site:

Inlining is a measurably-worthwhile workaround, but it's still a workaround. Fortunately, HTTP/2's Server Push feature brings the performance benefits of inlining without sacrificing cacheability for each file. With Server Push, we can respond to requests for a particular file by immediately sending additional files we know that file depends upon. In other words, the server can respond to a request for `index.html` with `index.html`, `css/site.css`, and `js/site.js`!

Server push seems like one of those big-win things that really incentivize the switch to H2. We have an article about being extra careful about caching and server push.

Sponsored: Analytics for Lazy Developers

Here's an incomplete list of analytics tools I've personally used: Google Analytics, Alexa, Gauges, FullStory, NewRelic, and Woopra.

Perhaps you've used some others? Mixpanel, Heap, KISSmetrics, Rollbar?

They are all different and do interesting and valuable things for our businesses. Integrating them means integrating their third-party JavaScript into your site. What if you want to add one or remove one? You're back in the code making all those adjustments. And heaven forbid one of them updates its API...you're on the hook for integration maintenance indefinitely.

Enter Segment.

Segment is the data hub that routes your data directly to these analytics tools (and hundreds of others, for advertising, data warehousing, CRM and others). You're still using your favorite tools, but you only have to integrate Segment into your site or apps. Segment then sends all the appropriate data to the other tools.

CSS-Tricks uses and recommends Media Temple web hosting. Their exceptional service and support keep this site fast. Use coupon code CSSTRICKS to save 20% for the first year.

Save 20% on Web Hosting

Get Started with Debugging JavaScript in Chrome DevTools

Kayce Basques wrote an excellent interactive tutorial that explores how to debug JavaScript with DevTools. Kayce looks into a number of techniques and options that I was completely unaware of and, as he notes in the beginning of the tutorial, if you’re still using console.log to find bugs in your code (like me) then this article is written just for you (also me).

Clean Code JavaScript

Inspired by Robert C. Martin's book Clean Code, Ryan McDermott put together a repo with some software engineering best practices as they apply to JavaScript in particular. The repo has tons of great guidelines for beginning programmers, and good reminders for seasoned maintainers.

I'm a particular fan of this style of teaching because it focuses on legibility as much as writing. This ensures that our codebases are friendly to the next developer who comes along, even if it's ourselves.

Lebab

Turn your ES5 code into readable ES6 (sugar-syntax). It does the opposite of what Babel does.

David Walsh has a post on it. I'm interested, as I'm still working on my muscle memory for ES6. Even the simple stuff. So blasting some old code through this as a kick start seems appealing.

The Road to SVG and Custom Elements in Clarity Icons

Another day, another design system deciding an SVG icon system is the way to go.

Everybody has their own set of considerations when making a choice like this. Scott Mathis documents the major considerations for Clarity: Opting-out, sizing, multi-colors, interactivity, scale, and the future. Based on these, they actually ended up on a custom element (<clr-icon>, which is inline <svg> under the hood), just like Etsy.

Non-Rectangular Headers

Jon Moore documents a trend in which designs opt for non-rectangular headers. Slants, rounded bits, image crops, even weird jagged polygons. I mean c'mon, what kinda site would put a weird jagged polygon as a header?

Build a Custom CMS for a Serverless Static Site Generator

Static Site Website Generators have been getting increasingly popular within the last 2 years. Much has been written (like this and this) and there have been many great open source projects and even funded companies launched to help you get up and running.

What if I told you that you could build a Static Site Generator with your own custom CMS without the need for a database? Not just that, but we can get to Hello World! in under 100 lines of JavaScript.

(more…)

Etsy’s Evolving Icon System

Etsy moves away from an icon font in production to using SVG. It's going to be an inline <svg> system, but abstracted as a <etsy-icon> custom element for ease of use.

Two cents:

  • I could see the need for that abstraction going away if we had a more convient syntax for <use> available, like: <svg use="icons.svg#cart" />
  • I like how dedicated they are to icon consistency. I struggle with this a lot. An SVG icon process can be so easy to work with, and new icons so easy to find and drop in, that consistency can suffer. That grid, with the examples, is gold.
  • They are still building an icon font as part of the build process, for the designers to use in design software.

That last one is surprising to me, as I would think it would be a pain in the butt to find the right icon to design with when the one you need is assigned to some random character in the font. I would think the concept of "Symbols" in Sketch or Illustrator would make the way to make those icons super easy to find and use for designers. Which makes me think what the font actually has to offer is interoperability between design software. I wonder if software like Lingo or Iconjar would be helpful here.

icon-closeicon-emailicon-linkicon-menuicon-searchicon-tag