So, You Want to be a Front-End Engineer

[@jakemetz1742]

8 years later and still great content. Thanks man.

[@teodz]

I still watch this over and over again as part of my monthly 'refresh'. Thanks Dave!

[@ManojkumarMuralidharan]

Nice vid and you just read my mind with the title 'So you want to be a Front end Engineer'. Looking fwd to more such videos.

[@RyanJohnson]

That "Dev"olution bit was how it went for me. Well put!

[@tomastrajan3377]

Very good video, i learned a lot! Just one thing,@55:20 you said that span with position absolute will be positioned absolutely to it's nearest parent (div) but i think that in that case it is absolutely positioned to , also in general the nearest parent is first parent element with position relative or absolute

[@mrtwreckz]

great talk! went through a similar devolution...currently transitioning from dev to eng

[@SamuraiGuevara]

this is pure front end engineering gold! thanks dude

[@DavidMosher]

Thanks for your feedback; understanding best practices was something I really appreciated when starting out as a new web developer. Cheers :)

[@the_three_Jay]

Wow!! Nice work on putting this. Thanks

[@kshitizkc2404]

Hmm...interesting. Glad to see lot of the stuff like BNF, EBNF, parsing I learnt during senior year Language Translators being explained in context to front end technology.

[@DavidMosher]

My pleasure! Glad you are enjoying it :)

[@DavidMosher]

Thanks for watching, glad it was helpful! :)

[@weblancaster]

Thanks so much for your work to the Front End Community.

[@kiranrao9260]

I don't recollect when was the last time I watched a tech video packed with so much useful information! This video changes how I approach HTML and CSS in the future. Thanks for this talk.

[@DavidMosher]

You're welcome! Definitely take the time to check out the links in the sources, there are some awesome articles to read in there too :)

[@PascalDickhoff]

38:20 thank you for clearly stating that it is not possible to stack override each specificity class! :) All the video: Thank youuuu!! I literally spent 2 days reading about rendering and stuff. And you just explained it in about 40 mins! Thx

[@DavidMosher]

Awesome to hear this helped you Pascal :)

[@slavkokovljenic6621]

A wonderful content man.Really appreciate it. Your explanations are top-notch. All the best

[@DavidMosher]

Thanks for your reply Slavko! I'm glad you found this helpful =]

[@sushantwaghmare8994]

Thanks,already read paul irish's article on 'how browsers work' but your video made it a lot simpler to understand.

[@DavidMosher]

My pleasure, Sushant; I'm glad it was helpful :)

[@DerekRies]

Extremely well structured talk with lots of good content in it! I can say I've gone through a near exact "Dev"olution as you so feel free to add another anecdotal data point. Started building my own browser as a learning process not too long ago and I've learned an incredible amount just by digging through the chromium and mozilla source code.

[@zuesbenz]

Thank you for doing this. Look forward for more.

[@hsinRamen]

This was very thoughtfully put together. I greatly appreciate the presentation. Thank you.

[@markappleby9788]

Thanks for this! I'll definitely have to set aside some time to read through "How Browsers Work" now.

[@DavidMosher]

Nice! It's always cool to hear how peoples paths differ as they approach the different disciplines ;)

[@SkylerKnight]

Excellent vid, I always wanted to understand best practices and i'm really glad you shared this presentation. Keep up the great work.

[@pixelomo5180]

Thanks, great video, you definitely raised my understanding of how browsers work. It's made me realise how I can optimise my sites to load faster by making the CSS lighter.

[@DavidMosher]

Glad the video helped you out, Alan :)

[@DavidMosher]

You're right, I also forgot to explain that position:fixed elements consider their parent the viewport and so their coordinate offsets are computed from there. :)

[@DavidMosher]

Thanks Samurai, I'm glad you enjoyed it :)

[@ShwetabhKumar]

Thanks David for the awesome walk through.

[@DavidMosher]

You're welcome! I'm glad it was helpful :)

[@DavidMosher]

Hi Kevin, I'm glad the video was helpful! Your question on script loading is a complex one, but I'll do my best to answer. There are a few ways you can add a script to a page but not all of them work after the page has loaded; the most desirable is to create a script on demand `document.createElement('script');` and then append it to the head with `head.appendChild(script);`, this has the advantage of not blocking page rendering and works after the page is loaded.

