#345 — June 20, 2018 |
Frontend Focus |
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 |
|
🔧 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 |
CSS-Micro-Reset: Minimal Barebone CSS Reset Vladimir Carrer |
Pickr: A Flat, Simple, No Dependency Color Picker — Live demo. It’s nice. Simon Wep |
Implement 200+ Tools with the Flip of a Switch – Get Started for Free Segment sponsor |