DevTips
CSS Floats and Clears Explained
updated
Travis is back with co-host Max to dive into some new things, and discuss the vision for the web of the captivating CEO of Patreon; @Jackconte
Read the article on Medium: devtipsshow.medium.com/4817a1c77acf?source=friends_link&sk=7bd2fdb07edd74b19b2374cae968ae69
Download the source code on this video: github.com/DevTipsOfficial/ReactWithComponent
—
Get the Official DevTips Merchandise Today!
devtipsstore.com
Follow DevTips to stay up to date with upcoming videos and projects:
twitter.com/DevTipsShow
devtipsshow.medium.com
instagram.com/officialdevtipsshow
facebook.com/DevTipsShow
Check out the Official DevTips CodePen for random projects and creations:
codepen.io/devtips
All background music provided by Monstercat with a Gold subscription
Learn more about this project, and get a few additional questions answered:
devtipsshow.medium.com/creating-a-react-component-without-using-react-4bad18fcf064?sk=22f867a8a7332b8cab36273016c32cc6
The best resource for a new React Developer:
reactjs.org
—
Get the Official DevTips Merchandise Today!
devtipsstore.com
Follow DevTips to stay up to date with upcoming videos and projects:
twitter.com/DevTipsShow
devtipsshow.medium.com
instagram.com/officialdevtipsshow
facebook.com/DevTipsShow
Check out the Official DevTips CodePen for random projects and creations:
codepen.io/devtips
All background music provided by Monstercat with a Gold subscription
Get an in-depth explanation from Andrew on Medium:
devtipsshow.medium.com/im-back-but-also-hello-world-a8257aee7a27
--
DevTips is a weekly show for YOU who want to be inspired 👍 and learn 🖖 about programming. Hosted by Andrew - a long-time community member, bug buster, and designer 💖. Lets explore code together and learning programming along the way - yay!
Get the Official DevTips Merchandise Today!
devtipsstore.com
Follow DevTips to stay up to date with upcoming videos and projects:
twitter.com/DevTipsShow
devtipsshow.medium.com
instagram.com/officialdevtipsshow
facebook.com/DevTipsShow
Check out the Official DevTips CodePen for random projects and creations:
codepen.io/devtips
All background music provided by Monstercat with a Gold subscription
💻 My Setup:
Monitors:
samsung.com/za/monitors/flat/led-monitor-27-inch-ls27e390hs-xa
Computer:
bestbuy.com/site/apple-mac-mini-desktop-intel-core-i3-16gb-memory-256gb-solid-state-drive-space-gray/6335988.p?skuId=6335988
Mouse:
apple.com/shop/product/MLA02LL/A/magic-mouse-2-silver
Keyboard:
apple.com/shop/product/MRMH2LL/A/magic-keyboard-with-numeric-keypad-us-english-space-gray
Web Cam: amazon.com/Logitech-BRIO-Conferencing-Recording-Streaming/dp/B01N5UOYC4/ref=sr_1_3
Microphone:
bluemic.com/en-us/products/yeti
Microphone Arm:
bluemic.com/fr-fr/products/compass
❤️My VS Code Extensions:
ESLint:
marketplace.visualstudio.com/items?itemName=dbaeumer.vscode-eslint
Live Sass Compiler:
marketplace.visualstudio.com/items?itemName=ritwickdey.live-sass
Live Server:
marketplace.visualstudio.com/items?itemName=ritwickdey.LiveServer
Prettier:
marketplace.visualstudio.com/items?itemName=esbenp.prettier-vscode
Sass Syntax Highlighter:
marketplace.visualstudio.com/items?itemName=Syler.sass-indented
The editor is called Visual Studio Code and is free. Look for the Live Share extension to share your environment with friends.
💻 code.visualstudio.com
DevTips is a show for YOU who want to be inspired 👍 and learn 🖖 about programming. Hosted by David and MPJ - two notorious bug generators 💖 and teachers 🤗, and Guest Hosted by Jay from IEatWebsites during MPJ's long term hiatus from video creation. Exploring code together and learning programming along the way - yay!
Follow along with Jay on his other YouTube channel, IEatWebsites:
🌊 youtube.com/ieatwebsites
DevTips has a discord server called Keep On Hacking, check it out!
❤️discord.gg/JNZH3A2
Download Project files:
amazon.com/clouddrive/share/FSqiZspoP2l2cC3FPVQohR5QKDry3dsqojnFePL8Sct
*Remember to replace the MailChimp code by your own.
Create a MailChimp Account:
mailchimp.com
Download the background image by Jeremy Bishop:
unsplash.com/photos/G9i_plbfDgk
The editor is called Visual Studio Code and is free. Look for the Live Share extension to share your environment with friends.
💻 code.visualstudio.com
I’m using Browsersync for live reloading. Every time you save the file it will automatically reload. Go here to learn more.
browsersync.io
Skip to the tutorial: 3:00
DevTips is a show for YOU who want to be inspired 👍 and learn 🖖 about programming. Hosted by David and MPJ - two notorious bug generators 💖 and teachers 🤗, and Guest Hosted by Jay from IEatWebsites during MPJ's long term hiatus from video creation. Exploring code together and learning programming along the way - yay!
Follow along with Jay on his other YouTube channel, IEatWebsites:
🌊 youtube.com/ieatwebsites
DevTips has a discord server called Keep On Hacking, check it out!
❤️discord.gg/JNZH3A2
Get the code:
codepen.io/ieatwebsites/pen/LYZZKzg
Download all project files:
amazon.com/clouddrive/share/yeDdcuvnf1Sn4OM9XpUpEagaMJuyGRJiu8cUHzXK2Lr
Fancy Border Radius Tool:
9elements.github.io/fancy-border-radius/full-control.html
The editor is called Visual Studio Code and is free. Look for the Live Share extension to share your environment with friends.
💻 code.visualstudio.com
I’m using Browsersync for live reloading. Every time you save the file it will automatically reload. Go here to learn more.
browsersync.io
Prefer to skip to the tutorial? Go to timestamp 2:30.
DevTips is a show for YOU who want to be inspired 👍 and learn 🖖 about programming. Hosted by David and MPJ - two notorious bug generators 💖 and teachers 🤗, and Guest Hosted by Jay from IEatWebsites during MPJ's long term hiatus from video creation. Exploring code together and learning programming along the way - yay!
Follow along with Jay on his other YouTube channel, IEatWebsites:
🌊 youtube.com/ieatwebsites
DevTips has a discord server called Keep On Hacking, check it out!
❤️discord.gg/JNZH3A2
🎬 Dan Abramov showing React Hooks
youtube.com/watch?v=G-aO5hzo1aw
‼️ Follow on Twitch to get notified of next live stream
twitch.tv/devtipsshow
💛 Inline-evaluation: Quokka (sponsor)
Wonder how MPJ evaluates JavaScript inline his editor? Quokka is the answer - use this link when you buy to let them know you came from here:
http://quokka.devtipsshow.com
💛 Continuous integration: CircleCI (sponsor)
Robust and sleek Docker-based Continuous Integration as a service. Mattias used CircleCI prior to them becoming a sponsor of Fun Fun Function. Their free tier is powerful enough for small personal projects, even if they are private. Use this link when you sign up to let them know you came from us:
circleci.funfunfunction.com
💛 Integrated continuous testing tool: Wallaby (sponsor)
Wallaby runs your unit tests immediately as you type and displays various execution results. The tool is insanely fast, because it only executes tests affected by your code changes and runs your tests in parallel. Check out MPJs video on how to get started with testing. youtube.com/watch?v=Eu35xM76kKY After that, start using Wallaby. Let them know you came from us by using this link:
http://wallaby.devtipsshow.com
DevTips is a show for YOU who want to be inspired 👍 and learn 🖖 about programming. Hosted by David and MPJ - two notorious bug generators 💖 and teachers 🤗. Exploring code together and learning programming along the way - yay!
The recordings are done in a live stream with chat! Follow on Twitch to get notified:
🌊 twitch.tv/devtipsshow
DevTips has a sister channel called Fun Fun Function, check it out!
❤️ youtube.com/funfunfunction
🗿 MILESTONES
⏯ 00:10 What are progressive web apps PWA?
⏯ 16:35 FIKA TIME! ☕️
⏯ 20:35 PWA vs React Native
⏯ 24:02 building a very first minimal progressive web app on iOS
Repository with the code we use in the video
📝 github.com/chhib/dt-pwa
The editor is called Visual Studio Code and is free. Look for the Live Share extension to share your environment with friends.
💻 code.visualstudio.com
DevTips is a weekly show for YOU who want to be inspired 👍 and learn 🖖 about programming. Hosted by David and MPJ - two notorious bug generators 💖 and teachers 🤗. Exploring code together and learning programming along the way - yay!
The recordings are done in a live stream with chat! Follow on Twitch to get notified:
🌊 twitch.tv/devtipsshow
DevTips has a sister channel called Fun Fun Function, check it out!
❤️ youtube.com/funfunfunction
#pwa #manifest
http://sucuri.devtipsshow.com
We get a local Kubernetes deployment set up using Minikube. Why not docker-compose? We explain it. What is a pod? We explain it. Kubectl? Replica? Replica set? YAML??? WE EXPLAIN IT!
🏆 ACHIEVEMENTS:
⏯ 17:13 Learning YAML syntax
⏯ 31:47 Running the deployment
Step-by-step instruction to do the initial setup. WARNING: It will take a while.
⏳ https://www.notion.so/maximumsheep/Trying-Kubernetes-for-the-first-time-e53f64f67e9e4cd6b78914ef4deb3844
The files we used
🗂 gist.github.com/chhib/588bf4e5324c62f39526c8032a484d84
This was shot on a live stream on Twitch. Go there to follow us when we do future live streams:
📹 twitch.tv/devtipsshow
DevTips is a weekly show for YOU who want to be inspired 👍 and learn 🖖 about programming. Hosted by David and MPJ - two notorious bug generators 💖 and teachers 🤗. Exploring code together and learning programming along the way - yay!
DevTips has a sister channel called Fun Fun Function, check it out!
❤️ youtube.com/funfunfunction
#kubernetes #docker #yaml
The SECRET document planning out the future
🔪 https://www.notion.so/maximumsheep/Codename-Failing-Together-caf7b47d6a0a46faa7dcacc04619f6cd
DevTips is a weekly show for YOU who want to be inspired 👍 and learn 🖖 about programming. Hosted by David and MPJ - two notorious bug generators 💖 and teachers 🤗. Exploring code together and learning programming along the way - yay!
DevTips has a sister channel called Fun Fun Function, check it out!
❤️ youtube.com/funfunfunction
#livestreaming
brilliant.org/DevTips
David and Mattias walk through their favourite web developer resources from 2018. Content creators, tools, books. Maybe they are just their favourites. Maybe not even web dev related...
🗿 MILESTONES
⏯ 01:55 Syntax.fm
https://syntax.fm/
⏯ 03:43 Freakonomics
http://freakonomics.com/podcast/religiosity
⏯ 10:10 Paul Lewis
youtube.com/channel/UCRDEsZDDhVhtHLi0L8-5fow
⏯ 13:07 Noopkat
twitch.tv/noopkat
youtube.com/channel/UCoFU24KMXmCi4Sl3KIFPSVg
⏯ 14:04 The Coding Train
youtube.com/user/shiffman
⏯ 18:50 I Don't Want to Talk About It
amazon.com/Dont-Want-Talk-About-Overcoming/dp/0684835398
⏯ 22:09 Thin Matrix
youtube.com/user/ThinMatrix
⏯ 23:52 VS Code Live Share
marketplace.visualstudio.com/items?itemName=MS-vsliveshare.vsliveshare
THANKS ALL OF YOU FOR FOLLOWING! Hope you find something of use!
DevTips is a weekly show for YOU who want to be inspired 👍 and learn 🖖 about programming. Hosted by David and MPJ - two notorious bug generators 💖 and teachers 🤗. Exploring code together and learning programming along the way - yay!
DevTips has a sister channel called Fun Fun Function, check it out!
❤️ youtube.com/funfunfunction
#tips #podcasts #channels #books
brilliant.org/DevTips
How to get started with Docker for the first time. What is an image? What is a container? How does Docker work? Why should I use it?
ALL THAT STUFFS in this video on the basics of Docker where we get up and running and explain the most important parts of using Docker!
Having seen this video - you will understand what Docker is.
Docker Hub and stuff
🏗 docker.com/get-started
The editor is called Visual Studio Code and is free. Look for the Live Share extension to share your environment with friends.
💻 code.visualstudio.com
DevTips is a weekly show for YOU who want to be inspired 👍 and learn 🖖 about programming. Hosted by David and MPJ - two notorious bug generators 💖 and teachers 🤗. Exploring code together and learning programming along the way - yay!
DevTips has a sister channel called Fun Fun Function, check it out!
❤️ youtube.com/funfunfunction
#docker #containers #images
After a lot of experimentation I've come across my preferred way of loading web fonts. I have balanced ease of use, i.e. how to implement, with performance.
🗿 MILESTONES
⏯ 01:15 😵 Fixing errors: HREF instead of SRC
⏯ 03:48 Introducing font-display: swap; 🦸♀️
⏯ 08:30 Baseline without web fonts (Wikipedia style)
⏯ 09:24 Late preload with font-display: swap;
⏯ 12:00 PERFORMANCE COMPARISON & DISCUSSION 📊
⏯ 17:59 My actual recommendation ⭐️
Demo of examples
💅 https://dt-font-loading-d0mbbgpid.now.sh/
Repo with the examples
📝 github.com/chhib/dt-font-loading
The Font Loading Checklist by Zach Leatherman
☑️ zachleat.com/web/font-checklist
The Five Whys of Web Font Loading Performance (video)
▶️ zachleat.com/web/five-whys
The editor is called Visual Studio Code and is free. Look for the Live Share extension to share your environment with friends.
💻 code.visualstudio.com
DevTips is a weekly show for YOU who want to be inspired 👍 and learn 🖖 about programming. Hosted by David and MPJ - two notorious bug generators 💖 and teachers 🤗. Exploring code together and learning programming along the way - yay!
DevTips has a sister channel called Fun Fun Function, check it out!
❤️ youtube.com/funfunfunction
#webfonts #performance #css
Experimenting with different ways of loading fonts to get the best performance without Flash of Unstyled Text (FOUT) or Flash of Invisible Text (FOIT) on poor mobile connections
🗿 MILESTONES
⏯ 09:26 web font loader sync
⏯ 11:47 web font loader async
⏯ 15:00 self-hosted fonts
⏯ 18:36 self-hosted fonts with preload
⏯ 24:00 own font loader
⏯ 28:30 own font loader with preload
⏯ 31:00 FONT LOAD TIME EVALUATION!!!
⏯ 36:29 WHAT DID WE LURN!?
Demo of examples
💅 https://dt-font-loading-phmrd1aiq.now.sh/
Repo with the examples
📝 github.com/chhib/dt-font-loading
The Font Loading Checklist by Zach Leatherman
☑️ zachleat.com/web/font-checklist
The Five Whys of Web Font Loading Performance (video)
▶️ zachleat.com/web/five-whys
The helper to get the Google Web Fonts as WOFF2 files
ฒ google-webfonts-helper.herokuapp.com/fonts
The editor is called Visual Studio Code and is free. Look for the Live Share extension to share your environment with friends.
💻 code.visualstudio.com
DevTips is a weekly show for YOU who want to be inspired 👍 and learn 🖖 about programming. Hosted by David and MPJ - two notorious bug generators 💖 and teachers 🤗. Exploring code together and learning programming along the way - yay!
DevTips has a sister channel called Fun Fun Function, check it out!
❤️ youtube.com/funfunfunction
#webfonts #performance #css
Query parameters are a bit tricky (pain) to deal with. Especially if you want to modify just one, say remove one parameter but not the others. David goes through how to do that using the Hacky Way™️, Regex, or plain JavaScript + 1 extra tool-based way depending on the circumstance.
🗿 MILESTONES
⏯ 01:06 What are query parameters⁉️
⏯ 03:34 Hacky strategy
⏯ 05:35 Using Regex
⏯ 11:03 Using JavaScript "Perfect Way"
Code from the video
📝 gist.github.com/chhib/4ba7238d595828fd6b7dca73da8c72ac
The VS Code plugin used to to preview values is Quokka.js
🔌 http://quokka.devtipsshow.com
The editor is called Visual Studio Code and is free. Look for the Live Share extension to share your environment with friends.
💻 code.visualstudio.com
DevTips is a weekly show for YOU who want to be inspired 👍 and learn 🖖 about programming. Hosted by David and MPJ - two notorious bug generators 💖 and teachers 🤗. Exploring code together and learning programming along the way - yay!
DevTips has a sister channel called Fun Fun Function, check it out!
❤️ youtube.com/funfunfunction
#javascript #queryparameters #regex
Oookay. Improving web performance by first including only the CRITICAL CSS, then lazily loading the actual full CSS on page load.
Experimenting with Lighthouse to see how much better the first meaningful paint got. Had... some... troubles (le fail) with this.
HIGH QUALITY SOFTWARE ENGINGEERING in this video. Watch.
🗿 MILESTONES
⏯ 00:01 Just watch this entire video.
⏯ XX:XX Forgot to include fika break. 🍪
Critical CSS generator called Penthouse by Jonas Ohlsson Aden
💥 github.com/pocketjoso/penthouse
Guide to saving a page with all its assets using Puppeteer (only mentioned in passing in the video)
📝 https://fettblog.eu/scraping-with-puppeteer/
The editor is called Visual Studio Code and is free. Look for the Live Share extension to share your environment with friends.
💻 code.visualstudio.com
DevTips is a weekly show for YOU who want to be inspired 👍 and learn 🖖 about programming. Hosted by David and MPJ - two notorious bug generators 💖 and teachers 🤗. Exploring code together and learning programming along the way - yay!
DevTips has a sister channel called Fun Fun Function, check it out!
❤️ youtube.com/funfunfunction
#criticalcss #webperformance #lighthouse
David teaches MPJ about lazy loading images for better mobile performance and the CSS aspect-ratio box padding trick. MPJ is NOT convinced.
Can you solve it in a different way - write that in the comments plz!
Aspect-ratio boxes on CSS Tricks has covered this hack in great extent.
😎 css-tricks.com/aspect-ratio-boxes
To properly access the DOM in React, we should have used refs (thanks to @23luski and @Rela takera in the comments)
☝️ reactjs.org/docs/refs-and-the-dom.html#creating-refs
The editor is called Visual Studio Code and is free. Look for the Live Share extension to share your environment with friends.
💻 code.visualstudio.com
DevTips is a weekly show for YOU who want to be inspired 👍 and learn 🖖 about programming. Hosted by David and MPJ - two notorious bug generators 💖 and teachers 🤗. Exploring code together and learning programming along the way - yay!
DevTips has a sister channel called Fun Fun Function, check it out!
❤️ youtube.com/funfunfunction
#css #hack #reactjs
David and MPJ talks about bind and this in JavaScript, figuring out what the heck is actually going on.
Code and notes from the episode
https://www.notion.so/maximumsheep/What-is-this-2dc4b2f02da940debd7848d2a13fdb0f
Watch followup video on Fun Fun Function about class property arrow functions:
youtube.com/watch?v=uCuTQYf80FU
That cool inline evaluation thing is called Quokka:
http://quokka.devtipsshow.com
DevTips is a weekly show for YOU who want to be inspired 👍 and learn 🖖 about programming. Hosted by David and MPJ - two notorious bug generators 💖 and teachers 🤗. Exploring code together and learning programming along the way - yay!
#javascript #this #bind
brilliant.org/DevTips
We have a discussion on how to address legacy code. And somehow start talking about Google Tag Manager and tracking of apps as well...
Thanks RodiW91 for the question!
😻 youtube.com/channel/UCyIe-61Y8C4_o-zZCtO4ETQ/community?lb=UgzVn2OC38aN9-HIrdl4AaABCQ.8mVguvfk5K88mWjymDnx2b
DevTips is a weekly show for YOU who want to be inspired 👍 and learn 🖖 about programming. Hosted by David and MPJ - two notorious bug generators 💖 and teachers 🤗. Exploring code together and learning programming along the way - yay!
We address some of the bestest features coming to the next version of JavaScript (i.e. ES2018).
The part about for await ... of is slightly technical. Is this too high a level? Is it just right? Should we talk about less technical things? 🕵️♀️ WRITE IN THE COMMENTS what you think - we want to find the right balance of content!
🗿 MILESTONES
⏯ 01:18 Object Rest Properties
⏯ 07:59 Regex Named Capture groups
⏯ 14:02 for await ... of (Looping of asynchronous iterators)
⏯ 00:12 Finally... 🍪
Great article by Bramus on upcoming ES2018 features
😎 medium.com/front-end-hacking/javascript-whats-new-in-ecmascript-2018-es2018-17ede97f36d5
MPJ has a killer video on iterators on Fun Fun Function
🔪 youtube.com/watch?v=W4brAobC2Hc
That cool inline evaluation thing is called Quokka
😎 http://quokka.devtipsshow.com
The editor is called Visual Studio Code and is free. Look for the Live Share extension to share your environment with friends.
💻 code.visualstudio.com
DevTips is a weekly show for YOU who want to be inspired 👍 and learn 🖖 about programming. Hosted by David and MPJ - two notorious bug generators 💖 and teachers 🤗. Exploring code together and learning programming along the way - yay!
DevTips has a sister channel called Fun Fun Function, check it out!
❤️ youtube.com/funfunfunction
#es2018 #regex #iterators
brilliant.org/DevTips
We figure out how to deal with the paginated search results in our web scrape. RECURSION is our tool - not as difficult as you might think!!
🗿 MILESTONES
⏯ 00:12 Fika 🍪
⏯ 13:10 Extracting the next page number with regex
⏯ 16:50 Encounter with prettier... 🌋
⏯ 18:39 ➰ Recap
⏯ 20:15 TIME FOR RECURSION 😎
⏯ 29:00 Quick Google rant 🌋
⏯ 29:23 ➰➰ Rerecap by Commenting the Code
See the previous episode where we explain Puppeteer and finding the data to scrape
▶️ youtube.com/watch?v=pixfH6yyqZk
The code used in this video is on GitHub
🗒 github.com/chhib/scraper/tree/5d00bb08c6ec4ea8cbaec7ea78fb90a10a864f8b
Puppeteer - Headless Chrome browser for scraping (instead of Phantom JS)
🔪 github.com/GoogleChrome/puppeteer
The editor is called Visual Studio Code and is free. Look for the Live Share extension to share your environment with friends.
💻 code.visualstudio.com
DevTips is a weekly show for YOU who want to be inspired 👍 and learn 🖖 about programming. Hosted by David and MPJ - two notorious bug generators 💖 and teachers 🤗. Exploring code together and learning programming along the way - yay!
DevTips has a sister channel called Fun Fun Function, check it out!
❤️ youtube.com/funfunfunction
#recursion #webscraping #nodejs
Let's over-engineer our CSS animation with a physically accurate gravity simulation to get that nice acceleration and bounce. We build a simulation, and let the simulation generate the CSS animation keyframes, which we bind to the dropping SVG.
See the last episode where we very much failed in doing this. At least it was entertaining.
▶️ youtube.com/watch?v=smBP4muoLYA
🗿 MILESTONES
⏯ 1:29 Recap - last time we tried to animate without transforms 😮
⏯ 2:32 Let's over-engineer this with a physics simulation 👹
⏯ 10:17 Taking the physics 📈 into CSS
⏯ 15:00 Converting a Y translation simulation into a Scale transformation
⏯ 18:20 Getting into when moving the SVG's ⊹ positioning
Try out the Observable notebook yourself
🗒 beta.observablehq.com/@chhib/simulating-bouncing-ball-to-generate-realistic-physics-cs
Burak Kanber's physics modeling post with gravity and drag
📉 burakkanber.com/blog/modeling-physics-javascript-gravity-and-drag
Henrik Joreteg's create-keyframe-animation module to generate the CSS keyframes
📽 npmjs.com/package/create-keyframe-animation
How to transform something within an SVG using matrices
⊹ stackoverflow.com/questions/20601904/svg-change-x-y-0-0-top-left-to-the-center-of-my-image
DevTips is a weekly show for YOU who want to be inspired 👍 and learn 🖖 about programming. Hosted by David and MPJ - two notorious bug generators 💖 and teachers 🤗. Exploring code together and learning programming along the way - yay!
DevTips has a sister channel called Fun Fun Function, check it out!
❤️ youtube.com/funfunfunction
#css #animation #physics
brilliant.org/DevTips
We get down and dirty scraping the web to get data that we can populate our online business data base with.
As always. Learning things along the way. And essentially a lot of 🌋 ranting and 🍪 fika in between.
🗿 MILESTONES
⏯ 8:14 fika #1 🍪
⏯ 18:17 fika #2 🍪
⏯ 26:16 🌋 rant #1 on Google
⏯ 27:36 first successful scrape!
⏯ 28:01 🌋 rant #2 on Prettier
⏯ 30:38 fika #3 🍪
⏯ 34:43 second successful scrape!!
⏯ 36:04 🌋 rant #3 on VS Code IntelliSense hints
⏯ near the end 🤷♀️ what did we lurn?!
Puppeteer - Headless Chrome browser for scraping (instead of Phantom JS)
🔪 github.com/GoogleChrome/puppeteer
The editor is called Visual Studio Code and is free. Look for the Live Share extension to share your environment with friends.
💻 code.visualstudio.com
DevTips is a weekly show for YOU who want to be inspired 👍 and learn 🖖 about programming. Hosted by David and MPJ - two notorious bug generators 💖 and teachers 🤗. Exploring code together and learning programming along the way - yay!
DevTips has a sister channel called Fun Fun Function, check it out!
❤️ youtube.com/funfunfunction
#webscraping #onlinebusiness #nodejs
HIGHLIGHTS! 🎪
⏯ 9:52 FIKA break
⏯ 16:39 Precisely
⏯ 20:28 What did we lurn?
‼️ ATTENTION ‼️
Have you been remote working with Mattias?? Please write your experiences in the comments!
Awesome developer interview from Nordic.js with *Isa Silveira*
► youtube.com/watch?v=F_QdJ-spWgg
"The" Matylda - our awesome designer
🔗 http://www.matylda.com
DevTips is a weekly show for YOU who want to be inspired 👍 and learn 🖖 about programming. Hosted by David and MPJ - two notorious bug generators 💖 and teachers 🤗. Exploring code together and learning programming along the way - yay!
DevTips has a sister channel called Fun Fun Function, check it out!
❤️ youtube.com/funfunfunction
#designer #marketplace #fika
brilliant.org/DevTips
We are using CSS Animations to... Well, animate things. HOW HARD CAN IT BE? 🤷♀️
SO MANY ERRORS. ❌ ❌ ❌ Can you spot them all?
The editor is called Visual Studio Code and is free. Look for the Live Share extension to share your environment with friends.
💻 code.visualstudio.com
DevTips is a weekly show for YOU who want to be inspired 👍 and learn 🖖 about programming. Hosted by David and MPJ - two notorious bug generators 💖 and teachers 🤗. Exploring code together and learning programming along the way - yay!
DevTips has a sister channel called Fun Fun Function, check it out!
❤️ youtube.com/funfunfunction
Explaining our project to MPJ to get feedback on the code. Basically we get him started up on his computer - which takes AGES. 😅 Then we fix things from the last episode!
00:46 Setting MPJ up 🛠
14:28 Code Review BRIEF
17:29 Code Review FIXING IT UP
34:25 Retrospective 🏁 - What did we learn??
#codereview #pairprogramming #nextjs #reactjs
Last episode when David built the things we fix here
▶️ youtube.com/watch?v=AQ1ArQEw_Vw
This episodes code on Github
💻 github.com/chhib/online-business/tree/06ddcacfadda16eaf41b7b5853318b4b11ad996e
Learn Next.js with their own super great free tutorial/course
🖖 nextjs.org/learn
The editor is called Visual Studio Code and is free. Look for the Live Share extension to share your environment with friends
💻 code.visualstudio.com
DevTips is a weekly show for YOU who want to be inspired 👍 and learn 🖖 about programming. Hosted by David and MPJ - two notorious bug generators 💖 and teachers 🤗. Exploring code together and learning programming along the way - yay!
Fun Fun Function is the sister channel of DevTips
❤️ youtube.com/funfunfunction
ACTUALLY - it's a bird's nest of code. Half the episode is looking for bug's 🐞🐞🐞. WHAT'S NOT TO LIKE ABOUT THAT??
Pair-programming episode on Fun Fun Function
▶️ youtube.com/watch?v=_OTUGVAEWCA
Regular Expressions ULTRA BASICS
▶️ youtube.com/watch?v=VrT3TRDDE4M
Pusher's dotenv article
🔗 pusher.com/tutorials/chat-sentiment-analysis-nextjs#setting-environment-variables
Firebase Cloud Firestore documentation
🔗 firebase.google.com/docs/firestore/quickstart
Learn Next.js with their own super great free tutorial/course
🖖 nextjs.org/learn
The editor is called Visual Studio Code and is free
💻 code.visualstudio.com
DevTips is a weekly show for X, Y, and Z who want to be inspired 👍 and learn 🖖 about programming. Hosted by David and MPJ - two notorious bug generators 💖 and teachers 🤗. Exploring code together and learning programming along the way - yay!
This is a series where we're building an online business from SCRATCH - ⌨️ code, 🗺 marketing, 💰 business - EVERYTHING. 🤗
See it from start here:
▶️ youtube.com/playlist?list=PLqGj3iMvMa4K-QGq9uaF3BbPojp4xyoRw
Code from the episode
📝 github.com/chhib/online-business/commit/b7136cb108a5172ff5630cd89efc8c202e5590f1
React prototyping episode on componentDidMount and populating components with data
▶️ youtube.com/watch?v=568g8hxJJp4
Fun Fun Function has several videos on async await. Here's a few:
▶️ Basic youtube.com/watch?v=568g8hxJJp4
▶️ Advanced youtube.com/watch?v=ho5PnBOoacw
Learn Next.js with their own super great free tutorial/course
🖖 nextjs.org/learn
The editor is called Visual Studio Code and is free
💻 code.visualstudio.com
DevTips is a weekly show for designers, marketers, web devs, frontenders etc who want to be inspired 👍 and learn 🖖 about programming. Hosted by David and MPJ - two notorious bug generators 💖 and teachers 🤗.
Mostly MPJ's feelings about Ember JS... And things.
The series where we did a browse playlist prototype for Spotify using React JS.
youtube.com/watch?v=Mg7Ma5i8NgM&list=PLqGj3iMvMa4LFqyGab_aR7M0zfQm2KTuX
Learn about Ember.js
emberjs.com
💖💖💖 Next.js was suggested in the comments on the previous episode and it was a really great suggestion - thanks!!
Follow the series: youtube.com/playlist?list=PLqGj3iMvMa4K-QGq9uaF3BbPojp4xyoRw
Code from the episode
⌨️ github.com/chhib/online-business/tree/b016cb9be6e14a28aea641d8f05b6888f68d4a95
Learn Next.js with their own super great free tutorial/course
🖖 nextjs.org/learn
👍: we're starting to do thing
😓: we're not really accomplishing much
👍: life
See the first video where we plan things out: youtube.com/watch?v=bgsuOm_pse4
Code from the episode: github.com/chhib/online-business/tree/dced9b7864b9d1bcd5d5b4ca572d15ff0dd534c3
The editor is called Visual Studio Code and is free
💻 code.visualstudio.com
Code used in the episode
📝 gist.github.com/chhib/e005e0e9d48cc81529139afdc2ccecc8
If you're totally new to regex you should definitely watch the first video with the basic basics of regular expressions in JavaScript
▶️ youtube.com/watch?v=VrT3TRDDE4M
The plugin used is called Quokka.js and has both a free and a pro version. There's a sponsored video on Fun Fun Function showing off Quokka in depth:
▶️ youtube.com/watch?v=W4brAobC2Hc
Learn more about Regular Expressions on MDN
🔗 developer.mozilla.org/en-US/docs/Web/JavaScript/Guide/Regular_Expressions
Regex Tester websites
🔗 regexpal.com
🔗 regex101.com
🔗 regexr.com
How do you balance salary vs motivation? What are your options?
Non-accredited no-credentials dev and design therapists MPJ and David, and the participants of the Fun Fun Forum help a fellow colleague out.
This is an experiment with a podcast-style format where we lift the non-tech, non-design aspects of life at work. These other "things" and conflicts can often severely limit your performance and enjoyment of your profession.
Let us know what you think of this format and the discussion in the comments.
Subscribe if you want more of this!
The topic discussed is taken from the Fun Fun Forum funfunforum.com/t/anti-motivated/4952 (paywall). You don't need to have access to enjoy this video.
There's a companion discussion on how to deal with authority for authority's sake on Fun Fun Function: youtu.be/saRjCC_fgXk
📊 Business model
💰 Sales
⌨️ Code
🛡 Testing
⏏️ Deployment
🗺 Marketing
💯 Failure
❌ Minimal chance of Success. 🤗
But who cares!! We'll learn a lot from this!
In this episode, David discusses the AFFILIATE MODEL and sets up a rough PLAN. He also sketches out the idea of the site and draws a wireframe in Sketch.
First though, as all "startups", we need a NAME. Write your domain suggestion in the comments. Requirements:
☑️ Name
☑️ Available .com
Let's get to it!
Code from the episode
gist.github.com/mpj/2bfd436b363f6e8572e6ce9e28b7dd18
mpj on Twitter
twitter.com/mpjme
Regexes most common use cases are:
What can we use them for?
1. Validation
If something is formatted correctly. Like verifying if someone has inputted the correct things in a form like an email address or a postal code
2.Extraction
Extract parts of a string that we would like to use. Say find how many times someone wrote "david" in a text.
Replacement
Find all parts of the string with "david" and replace them with something else like "devtips".
You will learn:
- creating regex in two ways in JavaScript: slash notation or with the constructor new RegExp()
- escaping the special characters
- the special characters and how they work: ^, $, *, +, [a-z], [0-9], \w, \d for example
Companion code used in the episode
codepen.io/devtips/pen/gzqKKP
Or try one of these tools to experiment with regexes. They all do basically the same, it's just a matter of taste:
regexpal.com
regexpal.com
regex101.com
Read more on MDN, it's the best resource:
developer.mozilla.org/en-US/docs/Web/JavaScript/Guide/Regular_Expressions
Example with RegEx
codepen.io/devtips/pen/pVZbaw
Example with document.createElement
codepen.io/devtips/pen/GdXRwK
In which browsers will url.searchParams work?
caniuse.com/#feat=urlsearchparams
ALSO a rant on how to NOT learn through learn-how-to-code excercises. Very exciting!
Try the app out at https://grasshopper.codes/ or look for Grasshopper in your app store. It is pretty fun.
I mention ANSI en.wikipedia.org/wiki/ANSI_art and BBSes en.wikipedia.org/wiki/Bulletin_board_system
Would be awesome if you'd like to share in the comments below what got YOU into programming!
This is DevTips with David.
document.querySelector()
developer.mozilla.org/en-US/docs/Web/API/Document/querySelector
caniuse.com/#feat=queryselector
DOMContentLoaded
developer.mozilla.org/en-US/docs/Web/Events/DOMContentLoaded
caniuse.com/#feat=domcontentloaded
fetch()
developer.mozilla.org/en-US/docs/Web/API/Fetch_API/Using_Fetch
caniuse.com/#feat=fetch
CodePen used in the video
codepen.io/devtips/pen/VXbqqo
jQuery pushed Web 2.0 forward. But today the web has caught up. It wasn’t trivial to query the DOM ten years ago. jQuery solved that.
It also has a handy wait-for-the-DOM-to-load call. And it had handy features such as toggles for checkboxes, making AJAX requests (which are asynchronous JavaScript calls to other resources such as other JavaScript or XML or HTML documents), picking up form values, changing styles, or manipulate the DOM.
If you wanted to build something slightly more advanced back in the days, you almost needed jQuery. Today, you don't.
jQuery did things well. But I see people use it still and its fine. It just bugs me that today they could just as well NOT drop in that pretty big library, if all they want to do is either DOM selection, AJAX XHR fetching or waiting for the document to load.
and also Instagram:
instagram.com/travisneilson
Travis says goodbye to DevTips, but it is not the end of DevTips. David and MPJ from the high-fidelity prototyping with React series will continue DevTips.
🔗 All the code on Github
github.com/mpj/better-playlists
- - -
In this series we'll go from start to finish in building a fully functioning high-fidelity prototype with OAuth2 authentication and API connections fetching real data. The user will experience the prototype with her own stuff in it!
We do this by using React JS reactjs.org - a great JavaScript framework for building front-end components. We will even do some back-end to handle authentication eventually.
And yes, this is not Travis - David and MPJ are filling in!
- - -
This video was sponsored by the DevTips Patron Community - patreon.com/DevTips
Listen to Travis' Podcast - http://www.travandlos.com
Get awesomeness emailed to you every thursday - http://travisneilson.com/notes
You should follow DevTips on Twitter - twitter.com/DevTipsShow
MPJ's channel on programming Fun Fun Function is great -
youtube.com/funfunfunction
David is known as Data David discussing analytics and data -
youtube.com/channel/UC0TQC6ZPNm23dU6ecc5x0Gg
🔗 Better Playlists on Heroku
http://better-playlists.herokuapp.com
🔗 This episode's code
github.com/mpj/better-playlists/tree/fc5df38f222c4f3db03316b5aafb626162283bb8
- - -
In this series we'll go from start to finish in building a fully functioning high-fidelity prototype with OAuth2 authentication and API connections fetching real data. The user will experience the prototype with her own stuff in it!
We do this by using React JS reactjs.org - a great JavaScript framework for building front-end components. We will even do some back-end to handle authentication eventually.
And yes, this is not Travis - David and MPJ are filling in!
- - -
This video was sponsored by the DevTips Patron Community - patreon.com/DevTips
Listen to Travis' Podcast - http://www.travandlos.com
Get awesomeness emailed to you every thursday - http://travisneilson.com/notes
You should follow DevTips on Twitter - twitter.com/DevTipsShow
MPJ's channel on programming Fun Fun Function is great -
youtube.com/funfunfunction
David is known as Data David discussing analytics and data -
youtube.com/channel/UC0TQC6ZPNm23dU6ecc5x0Gg
🔗 Learn more about JavaScript Promises on Fun Fun Function
youtube.com/watch?v=2d7s3spWAzo
🔗 Better Playlists on Heroku
http://better-playlists.herokuapp.com
🔗 This episode's code
github.com/mpj/better-playlists/tree/3fe87eaa49146d7596b28db257bf67271080968a
🔗 Spotify's Web API Endpoint Reference
developer.spotify.com/web-api/endpoint-reference
- - -
In this series we'll go from start to finish in building a fully functioning high-fidelity prototype with OAuth2 authentication and API connections fetching real data. The user will experience the prototype with her own stuff in it!
We do this by using React JS reactjs.org - a great JavaScript framework for building front-end components. We will even do some back-end to handle authentication eventually.
And yes, this is not Travis - David and MPJ are filling in!
- - -
This video was sponsored by the DevTips Patron Community - patreon.com/DevTips
Listen to Travis' Podcast - http://www.travandlos.com
Get awesomeness emailed to you every thursday - http://travisneilson.com/notes
You should follow DevTips on Twitter - twitter.com/DevTipsShow
MPJ's channel on programming Fun Fun Function is great -
youtube.com/funfunfunction
David is known as Data David discussing analytics and data -
youtube.com/channel/UC0TQC6ZPNm23dU6ecc5x0Gg
🔗 Better Playlists on Heroku
http://better-playlists.herokuapp.com
🔗 This episode's final code
github.com/mpj/better-playlists/tree/3ab1533c29dd1d0c73f4ab5fc30111579d5bd521
🔗 Spotify's Web API Endpoint Reference
developer.spotify.com/web-api/endpoint-reference
- - -
In this series we'll go from start to finish in building a fully functioning high-fidelity prototype with OAuth2 authentication and API connections fetching real data. The user will experience the prototype with her own stuff in it!
We do this by using React JS reactjs.org - a great JavaScript framework for building front-end components. We will even do some back-end to handle authentication eventually.
And yes, this is not Travis - David and MPJ are filling in!
- - -
This video was sponsored by the DevTips Patron Community - patreon.com/DevTips
Listen to Travis' Podcast - http://www.travandlos.com
Get awesomeness emailed to you every thursday - http://travisneilson.com/notes
You should follow DevTips on Twitter - twitter.com/DevTipsShow
MPJ's channel on programming Fun Fun Function is great -
youtube.com/funfunfunction
David is known as Data David discussing analytics and data -
youtube.com/channel/UC0TQC6ZPNm23dU6ecc5x0Gg
This actually works very similar for any OAuth credential server you might need.
🔗 Sign-in through the backend we just built
http://better-playlists-backend.herokuapp.com/login
🔗 OAuth Bridge Template
github.com/mpj/oauth-bridge-template
🔗 Better Playlists on Heroku
http://better-playlists.herokuapp.com
- - -
In this series we'll go from start to finish in building a fully functioning high-fidelity prototype with OAuth2 authentication and API connections fetching real data. The user will experience the prototype with her own stuff in it!
We do this by using React JS reactjs.org - a great JavaScript framework for building front-end components. We will even do some back-end to handle authentication eventually.
And yes, this is not Travis - David and MPJ are filling in!
- - -
This video was sponsored by the DevTips Patron Community - patreon.com/DevTips
Listen to Travis' Podcast - http://www.travandlos.com
Get awesomeness emailed to you every thursday - http://travisneilson.com/notes
You should follow DevTips on Twitter - twitter.com/DevTipsShow
MPJ's channel on programming Fun Fun Function is great -
youtube.com/funfunfunction
David is known as Data David discussing analytics and data -
youtube.com/channel/UC0TQC6ZPNm23dU6ecc5x0Gg
🔗 The code from this episode
github.com/mpj/better-playlists/tree/ae0c871454c1345ca726f2ef09b717d328416909
- - -
In this series we'll go from start to finish in building a fully functioning high-fidelity prototype with OAuth2 authentication and API connections fetching real data. The user will experience the prototype with her own stuff in it!
We do this by using React JS reactjs.org - a great JavaScript framework for building front-end components. We will even do some back-end to handle authentication eventually.
And yes, this is not Travis - David and MPJ are filling in!
- - -
This video was sponsored by the DevTips Patron Community - patreon.com/DevTips
Listen to Travis' Podcast - http://www.travandlos.com
Get awesomeness emailed to you every thursday - http://travisneilson.com/notes
You should follow DevTips on Twitter - twitter.com/DevTipsShow
MPJ's channel on programming Fun Fun Function is great -
youtube.com/funfunfunction
David is known as Data David discussing analytics and data -
youtube.com/channel/UC0TQC6ZPNm23dU6ecc5x0Gg
🔗 The code from this episode
github.com/mpj/better-playlists/tree/bfcfefb15a92fa0ae58f08b009d7cc1d609b1ebf
- - -
In this series we'll go from start to finish in building a fully functioning high-fidelity prototype with OAuth2 authentication and API connections fetching real data. The user will experience the prototype with her own stuff in it!
We do this by using React JS reactjs.org - a great JavaScript framework for building front-end components. We will even do some back-end to handle authentication eventually.
And yes, this is not Travis - David and MPJ are filling in!
- - -
This video was sponsored by the DevTips Patron Community - patreon.com/DevTips
Listen to Travis' Podcast - http://www.travandlos.com
Get awesomeness emailed to you every thursday - http://travisneilson.com/notes
You should follow DevTips on Twitter - twitter.com/DevTipsShow
MPJ's channel on programming Fun Fun Function is great -
youtube.com/funfunfunction
David is known as Data David discussing analytics and data -
youtube.com/channel/UC0TQC6ZPNm23dU6ecc5x0Gg