Rendering and interaction have become a lot more consistent across browsers in recent years. It’s still not perfectly uniform, however, and a lot of small issues can trip you up. Add on top of these issues the variables of different screen sizes, language preferences and plain human error, and we find a lot of small things to trip up a developer.

Running a website in the early years of the web was a scary business. The web was an evolving medium, and people were finding new uses for it almost every day. From book stores to online auctions, the web was an expanding universe of new possibilities.

As the web evolved, so too did the knowledge of its inherent security vulnerabilities. Clever tricks that were played on one site could be copied on literally hundreds of other sites. It was a normal sight to log in to a website to find nothing working because someone had breached its defences and deleted its database. Lessons in web security in those days were hard-earned.

In my ideal world, CSS Grid and Flexbox would have arrived together, fully formed to make up a layout system for the web. Instead, however, we got Flexbox first and, due to it being better at creating grid-type layouts than floats, we ended up with a lot of Flexbox-based grid systems. In fact, many of the places where people find Flexbox difficult or confusing are really due to this attempt to make it a method for grid layout.

I love the text editor setup I've been using for the past year and a half, so I want to show off my setup! Visual Studio Code has far surpassed my experiences with Atom, Spyder, Sublime Text, Emacs, and Idle (the built-in Python editor) which I used for the years before it. I thought I would do a quick write up on my setup and the extensions I love!

Theme

Since I teach people how to code professionally and give a lot of talks on programming, having a readable theme is super important to me. I also love to have a theme that I enjoy aesthetically, so usually something with a lot of girly colors.

For an entire generation, MySpace was a gateway to the addictive social networking platforms that are now a ubiquitous feature of our lives. And for many members of that same generation, MySpace was a gateway to another inescapable part of modern life—writing code.

Since the site’s demise nearly ten years ago, certain totems of the MySpace experience have stuck in our collective memories—e.g. the top 8, auto-playing music, and, of course, Tom. But of all the features that made MySpace the cultural sensation that it was, the ability to style a profile page with HTML and CSS might have left the biggest footprint behind.

One of the most powerful and convenient CSS Grid features is that, in addition to explicit column sizing, we have the option to repeat-to-fill columns in a Grid, and then auto-place items in them. More specifically, our ability to specify how many columns we want in the grid and then letting the browser handle the responsiveness of those columns for us, showing fewer columns on smaller viewport sizes, and more columns as the screen estate allows for more, without needing to write a single media query to dictate this responsive behavior.

We're able to do that using just one line of CSS — the one-liner that reminds me of when Dumbledore just waved his wand in Horace's apartment and

When you're starting to play around with CSS at the very beginning, like any other language, you have to get used to the syntax. Like any syntax, there are a bunch of little things you need to know. Some characters and the placement of them is very important and required for the CSS to work correctly. And some characters are more about clean looking code and generally followed standards but don't matter for the CSS to work.

First, so we have the terminology down:

A CSS ruleset consists of a selector and delcaration(s) wrapped in curly braces.

Table of Contents

When you were small, haven’t you ever dreamt of becoming the commander of a space mission? Of exploring outer space and seing the Earth from above? Well, you might not have made it into an actual space shuttle, but maybe you still carry this

In the mind’s eye of many people Japan is a land of tranquil Zen gardens, serene temples, and exquisite tea ceremonies. Both traditional and contemporary Japanese architecture, books and magazines are the envy of designers worldwide. Yet for some reason practically none of this mastery has been translated into digital products, in particular websites, most of which look like they hail from around 1998.

Relative Lengths

A relative length takes sizing relative to some other thing, and therefore the final size of something defined using a relative length may be different if the thing it is relative to changes.

The complete set of relative units is as follows. The first four units are font relative, while the last four are viewport relative.

em

ex

ch

rem

vw

vh

vmin

vmax

As these values are relative to something, it is important to identify exactly what they are relative to. For the font relative unit rem then this is always relative to the size of the root element which is an HTML document is the

As we have seen, flexbox wasn’t designed for grid layouts—but this is where our newest specification is most at home. CSS Grid Layout does exactly what its name suggests: it enables the creation of grid layouts in CSS. This is two-dimensional layout—laying things out as a row and a column at the same time. We’ll go over many more examples of Grid Layout in the rest of this book, but let’s start by seeing how Grid can solve the problem we had with making flexbox display like a grid.

Welcome to the October 2017 release of Visual Studio Code. There are a number of significant updates in this release and we completed several popular outstanding feature requests. We hope you like it and the highlights include:

Good designers spend a great deal of time sweating over typography. They agonise over typefaces, iterate through type scales and meticulously apply white space, all in the service of the reader. Then comes along a table with the temptation to get creative, and all thoughts of the reader go out of the window. And yet tables are there to be read, referenced and used, not merely looked at.

