Treehouse: Grow your CSS skills. Land your dream job.

Choose a Random Option based on a Range

I have three options and I need to randomly pick one (in JavaScript). But not equally random. I want there to be a 10% chance of the first option, 20% chance of the second one, and 70% chance of the third.

Here are some ways to do that.…

Read Article →

Numeric Inputs – A Comparison of Browser Defaults

The spec, purposefully, stops short of telling implementations (browsers) how to handle UI. In this article we're looking specifically at <input type="number"/>, and you might be surprised to learn that the spec specifically says:

This specification does not define what user interface user agents are to use.

It goes on to explain that different languages, cultures, and regions might have good reason to handle numeric inputs differently. So browsers are on their own here, and perhaps this time …

Read Article →

Introduction to WordPress Front End Security: Escaping the Things

If you're a WordPress developer that writes HTML/CSS/JS (which is 100% of theme developers and 99% of plugin developers), you need to know the basics of front end security for WordPress. WordPress gives you all the tools you need to make your theme or plugin secure. You just need to know how and when to use each tool.

For example, one huge responsibility you have as a front-end developer is to prevent unescaped content from being printed to the page

Read Article →

Textures.js 

SVG patterns for Data Visualization by Riccardo Scalco.

This is like all my favorite web things smashed together. Beautiful design, SVG, accessibility, programmatic control with JavaScript, and open source. #swoon

Sponsor: All Courses on Skillfeed Free for a Month 

For a limited time, Skillfeed is offering access to all courses and tutorials for free! Web designers and other creative professionals can pick up career-building skills in web and graphic design, CSS, Adobe software, and more, from anywhere, at anytime. To celebrate its launch, Skillfeed is offering 30 days of free access to hundreds of online courses. Take your web design skills to the next level today. Don't miss out!

Probably Use initial-scale=1

If you're doing responsive design, you're using viewport <meta /> tags. These tell the browser what width it should render the viewport at. If you don't use this tag, it will render at the device's default, which almost certainly isn't what you want. But even if you are using viewport <meta />, there are subtle differences in the value you put in it.

I just wanna focus on one little difference here.…

Read Article →

Left Half and Right Half Layout – Many Different Ways

A whole bunch of years ago, we posted on this idea here on CSS-Tricks. We figured it was about time to update that and do the subject justice.

Imagine a scenario where you need to split a layout in half. Content on the left and content on the right. Basically two equal height columns are needed inside of a container. Each side takes up exactly half of the container, creating a distinct break between one. Like many things in CSS, …

Read Article →

Strategies for Staying on Top of Web Performance

Step one is caring about the performance of your websites. Step two is doing things to make it better. Step three is staying on top of performance for the long haul.

That means not just poking at trying to improve your web performance a few times a year, but making it a part of your active development and trying to prevent regressions. Certainly something that gets harder the more actively developed your site is.…

Read Article →

#137: SVG is for Everybody

Rather than a typical screencast, this is a video taken of my talk SVG is for Everybody recorded by the Treehouse gang at BlendConf. Of course there is far too much about SVG to cover in just one talk, so it's mostly me trying to convince you that SVG is very cool, where to get it, how to use it, and that kind of thing. Also a whole part about using SVG as an icon system and how that …

Watch Video →

More Blog Posts →