The Frontend Developer Handbook gets updated for 2019
source link: https://www.tuicool.com/articles/hit/nyyeyq3
Go to the source link to view the article. You can view the picture content, updated content and better typesetting reading experience. If the link is broken, please click the button below to view the snapshot at that time.
#387 — April 17, 2019
:rocket:New!In this issue we're beginning a 'tip of the week' feature — find it near the end of this issue. If you have any ideas for tips (or links), just hit reply and let us know :-)
:rocket: Frontend Focus
The Front-End Developer Handbook — 2019 Edition — This popular, detailed guide returns for another year. Updated with plenty of useful resources, learning materials and dev tools. A worthwhile reference.
Cody Lindley
Edge Goes Chromium: What Does it Mean for Front-End Devs? — Last week the first preview build of Microsoft’s Chromium-powered Edge browser was made available. Here’s a fresh look at some of the pro’s and con’s of this change in the browser landscape.
Ollie Willams
Become More Productive with the Right Editor — With smart code completion, powerful refactorings, and great support for popular frameworks, all working out of the box, WebStorm makes development easier and more enjoyable. Try the new WebStorm 2019.1.
WebStorm sponsor
Art Direction for the Web with CSS Shapes — How you can go beyond the basics of CSS Shapes and use them to create different types of distinctive and engaging layouts for art-directed designs.
Andy Clarke
▶ Jen Simmons on CSS Standardization — Google’s Rick Viscomi speaks to Jen Simmons (CSS Working Group, Mozilla) on the process of CSS standardization and the evolution of how devs style the web.
Google Chrome Developers
Revisiting the Rendering Tier: Introducing The Guardian's New Rendering Layer — British news site The Guardian currently uses over 62,000 lines of Sass, and following an appetite for new features and display experiments the time had come to find a suitable alternative. They are now moving their rendering tier to a CSS-in-JS solution based around React and Emotion.
Alex Sanders (The Guardian)
:computer: Jobs
Frontend Developer at X-Team (Remote) — Join the most energizing community for developers. Work from anywhere with the world's leading brands.
X-Team
Find A Frontend Job Through Vettery — Vettery specializes in tech roles and is completely free for job seekers. Create a profile to get started.
Vettery
:blue_book: Tutorials & Opinion
58 Bytes of CSS to Look Great Nearly Everywhere — A very much bare bones approach to clean presentation.
Joshua RL
Form Validation in Under an Hour with Vuelidate — Sarah Drasner runs through some of the trickier sides of form validation, making use of the Vue.js model-based validation libraryVuelidate.
Sarah Drasner
Native Lazy Loading and JS-based Fallback with vanilla-lazyload 12 — Although native lazy loading is on the way (with Chrome Canary already offering support), this tool provides a JavaScript-based alternative for those browsers lacking support for the feature.Here’s the repo.
Andrea Verlicchi
The Web Developer's Guide to DNS — A little DNS know-how “shines some light on a fundamental, enduring part of the Internet’s plumbing” .
RJ Zaworski
Studio 3T Makes SQL Migration to MongoDB, Powerfully Simple — Now you can import an entire SQL database to MongoDB using Studio 3T and its new SQL Migration feature.
Studio 3T sponsor
Animating SVG with CSS — How to bring static SVGs to life with just a few lines of CSS.
Hope Armstrong
Best Practices for Optimising Video Streams On The Web — Tips on how to optimise video streams and deliver an improved video experience to visitors without delays and buffering.
Doug Sillars
A 2019 Real World Comparison of Front-End Frameworks — ..with benchmarks.
Jacek Schae
How to Create Better Themes with CSS Variables
Michelle Barker
:bulb: Tip of the Week
supported by 
A quick performance improvement by giving the browser a headstart with preload
An easy way to ensure that critical content gets rendered fast is to use the preload value on a <link> element. It specifies to the browser that the linked resource will be needed early on in the load .
Here's a straightforward example on how you can use it:
<link href="style.css" rel="preload" as="style">
Placing a preload link in your HTTP header tells the browser to grab this file early, and can be useful for loading important files, such as any critical CSS. Prefetching is similar but is lower priority and designed for resources you might need in future .
This resource hint can be used on a variety of content, including audio, embeds, scripts, videos & more. Browser support is good, but isn't universal . Of course, non-supporting browsers will just ignore the directive and do things the usual way, so it's a win-win.
Looking for a deeper dive on how you can use this to up your performance game? The below links are a great place to start:.
- Preload: What Is It Good For?
- Preload, Prefetch And Priorities in Chrome
- Using Preload and Prefetch in Your HTML to Load Assets
This week's tip is sponsored byCodeFund. Earning funds for your open source projects or tech blogs is now as easy as adding two lines of code to your site. Last month, they paid over $12,000 to devs worldwide. Find out if you qualify .
:wrench: Code and Tools
medium-zoom: A Library for Medium-Style Image Zooming — Responsive, can load a higher definition version of an image on zoom, and mouse, keyboard and gesture friendly.Demo.
François Chalifour
Ken-Burns-Carousel: A Web Component That Displays A Set of Images with a 'Ken Burns' Effect — The ‘Ken Burns’ effect is when photos gradually zoom in and transition.
Festify
Alexandru Cambose
Get the Fastest Website Deployments
Buddy sponsor
ColorKitty Color Picker — An easy way to extract color palettes from uploaded pictures.
Hopsken
Upcoming Events
IMAGECON, May 1–2 – San Francisco, CA — A two-day conference with a dozen workshops and seven speakers focused on all things images on the web.
CityJS Conference, May 3 — London, UK — Meet local and international speakers and share your experiences with modern JavaScript development.
Frontend United, May 16-18 — Utrecht, Netherlands — A yearly, non-profit, developer-first, community-focused conference.
CSSCamp 2019, July 17 — Barcelona, Catalunya — A one-day, one-track conference for web designers and developers.
Recommend
-
105
A guide for front-end developers to equip themselves with latest learning resources and development tools in front-end engineering.
-
47
Front-End Performance Checklist 2019 — This popula...
-
49
After developing some little Emacs packages for a year or so, I began to notice how I'd forget little things that I learned, and then I'd have to...
-
92
Written by Cody Lindley Sponsored byFrontend Masters, advancing your skills with in-depth, modern front-end engineering courses Overview: This is a...
-
6
Update to the Developer Evangelism/Advocacy handbook almost complete Tuesday, December 15th, 2020 at 2:46 pm
-
12
The new and improved Developer Advocacy Handbook is out – Read Chapters 1 & 2 now Thursday, December 17th, 2020 at 7:27 pm Eleven years ago I wrote the
-
15
The (new) Developer Advocacy Handbook is live! Monday, May 31st, 2021 at 3:47 pm I just finished the writing part of the new edition of the Developer Advocacy Handbook. I wrote t...
-
6
New Developer Advocacy Handbook chapter – How to create short and concise technical videos Tuesday, September 13th, 2022 at 5:56 pm This weekend I released a n...
-
15
The Developer Advocacy Handbook is now available as an eBook on Leanpub and Amazon Kindle Thursday, October 27th, 2022 at 2:45 pm People often asked me if I ca...
-
6
The Front End Developer/Engineer Handbook 2024 Written by Cody Lindley for
About Joyk
Aggregate valuable and interesting links.
Joyk means Joy of geeK