Front-End Developer Handbook, SVG and JS performance: #1.22 the latest News (the Good Parts)

Front-End Developer Handbook, SVG and JS performance: #1.22 the latest News (the Good Parts)


You’ve definitely heard about web page bloating
at least once. So do I. [music playing] Hi! Let’s talk today about Front-End Developer
Handbook, SVG in action and JS performance. I’m Anatol and you are watching the Good Parts
of the Frontend development. [music playing] Let’s start with the “Front-End Developer
Handbook”. This comprehensive document consists of three
parts: The Front-End Practice, Learning Front-End Development and Front-End Development Tools. There I found not only the basics, but also
some fundamentals like Security, Data API etc. Please pay your attention to the article “JavaScript
Start-up Performance” by Addy Osmani on Medium. In this post you can find the answers to the
following questions: what’s involved in the process of getting your code running in
the first place. What slows it down, how can you measure it,
and what can you do to lower parse times? You may have noticed, I’m usually falling
in love with funny tutorials. Because according to a well established fact
of science, the information, provoking the emotions, helps better memorizing. That’s why let me grab your attention to
the article namely “A TOAST TO ES2015 DESTRUCTURING”. Phil Nash explains this new JavaScript feature
using a couple of examples. One more informative article about ES2015
is “The Promise of a Burger Party” by Mariko Kosaka. She uses physical metaphor in order to explain
Promises, Fetch and all that stuff. Now these concepts are interconnected in my
brain. “5 Brilliant Ways to Lazy Load Images For
Faster Page Loads” on Dynamic Drive blog is another in-depth article on the subject. Authors define five “how-to” techniques,
for example: how to move from the plain data attributes’ usage to a comprehensive plugin
tracking scrollbar’ events. I believe we should use Lazy Load Images for
each web-site in production. [music playing] Rob Dodson has released another episode of
A11y cast. In this episode he shows how elements actually
get their accessible names, and some techniques you can use to provide proper labeling. I consider Graaf Grid tool interesting. This is pure CSS grid overlays for designing
your project. You can use a predefined grid overlay from
the collection or create your custom grid overlays using the new Graaf API. If you’re interested in SVG, you might like
a collection of repeatable SVG background patterns for you to use on your digital projects. In case you’re still using Icon Fonts (even
GitHub stopped doing that) Elliot Dahl wrote an article “Align SVG Icons to Text and Say
Goodbye to Font Icons ” just for you. This is a scalable solution for solving the
alignment issues of SVGs. [music playing] If you find Flex boxes responsive layouts
sexy, but all these tutorials are dull for you, then you might like “How Flexbox works
— explained with big, colorful, animated gifs” by Scott Domes. His article contains a bunch of animated pictures
that probably reveal the Flex box mystery. In his turn Nick Babich posted the article
“Best Practices for Long Scrolling” on Babich dot biz. He derives the general rules and identifies
the best practice. There are a lot of examples of using animation
and user actions. [music playing] If you like this video give it “thumbs up”,
share it with your friends, subscribe to the channel and watch other episodes. [music playing] This is all for this week. Thanks for watching and stay curious.

Leave a Reply

Your email address will not be published. Required fields are marked *