[@lexjojo99]

Great Talk! Thank you so much for putting this up

[@catwhisperer911]

Thank you for an awesome presentation.

[@ZacharyLysobey]

Hey Dave, fantastic video. You messed up the link at the end though. Took me a while to figure it out, but the correct link is bitly.com/bundles/dmosher/1.

[@nicofonce]

I'm coding for more than 7 years now & nevertheless this was VERY useful. Thx a lot.

[@DavidMosher]

Glad you enjoyed the presentation! :D

[@hungchau127]

Awesome video! Thanks for the enlightenment!

[@peterkasarov5973]

Respect @ the presentation... Also awesome usage of TF2 resources ;)

[@felipycamargo_]

Devia ter uma atualização desse nível.

[@DavidMosher]

boa sugestão! muita coisa mudou em 8 anos :)

[@DanielSean]

awesome video, much appreciated!

[@DavidMosher]

Thanks for the feedback :)

[@DavidMosher]

Glad it was helpful for you :)

[@DavidMosher]

Yeah, the font kind of obfuscated the link at the end. I'll post it in the video description :)

[@DavidMosher]

It's worth fighting through all the gory technical details :)

[@kerryruddock5879]

Enjoying your video, but just to clarify a term that I had to look up: BNF @ 16.05 mark. Are you referring to Backus-Naur-Form? as defined by this Wikipedia link: en.wikipedia.org/wiki/Backus%E2%80%93Naur_form#Example

[@DavidMosher]

Yep, that's the right reference Kerry!

[@KevinMcGee_CSSian]

Thanks for a great video, DM. I'm puzzled though, and wonder what you think. We've all heard 'put scrips at page bottom' and now, thanks to you, we know why. But Require.js seems to append them to the HEAD element. And if you examine untold pages on the interwebs, that is exactly what you see: tons of script tags in the HEAD. I don't get it. Any thoughts?

[@yankumar5280]

thanks for sharing David Mosher

[@ZacharyLysobey]

Minor nitpick. I think you made an error when describing `position:absolute`. Absolutely positioned elements are positioned relative to their nearest "positioned" (relative, fixed, absolute) ancestor, not their nearest parent.

[@engineering-ux]

Still useful in March 2021.

[@roblevintennis]

Such a nice prez .. thanks!

[@bennyhill3705]

good job

[@alexstulov7219]

Thank you for video, it took months to put all this stuff together in my mind :)

[@DavidMosher]

Glad it helped Alex :)

[@DavidMosher]

The fonts are open source and freely available as part of the Team Fortress 2 game package, you can find them for download on the Team Fortress 2 wiki, it's the first result when you use google to search for "tf2 fonts". Hope this helps, cheers :)

[@christophereko]

Hi great video! very informative. does all this still apply in 2016? I learned Java in the future but I think my future lays in Web development. I'm thinking about becoming a front end developer but of course I'm sure I'd like to know a bit about back end development as well. Can any one tell me the things I need to learn in an order and how much of it I should learn. Thanks.

[@胡俊卿]

Thanks for the video, really helped me.

[@DavidMosher]

You're welcome! :)

[@saravanacu]

Nice content... Learned of information... Thanks :)

[@ezekielchentnik]

thanks for the vid!

[@DavidMosher]

You're welcome, definitely read the article on html5rocks, it's worth it :)

[@DavidMosher]

Thank you Peter :)

[@SamuraiGuevara]

what font are you using for your slides? its quite fun.

[@diegoddox]

Thanks great video. God bless you

[@DavidMosher]

You're welcome :)

[@itsesagay6683]

i wonder why 7 people disliked this video....

[@Colstonewall]

Itse sagay Yeah, me too. Some people just have to be assh*les, I guess.

[@1ard]

+Chris Kavanagh i bet they thought this was a tf2 video XD

[@DavidMosher]

Thanks! :D

[@illourr]

Same here! :)

[@NormanZhou]

Nice TF2 theme

[@DavidMosher]

You're welcome! :)