- Видео 8
- Просмотров 309 646
Front End Center
Добавлен 19 фев 2016
Screencasts on front end development for web professionals
Front End Center — Caching & CDNs
Last time out we were looking at how latency puts an upper limit on the performance of your site, and just how important it is to be hosting your content near your users. This time we go a step further: talking about the techniques and tradeoffs for highly cache-optimised sites, from content-addressable storage to federating your content across a CDN so requests don't even reach your server.
With just a few judicious build-time choices and deploy-time hooks, you too can have the fastest static site the web can offer.
The first part of this series on Latency is available on RUclips as well: ruclips.net/video/ak4EZQB4Ylg/видео.html
Thanks to Lookahead Search for making this episode available! ...
With just a few judicious build-time choices and deploy-time hooks, you too can have the fastest static site the web can offer.
The first part of this series on Latency is available on RUclips as well: ruclips.net/video/ak4EZQB4Ylg/видео.html
Thanks to Lookahead Search for making this episode available! ...
Просмотров: 22 296
Видео
Front End Center - Why Latency Matters: Foundations of Web Performance
Просмотров 6 тыс.7 лет назад
Depending on where you live and the devices you use, high-latency internet access might be a totally foreign concept or an everyday reality, so in this episode we look at some concrete numbers to get a sense of just how much it can change someone's experience. We'll also look at the TCP design decisions that cause connections to "slow start" & why that makes it worth considering adding a CDN to...
Front End Center - Crafting Webfont Fallbacks
Просмотров 11 тыс.7 лет назад
Webfonts are a tricky thing to get right - the usual formula is: attractive visuals, good performance & reliable functionality (pick two). In this episode, see how you can get all three by properly employing a finely-tuned fallback. Thanks to Lookahead Search www.lookahead.com.au for making this episode available! Front End Center is a premium screencast series on all aspects of front-end web d...
Front End Center - Single Responsibility Components: Object-Oriented Design in React
Просмотров 17 тыс.7 лет назад
The Functional Programming (FP) aspects of React are fairly prominent, but components themselves are an example of Object-Oriented (OO) programming. In this episode, we'll look at how one idea from OO-The Single Responsibility Principle-can help us design and extract more readable, reusable, and maintainable React components. Thanks to Lookahead Search www.lookahead.com.au for making this episo...
Front End Center - Image CDNs to the Rescue
Просмотров 23 тыс.7 лет назад
Responsive imagery is one of those topics that seems way more complicated than it aught to be. It’s the sort of problem that confronts virtually every website out there-every site has images-and yet the approaches offered by HTML alone aren't sufficient. In this episode we'll look at how using a dedicated Image CDN can simplify your markup, enable pixel-perfection regardless of device, use the ...
Front End Center - Why Inline SVG is Best SVG
Просмотров 137 тыс.7 лет назад
SVG is one of the most powerful tools in a front-end developer's arsenal, and while its browser support is excellent, there's enough rough edges that a lot of people consistently reach for an alternative such as icon fonts, static images or CSS-only drawing techniques. In this episode we'll look at what can be achieved by writing SVG by hand, simple effects that can add a lot to an interaction ...
Front End Center - Current Color: The First CSS Variable
Просмотров 14 тыс.8 лет назад
The currentColor keyword is one of the most powerful yet under-utilised feature of CSS. Let's dive into it. We'll talk about the core CSS concepts that underpin it, what currentColor the keyword actually means, then build up a demo using a bunch of related CSS techniques. Finally, we'll look at the CSS Variables spec and what it means for the future of the web. Like this video? Sign up for more...
Front End Center - Webpack from First Principles
Просмотров 78 тыс.8 лет назад
Webpack often gets a bad rap in the front end community - plenty of digital ink has been spilled over whether web development is "too complicated", with Webpack taking center stage. But in reality, it's no more complex than the sites we're building with it, and conceptually its role is quite clear. Let's demystify the tool by stripping it back to what it truly is - an ahead-of-time compiler for...
everything that is demonstrated in this video is a gross violation of the principle YAGNY
I can't believe this tutorial is 7 years old!
Very nice ❤ If I have a svg file (a.svg) how can I easily, without any overhead, can translate to an inline svg in my React js ?
You are the best
Where you got to know about that person
Why did you stop making videos? Very good content
Underrated channel, though I'm not a front end dev, I'm a performance test engineer
But the decreased download speed is not because of increased latency, it's probably a result of significant packet loss, no?
How to prevent malicious user crafting urls with unique sizes, forcing my CDN to create a lot of images in different sizes?
This is the typical youtube channel you don't want to have stopped
why is it stopped ??
Gratitude for finding this, it's really an art to convey the purpose behind the information being conveyed. ❤ from Chennai 🇮🇳
I would pay for you to restart uploading videos. This is what I strive to create. I think you're the best
Funny enough, I find that CloudFlare doubles my service latency vs. a Vultr VPS, no matter where that VPS is (as long as it's on the same continent). With HTTP/3 there is zero round trip initialization, so it may greatly improve the usefulness of distant HTTP servers.
I found out about currentColor today, and I've used it in embedded SVGs to inherit the dark mode theme colors with color-scheme: light dark and the same stylesheet (or lack thereof) as the main content. Very slick. Needless to say this was also the day I learned you could run media queries in embedded SVGs (i.e. in img and background-image).
Why draw 2 identical lines, when all your doing is changing the css?
Wow I wish you made a tutorial on how to go from newb to pro in SVG... you're teaching style is amazing.
please don't stop making videos. Your videos are gem, those who have eyes can see it. Don't care about the views. Your videos are timeless. Please do more🙏🙏
Senior work. Thanks for teaching.
That is one of the best explanation I have seen so far. Thank you, so much, for putting it together. Here it is 2022 and so much has been changed, is there any chance you will update this? If anyone knows of any current sources that explains this, please share.
One of the most underrated channels I've ever seen
This is simply amazing, not the CDN but how you explained it.
This guy literally invented styled-components!! Such high quality content, would be great to see more of it! I notice he hasn't uploaded in a few years?
would be interesting to see more usage of inline SVG in frameworks like react. Anyone know of a good npm package that helps with using svg in react?
Great asset, instant subscriber!
How are you able to show output at the same time you write css without having to save ?
Awesome content
4:01 benefits of inline svg💚
Best video I've found so far on the subject ! thank you man !
This just blows my mind! It makes me realise how superficially I know about SVG. Great Video 👌
What a power Inline SVG has got! Thanks for sharing. 👍😃
Hi, Glen, I'm wanting to create a fansite for the web series, Chrontendo. As a part of that, I'd like to use web standards to recreate his wordmark/logo. He uses Georgia Pro Bold with some simple text shadows, which are simple enough to replicate. I've been stuck for over half a year now on the fact that he uses what Adobe Illustrator would call an 'Envelope Distort' effect on the text. I re-created the effect as a baked SVG image last year, but would love to have this be dynamic on the site so that if someone translates the page, the logo is translated along with the rest of the page with the 'fisheye lens' effect intact. If you could illustrate how to do this, I would be most grateful. Please contact me if I can pay you for a solution to this challenge.
fuck my brain
I know you haven't posted in 3 years, but from the bottom of my heart THANK YOU!
Great video
thanks...was looking for this
Amazing work man !!
Getting super confused by what you say at 11:10. When you say, "look at the width of each image and determine the URL to fetch", are you referring to the actual image from Unsplash or the div in which the image goes into?
He's referring to the width of the image after it is resized by the specific circumstances of the browser. So not the actual image: the size of the image after being (possibly) being squeezed into the div.
4 years later and i still come back to this video
At 16:14, why do you move the svg to below the input and later set an order:-1 to show the svg ahead of the input again? why not just leave it ahead the input in the first place?
This is awsome. Thank you!
please create more svg videos...
thank you for this... I love it...
this code does not work for css stylesheets calling an image from a cdn
Your sir are a master!
How is this done in WordPress?
Awesome well explained
Wow ❤️ awesome explanation!
great video.. u deserve a million subscribers for your teaching style. soon u will hit that number
Pushing Pixels until it works^TM!!
God damn I am so glad I clicked this. I have consumed many articles and videos on web development since I started learning 2 months ago, but this was the best by far. I am finally able to wrap my head around so many things which were confusing about SVG before.
just insane dude !!!!!!