Become a TypeScript Wizard with Matt's upcoming TypeScript Course:

https://www.mattpocock.com/

Follow Matt on Twitter

https://twitter.com/mattpocockuk

Dynamic function arguments with GENERICS - Advanced TypeScript

Turn MODULES INTO TYPES with typeof import - Advanced TypeScript

CSS Grid is now live in all major browsers, and with it everything we know about web layouts changes! The CSS Grid Layout Module introduces a native CSS grid system, provided at the viewport level, that achieves what CSS frameworks and popular grid systems could only dream about: Responsive, flexible, pure CSS grid layouts, independent of document source order, that allow us to treat the browser as a true design and layout surface.

EVENT: WordCamp Europe, Paris, France, June 2017

SPEAKER: Morten Rand-Hendriksen, https://www.linkedin.com/in/mortenrandhendriksen/

SLIDES: https://www.slideshare.net/mor10/css-grid-changes-everything-about-web-layouts-wordcamp-europe-2017

PERMISSION: The original content of this video is under the Creative Commons Attribution license (reuse allowed).

ORIGINAL SOURCE: https://www.youtube.com/watch?v=txZq7Laz7_4&t=14s

Additional material for CSS learners:
https://amzn.to/2Tk6kBZ  CSS: The Definitive Guide: Visual Presentation for the Web https://amzn.to/2FgQcMI  A Smarter Way to Learn HTML & CSS: Learn it faster. Remember it longer
https://amzn.to/2Ffp1ll      CSS in Depth
https://amzn.to/2FlKV6N   CSS Secrets: Better Solutions to Everyday Web Design Problems

CSS Grid Changes EVERYTHING - Amazing Presentation

Wonder what technologies and trends will dominate the web development in 2020 and 2025?

EVENT:
ReactiveConf 2019

SPEAKER:
Richard Feldman

PUBLICATION PERMISSIONS:
Conference Organizers provided Coding Tech with the permission to republish the ReactiveConf videos.


****
INTERESTED IN THE STOCK MARKET?
I developed a profitable trading model that generates high probability BUY & SELL signals on S&P500. To learn about it, visit https://yuriymatso.com/sp500-model/

Predicting the Future of the Web Development (2020 and 2025)

UI libraries are important! I think about them a lot and I hope this video helps you think about them too. Very very very overdue one.

TailwindCSS, MaterialUI, Chakra, Bootstrap, Radix, React-Aria, Master.co, and more 😅

ALL MY CONTENT IS FILMED LIVE ON TWITCH AT https://twitch.tv/theo
ALL MY BEST MEMES ARE ON TWITTER FIRST https://twitter.com/t3dotgg
ALL THE COOLEST PEOPLE ARE IN MY DISCORD https://t3.gg/discord
ALL MY VIDEOS ARE POSTED EARLY ON PATREON https://www.patreon.com/t3dotgg

Everything else (instagram, tiktok, blog): https://t3.gg/links

THANK YOU ADAM FOR THE EDIT!

The Best Of CSS - Tailwind vs MUI vs Bootstrap vs Chakra vs...

Which Pokemon is roundest??? Today we will find out!

Theo builds a full stack web app using the T3 Stack as detailed on https://init.tips

If you're interested in Next.js, React, TypeScript, Prisma, tRPC, PlanetScale + MySQL, and Tailwind, all deployed on Vercel, you're in the right place :)

The services we used are...
Planetscale - https://planetscale.com/?ref=theo
Vercel - https://vercel.com/?ref=theo

Check out the final product at https://roundest.t3.gg

Github repo: https://github.com/TheoBr/roundest-mon

Follow me on twitter for more web dev BS: https://twitter.com/t3dotgg

Rough timestamps:
0:00 - Intro & planning in Excalidraw
4:15 - Initializing with init.tips
5:00 - Tailwind setup
17:15 - API setup with tRPC
27:45 - Random pokemon endpoint
39:00 - SSR is hard
1:04:00 - PlanetScale and Prisma setup
1:26:00 - Image optimization and caching with `@next/image`
1:38:50 - Cache pokemon from PokeAPI in our db
1:43:00 - Relations are hard (Prisma fails)
1:58:00 - Backfilling all pokemon into db
2:11:00 - Results page
2:35:40 - Typescript saves us

Building a MODERN Full Stack App for FREE w/ NextJS 12, Typescript, Prisma and more - T3 Stack

Hope you React fans are excited for this one!

We were so lucky to have Dan Abramov on for a stop during his mock interview loop :) If you don't already follow him, fix that! He's been streaming on Youtube more so be sure to sub there!!
Dan's Twitter - https://twitter.com/dan_abramov
Dan's Youtube - https://www.youtube.com/c/danabramov8

If you like this and are interested in more web dev, React, javascript, typescript, next.js, full stack or other engineering topics, subscribe and follow me on Twitter and Twitch 🙏
https://twitter.com/t3dotgg
https://www.twitch.tv/theo
--

Interview Guide (Sent to Dan ahead of interview) - https://www.notion.so/t3-tools/Technical-Interview-Dan-Abramov-9aa6d8e9292e4bd1ae67b44aeeaabf88

Show proudly powered by Round (I built this) - https://round.t3.gg
--

Show notes
00:00 - Intro
00:49 - Interview Begins
02:57 - Theo Rants About Interview Philosophy
05:20 - First Question (non-technical)
17:50 - Code Problem Intro + Clarification
21:50 - Part 1: Coding Chat UI + State
29:40 - Part 2: Colorblind Mode (Deeper State Management)
34:30 - Part 3: Auto-scroll
41:55 - Part 4: Send Message (Backend Borked 😅)
57:00 - Part 5: Emoji auto-replacement (CodeSandbox Borked 😅)
1:13:35 - Wrapup


#react #javascript #fullstack #webdev #interviews

Dan Abramov SLAYS Frontend Interview w/ Ex-Twitch Engineer

In this crash course I will cram as much about HTML that I can. This is meant for absolute beginners. If you are interested in learning HTML but know nothing, then you are in the right place. We will be creating a cheat sheet with all of the common HTML5 tags, attributes, semantic markup, etc. We will not be focusing on CSS in this video. The CSS crash course will be released shortly after

21 Hour HTML & CSS Course:
https://www.udemy.com/course/modern-html-css-from-the-beginning/?referralCode=EB0470C43F3C3E9AA306

CODE: Code for this video
http://www.traversymedia.com/downloads/htmlcheatsheet.zip

NEXT: CSS CRASH COURSE FOR BEGINNERS
https://www.youtube.com/watch?v=yfoY53QXEnI&lc=z121x5ozxpiiwddee23tffergoyxxngi504

CHECK OUT MY FULL STACK COURSE:
http://www.traversymedia.com/course/the-full-stack-web-development/

BECOME A PATRON: Support me directly for even $1 per month
http://www.patreon.com/traversymedia
ONE TIME DONATIONS:
http://www.paypal.me/traversymedia

FOLLOW TRAVERSY MEDIA:
http://www.facebook.com/traversymedia
http://www.twitter.com/traversymedia
http://www.instagram.com/traversymedia