Web Design: Bringing a systematic approach to your frontend code with BEM

Wednesday, June 20, 2018

Bringing a systematic approach to your frontend code with BEM

#345 — June 20, 2018

CSS Doodle: A Web Component for Drawing Patterns with CSS — A Custom Elements-based component that builds an internal grid of DIV elements and then populates them using CSS to create patterns.

Yuan Chuan

▶ The Cost of JavaScript — In just 20 minutes Addy Osmani covers approaches to delivering JavaScript in an efficient way to ensure your users experiences are as seamless and smooth as possible.

Addy Osmani

Plan Visually with a Single Glance and Make Sure Your Projects Get Done — monday.com is a project management tool your team will enjoy using. It makes it fun and easy for everyone to collaborate, focus and get more done. It's a visual project management tool that'll help you and your team collaborate and achieve more.

monday.com sponsor

Don't Use The 'Placeholder' Attribute — The 'placeholder' attribute populates an input element with temporary text to indicate what input is expected, but it introduces issues that prevent it from being as useful as it sounds.

Eric Bailey

BEM For Beginners: Why You Need BEM — BEM is what we in the UK might call a 'Marmite' topic: people either love it and use it all the time or are disinterested in the idea entirely. CSS style isolation has value, however, and BEM can bring you more besides when it comes to structuring your frontend code. I'm still not convinced myself but this is a worthy attempt at showing BEM's worth.

Inna Belaya

Blink/Chrome Intent to Ship: Picture-in-Picture (PiP) — The Picture-in-Picture spec lets sites create a floating video window on top of other windows for media that's left playing.

François Beaufort

Edge and IE11 To Support HSTS Preloading Using Chromium's List — For security conscious top level domains that are insisting on fully HTTPS-based usage.

Microsoft Edge Dev on Twitter

💻 Jobs

Frontend Developer at X-Team (Remote) — We help our developers keep learning and growing every day. Unleash your potential. Work from anywhere. Join X-Team.

x-team

Passionate Frontend Developers - Montreal, Canada/Full time — Make bus travel accessible worldwide. Localization, scale, perf challenges abound. We value novel perspectives & diversity. 🚌🌍

Busbud

Have You Tried Vettery? — Vettery matches top tech talent with fast-growing companies. Take a few minutes to join our platform.

Vettery

📘 Tutorials

The Web Layouts of Tomorrow — How modern CSS can aid with building "unconventional" layouts.

Max Böck

Can I Use 'grab' and 'grabbing' Values for CSS's 'cursor' Property? — In short, yes, all major desktop browsers support it.

Can I Use

Cheat Sheet: Functional Programming with JavaScript — A handy resource for JavaScript developers interested in writing functional style code. Get it now.

Progress Kendo UI sponsor

Don't Just Copy @font-face Definitions out of Google Fonts' CSS — Google Fonts serves up different code for different browsers. Use the code Google supplies and let them do the hard work.

Chris Coyier

▶ Golden Rules for Typography on the Web

Richard Rutter Slidedeck

Creating More Neat Patterns with Unicode — Unicode characters + CSS can equal some very interesting designs.

Yuan Chuan

How To Use CSS Grid to Mix and Match Design Patterns

Bryan Robinson

Augmented Reality for the Web with WebXR — A new WebXR AR API has been added to Chrome Canary to enable initial testing and playing about if augmented reality is your thing.

Joseph Medley

Using JavaScript Modules on the Web — A handy guide now that all major browsers support them.

Addy Osmani and Mathias Bynens

✏️ A Focus on CSS Animations

7 Performance Tips for Smoother JavaScript Animations — Tips for optimizing animation performance and achieving a 60FPS target for smooth motion on the web.

Maria Antonietta Perna

Explore The New Frontier of CSS Animation — Grasp the best techniques to bring browser experiences to life.

Ana Travas and Sergej Skrjanec

Seven Essential Tools for Web Animation

Steven Roberts

🔧 Code and Tools

Teleport: Over-The-Air Hot Reloading and Debugging for PWAs — A dev-server proxy that enables instant hot reloading and debugging across devices.

Eric Simons

Build Better Websites. Learn Free for 10 Days

Pluralsight sponsor

A Neat Container Query Flow Chart — "I need container queries!" Or do you..?

Greg Whitworth