Need Lorem Ipsum? Inside HTML?

Emmet is great for that. With it installed in the code editor you are using, you can type "lorem" and then tab and it will expand into a paragraph of Lorem Ipsum placeholder text. But it can do more! You can control how much you get, place it within HTML structure as it expands, and get different bits of it in repeated elements.

(more…)

Using GSAP to Animate Game UI with Canvas

The year was 1995; Toy Story hit the theaters, kids were obsessively collecting little cardboard circles and Kiss From a Rose was being badly sung by everyone. I was a gangly ten-year-old, and like any other relatively tall kid I was often addressed to by "you must be so good at basketball!". So I practiced and practiced spending hours on the court of my elementary school. Eventually, I realized, much to the dismay of aunts and other cheek-pinchers alike, that while occupying vertical real estate might give you an advantage in the art of basketball, it does not ensure it.

Fast forward 21 years later. Now a tall and gangly developer, still bad at basketball, I was faced with a project: Designing and implementing a full motion video web basketball game for the NBA’s Detroit Pistons. Throwing balls around is one thing; throwing pixels around — now that's finally a basketball challenge I can ace!

(more…)

A Table With Borders Only On The Inside

You know, like a tic-tac-toe board. I was just pondering how to do this the other day, as one does. There are three ways I can think of. One involves a good handful of rules and is the way I intuitively think of, one involves a deprecated attribute, and one is very simple and feels kinda like a CSS trick.

(more…)

Video Transcripts

None of the videos in our entire video screencasts library have captions / subtitles / transcripts. That means all of that content is rather useless to the deaf, as was made quite clear to me in this recent email:

I'm a big fan of CSS-Tricks and I make a lot of use of your written content, however the same can't be said for your videos as I'm deaf. It may not be viable for your business but subtitles on your videos would enable access to me - and probably thousands of others - who can't follow your videos via sounds.

(more…)

Fully Managed Cloud Hosting

Do you have a client that requires absolutely zero downtime?

How about any sites that have unpredictable traffic? Welcome spikes in visitors that can happen anytime, but can be a big problem for web servers.

You should look at Fully Managed Cloud Hosting on Media Temple. It may be the perfect home for these projects. It's Amazon Web Services hosting, with white-glove support from Media Temple's AWS-certified Cloud Architects. This is instant scaling, super high-performance web hosting that you don't have to manage yourself.

People’s Names That Break Websites

I heard from Alex Goldman of Reply All (a super duper very great podcast with stories loosely originating from the internet):

We're doing a story about people that have names that websites and computers don't seem to like - for example, we spoke to a guy named William Test, and a woman named Katie Test, both of whom can't seem to keep a hotel or airplane booking because the name "test" is flagged by internal systems.

We also spoke to a guy named Christopher Null who had the same problem, and woman named Joan Fread, who can't use paypal because her last name is the same as a PHP command.

I'm curious if there's anyone in the dev community that is thinking about this, and how to deal with it. Is it even considered a problem? Is the population that this affects so small that people don't even think about it?

(more…)

Deploying From Bitbucket to WordPress

Of all the projects I've worked in the last few years, there's one that stands out as my favorite: I wrote a WordPress plugin called Great Eagle (Tolkien reference) that allows my team to install and update themes and plugins from our private Bitbucket repos, via the normal wp-admin updates UI.

This plugin has blasted our dev shop through the roof when it comes to development best practices, in ways we never expected or intended. It forces us to use proper version numbers because now we can't deploy without them. It forces us to store our work in Bitbucket because now we can't deploy without it. It forces us to use the command line en route to deploying our work (by which I simply mean, git push origin master), which then led to us using phpUnit. Now we can't deploy unless our tests pass. We've arrived at the nirvana of test-driven development, all because we started with the unrelated step of deploying from git.

If this all sounds standard and obvious, great. I'd love a chance to learn from you. If this sounds like exotic rigmarole, guess what? This article is for you.

(more…)

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.

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

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.

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