The Lodge is members-only design/dev videos and Office Hours.

Next Office Hours Session: "Programming Fundamentals" Dec 02 - 2:00 PM Eastern

Creating a Web Type Lockup

A type lockup is a typographic design where the words and characters are styled and arranged very specifically. Like the design is literally locked in placed. This idea is slightly at-odds with the responsive web that we know and love, where text is fluid and wrappable and whatnot. Yet, the design possibilities of lockups are very appealing. I think we can hang onto what makes them awesome will still holding onto what makes the web awesome.


New Improved Illustrator SVG Export Settings  

If you use Illustrator for SVG wrangling, you'll love last night's release. All of the new features make for an easier workflow. Some of them include:

  • Better default code that's easier to hand-edit
  • Better ID's (gone are the days of #foo_1_), with new options for unique IDs or layer names
  • Ability to export individually selected elements at a time
  • Higher quality output of SVG shapes, gradients, patterns, symbols, and masked objects
  • Ability to change the decimal place precision
  • Ability to view the export code output before finalizing
  • Easier export of multiple artboards, with a new default viewBox containing all elements

These features are available on "export", not on "save as", and it's recommended that you retain your original .ai file for future iterations.

Animating Your Brand  

Donovan Hutchinson kicks off this years 24 ways, the webnerd advent calendar which is always a great way to close off the year.

They have an RSS feed, and since I know that 42% of you read this site with RSS that might be of interest. I've been enjoying as a feed reader.

Sponsor: Syncano – a serverless architecture to help you build apps more efficiently  

Syncano is all about giving creative freedom to the front end developer. Here are a few ways Syncano can make it easier to build apps:

  • Run your own code (Python, Ruby, JavaScript, etc) without setting up any servers.
  • Build your own microservices. A "CodeBox" is a script you can run on our servers, that you can communicate with, that can do things that are too expensive to do on mobile/front end (e.g. use a third-party API, process an image, etc).
  • Back end modules like OAuth, real-time communication, and more. So your time is better spent solving problems for your customers.

Try it free for six months and let us know what you think!

Building for HTTP/2  

Rebecca Murphey:

This is everything-you-thought-you-knew-is-wrong kind of stuff. In an HTTP/2 world, there are few benefits to concatenating a bunch of JS files together, and in many cases the practice will be actively harmful. Domain sharding becomes an anti-pattern. Throwing a bunch of <script> tags in your HTML is suddenly not a laughably terrible idea. Inlining of resources is a thing of the past. Browser caching — and cache busting — can occur on a per-module basis.

I can't help but think that web development might actually make sense some day.

Metadata Markup  

Jeremy Keith looks at the competing standards for the metadata that goes in the head which ultimately helps services such as Slack, Twitter and Facebook to create a preview of the content of a website. Unfortunately the lack of consensus is an annoying problem for developers:

We’ve seen this kind of waste before. I remember when Netscape and Microsoft were battling it out in the browser wars: Internet Explorer added a proprietary acronym element, while Netscape added the abbr element. They both basically did the same thing. For years, Internet Explorer refused to implement the abbr element out of sheer spite.

40% Sale in the Shop  

Have you been trying to find some kind of SALE happening online today, but coming up empty handed? We have some CSS-Tricks T-Shirts and hoodies in the store at 40% off (use coupon code trikzare4kids) now through Monday.

If you're size Small or XXL/XXXL, most of the designs are available. If you're Medium or Large, not so much, but we hope to have some kind of new fun merch soon.

#143: Using and Caching Third-Party JSON with WordPress

On the design of CSS-Tricks as I record this, one of the things I wanted to add was a "Front End Design & Development Jobs" widget, powered by the CodePen Job Board. Those jobs are available as JSON data.

Couldn't we just do an Ajax request for that and use it? Perhaps a little JavaScript Templating? Sure, we could. But Ajax requests are async. I'm picturing a little spinner on every page load, waiting for the data …

Watch Video →

There's a whole bunch of content on CSS-Tricks.

Search for Stuff   •   Browse the Archives

Get the Newsletter ... or get the RSS feed