Tables come in many forms. Some contain simple numbers, others are complex with mixtures of numeric data and textual information. Some require reading row by row, others are scanned vertically. The potential use for tables is as varied as the written word. They can be financial statements, bus timetables, multilanguage dictionaries, tables of contents, numerical conversions, pricing options, feature comparisons, technical specifications, and so on.

Games development is notoriously difficult. With that in mind, spare a thought for the folks taking part in this year’s Js13kGames competition, which sees them create a JavaScript game while staying within a 13kb file limit.

That’s crucial, as it means that in order to win, developers won’t just have to be incredibly creative, but also extremely conservative.

Most popular games libraries are out of the question, as they’re simply too big. The popular Phaser library, for instance, is 815kb at its most compressed.

That said, the JS13KGames website suggests an array of games microframeworks which do much of the tedious leg-work, while occupying a minimum of space.

This is a guest post written by Facebook’s Nuclide team member @matthewwithanm. He tells the story how the new docks got introduced to Atom and how package authors can make great use of them.

One of the things that the Nuclide team has always really loved about Atom is how it lets us extend and experiment with UI. Tools like Outline View, Console, Diagnostics, and the Debugger all need custom UI and, up until recently, their natural home was Atom’s Panels. Located at the edges of the window, panels are a great place for these kind of graphical tools but they have a couple of issues.

They stack, and can easily end up consuming a lot of valuable screen real estate.

Remember when JavaScript was a language used to make elements change on the page when the cursor was over them? These days are over, every language evolves over time, and so does the way we use them. Look at the code you wrote one or two years ago: do you feel ashamed? If yes, this post is for you 🙂

I'll try here to list some good practices to make your JavaScript code easier to write, read and maintain.

Use a linter that can format your code

The first advice I'm giving you is to use a linter that will check you respect some rules that make your code consistent from a file to another, especially if you're several developer to work on the same project: indentation, spaces in parenthesis, replace

Answering the question

How much space the menus occupy

The first and biggest problem I run into are therefore the menus. I always thought that they eat up a huge amount of space and as you can see on the left, the vertical system doesn’t use the space very intelligent. At the top there’s a navigation bar and at the bottom the classic tap bar. Sometimes these menus vanish when the user starts scrolling, but that isn’t the most elegant way and it’s used very sparely. So I had to tackle this first.

I solved this problem by giving the user only a simple indication, that there are more pages to discover and a hamburger menu. This solution uses way less space, but doesn’t provide any information on what you can do with these menus. To get rid of this problem, the menu will change once the users starts swiping up or down and a navigation menu with labels will appear.

The grid is an intersecting set of horizontal and vertical grid lines that divides the grid container’s space into grid areas, into which grid items (representing the grid container’s content) can be placed

Err… what? 🤔

CSS Grid Layout introduces a lot of new concepts; there are 17 new properties to learn, and many more new terms to understand. This can make getting started with CSS Grid Layout difficult, as new terms reference other terms and you can get into a spiral of confusion. So, here are the basic concepts and terminology of CSS Grid Layout, explained.

It is a designers role to create compelling layouts users like to use. White space is a concept that will help you to make beautiful, easy to read websites.

We live in the times of constant distraction. All kinds of information surround us from printed and digital media, outdoor advertising, online ads. Websites, e-commerces, mobile apps — they are all full of content.

We should create websites users like to visit. All layouts need to be easy to understand, with scannable and readable content.

‘Crowded’ websites are difficult to read. Complexity often makes users uncomfortable. If we’ve overwhelmed them with lots of different information, all fighting for their attention, they will leave or not take the action we’d wanted them to do. It may be purchasing something on e-commerce website or reading the article on a blog.

[[Changelog for version 10.17 of a piece of software. One change listed: "The CPU no longer overheats when you hold down the spacebar" Comments: LongtimeUser4 writes: This update broke my workflow! My control key is hard to reach, so I hold spacebar instead, and I configured Emacs to interpret a rapid temperature rise as "control"e Admin writes: That's horrifying. LongtimeUser4 writes: Look, my setup works for me. Just add an option to reenable spacebar heating.]] {{Title text: There are probably children out there holding down spacebar to stay warm in the winter! YOUR UPDATE MURDERS CHILDREN.}}

Thanks to Flexbox, a new layout mode in CSS3, we can get all of our cards in a row, literally. Card layouts have grown in popularity over the past few years – as you’ve probably noticed, social media sites have really embraced cards. Pinterest and Dribbble use cards to feature information and visuals. And if you’re into Material Design, Google’s cards are well described in their pattern library.

I personally like card layouts for their readability and how scrollable they are. They present the perfect “burst” of information in a way that is easy to browse, scroll, and scan all at once.