Let’s Animate with CSS (and Failing Fast!) DevTips 2018-09-14 | Sponsored by: Brilliant, thanks! Be one of the first 200 people to sign up with this link and get 20% off your annual subscription with Brilliant.org!brilliant.org/DevTipsWe 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.comDevTips 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
DevTips_ Podcast 002 – Burnout & Butterfly Knives DevTips 2024-04-01 | Max notices that a number of YouTube creators he follows have pivoted their content strategies. What does this mean for large platforms, and is there a workable alternative to creating for the algorithm?
DevTips_ Podcast 001 – @Jackconte @SXSW Keynote reaction DevTips 2024-03-23 | Hello DevTips!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
Learning ReactJS: Converting Vanilla JavaScript into ReactJS DevTips 2021-05-12 | Last week, we went through the process of learning what's under the hood in a React application. Today, we're creating a React app and converting all of the vanilla JavaScript we wrote into a React component!Read the article on Medium: devtipsshow.medium.com/4817a1c77acf?source=friends_link&sk=7bd2fdb07edd74b19b2374cae968ae69Download the source code on this video: github.com/DevTipsOfficial/ReactWithComponent— Get the Official DevTips Merchandise Today! devtipsstore.comFollow DevTips to stay up to date with upcoming videos and projects:twitter.com/DevTipsShowdevtipsshow.medium.cominstagram.com/officialdevtipsshowfacebook.com/DevTipsShowCheck out the Official DevTips CodePen for random projects and creations: codepen.io/devtipsAll background music provided by Monstercat with a Gold subscription
Creating A React Component WITHOUT React DevTips 2021-05-07 | Getting started in React without knowing what's going on under the hood can be so much more complex! In this video, you'll learn about how to create a component purely in vanilla JavaScript, what things you should know before you start developing a React component, and finally, some "thank you" messages from the host after his last video.Learn more about this project, and get a few additional questions answered:devtipsshow.medium.com/creating-a-react-component-without-using-react-4bad18fcf064?sk=22f867a8a7332b8cab36273016c32cc6The best resource for a new React Developer:reactjs.org— Get the Official DevTips Merchandise Today! devtipsstore.comFollow DevTips to stay up to date with upcoming videos and projects:twitter.com/DevTipsShowdevtipsshow.medium.cominstagram.com/officialdevtipsshowfacebook.com/DevTipsShowCheck out the Official DevTips CodePen for random projects and creations: codepen.io/devtipsAll background music provided by Monstercat with a Gold subscription
Welcome the NEW HOST of the DevTips Show! DevTips 2021-04-18 | Welcome our new host Andrew to the DevTips show on YouTube! Andrew is taking over as the primary host of the channel for the foreseeable future. In this video, he talks a little about the future of the channel, where it’s going, and a tiny bit about him.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.comFollow DevTips to stay up to date with upcoming videos and projects:twitter.com/DevTipsShowdevtipsshow.medium.cominstagram.com/officialdevtipsshowfacebook.com/DevTipsShowCheck out the Official DevTips CodePen for random projects and creations: codepen.io/devtipsAll background music provided by Monstercat with a Gold subscription
My Setup for Design, Web Development, Video Editing and more 💻 👍 DevTips 2020-12-13 | Take a look at my setup, apps that I'm currently using everyday and my VS Code Extensions. If you want to share your setup, join our discord server: discord.gg/JNZH3A2 👍 💻 My Setup:Monitors: samsung.com/za/monitors/flat/led-monitor-27-inch-ls27e390hs-xaComputer: bestbuy.com/site/apple-mac-mini-desktop-intel-core-i3-16gb-memory-256gb-solid-state-drive-space-gray/6335988.p?skuId=6335988Mouse: apple.com/shop/product/MLA02LL/A/magic-mouse-2-silverKeyboard:apple.com/shop/product/MRMH2LL/A/magic-keyboard-with-numeric-keypad-us-english-space-grayWeb Cam: amazon.com/Logitech-BRIO-Conferencing-Recording-Streaming/dp/B01N5UOYC4/ref=sr_1_3Microphone: bluemic.com/en-us/products/yetiMicrophone Arm:bluemic.com/fr-fr/products/compass ❤️My VS Code Extensions:ESLint:marketplace.visualstudio.com/items?itemName=dbaeumer.vscode-eslintLive Sass Compiler:marketplace.visualstudio.com/items?itemName=ritwickdey.live-sassLive Server:marketplace.visualstudio.com/items?itemName=ritwickdey.LiveServerPrettier:marketplace.visualstudio.com/items?itemName=esbenp.prettier-vscodeSass Syntax Highlighter:marketplace.visualstudio.com/items?itemName=Syler.sass-indentedThe editor is called Visual Studio Code and is free. Look for the Live Share extension to share your environment with friends.💻 code.visualstudio.comDevTips 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/ieatwebsitesDevTips has a discord server called Keep On Hacking, check it out!❤️discord.gg/JNZH3A2
Create a Subscription Form from Scratch using HTML, CSS and MailChimp DevTips 2020-11-16 | Create a cool MailChimp subscription form using only HTML and CSS. All you need is a MailChimp account and VS Code.Download Project files: amazon.com/clouddrive/share/FSqiZspoP2l2cC3FPVQohR5QKDry3dsqojnFePL8Sct*Remember to replace the MailChimp code by your own.Create a MailChimp Account:mailchimp.comDownload the background image by Jeremy Bishop:unsplash.com/photos/G9i_plbfDgkThe editor is called Visual Studio Code and is free. Look for the Live Share extension to share your environment with friends.💻 code.visualstudio.comI’m using Browsersync for live reloading. Every time you save the file it will automatically reload. Go here to learn more.browsersync.ioSkip to the tutorial: 3:00DevTips 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/ieatwebsitesDevTips has a discord server called Keep On Hacking, check it out!❤️discord.gg/JNZH3A2
Creating an Among Us Character with only HTML and CSS DevTips 2020-10-29 | Learn how to create the red character from the famous mobile video game “Among Us” with only HTML and CSS.Get the code: codepen.io/ieatwebsites/pen/LYZZKzgDownload all project files:amazon.com/clouddrive/share/yeDdcuvnf1Sn4OM9XpUpEagaMJuyGRJiu8cUHzXK2LrFancy Border Radius Tool: 9elements.github.io/fancy-border-radius/full-control.htmlThe editor is called Visual Studio Code and is free. Look for the Live Share extension to share your environment with friends.💻 code.visualstudio.comI’m using Browsersync for live reloading. Every time you save the file it will automatically reload. Go here to learn more.browsersync.ioPrefer 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/ieatwebsitesDevTips has a discord server called Keep On Hacking, check it out!❤️discord.gg/JNZH3A2
What Happened to DevTips THIS TIME?? DevTips 2019-06-27 | David and Mattias explain what happened to DevTips and (once again) lay out plans for the future.🎬 Dan Abramov showing React Hooksyoutube.com/watch?v=G-aO5hzo1aw‼️ Follow on Twitch to get notified of next live streamtwitch.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.comDevTips 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/devtipsshowDevTips has a sister channel called Fun Fun Function, check it out!❤️ youtube.com/funfunfunction
My First Progressive Web App (PWA) DevTips 2019-01-18 | We learn the basics on Progressive Web Apps! What are they good for? Why do they exist? AND showing just how easy it is to get started!🗿 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 iOSRepository with the code we use in the video📝 github.com/chhib/dt-pwaThe editor is called Visual Studio Code and is free. Look for the Live Share extension to share your environment with friends.💻 code.visualstudio.comDevTips 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/devtipsshowDevTips has a sister channel called Fun Fun Function, check it out!❤️ youtube.com/funfunfunction#pwa #manifest
Trying Kubernetes 📦 for the First Time DevTips 2019-01-11 | Sponsored by: Sucuri, thanks! Gain peace of mind by securing all your websites, get hacks fixed and prevent future attacks. Get 15% off with discount code: DevTips15http://sucuri.devtipsshow.comWe 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 deploymentStep-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-e53f64f67e9e4cd6b78914ef4deb3844The files we used🗂 gist.github.com/chhib/588bf4e5324c62f39526c8032a484d84This was shot on a live stream on Twitch. Go there to follow us when we do future live streams:📹 twitch.tv/devtipsshowDevTips 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 Future of DevTips & Fun Fun Function DevTips 2019-01-04 | David & MPJ are reflecting on the past year and tells about new plans for the shows!The SECRET document planning out the future🔪 https://www.notion.so/maximumsheep/Codename-Failing-Together-caf7b47d6a0a46faa7dcacc04619f6cdDevTips 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
Best Web Development Content of 2018 DevTips 2018-12-21 | Sponsored by: Brilliant, thanks! Be one of the first 200 people to sign up with this link and get 20% off your annual subscription with Brilliant.org!brilliant.org/DevTipsDavid 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.fmhttps://syntax.fm/⏯ 03:43 Freakonomicshttp://freakonomics.com/podcast/religiosity⏯ 10:10 Paul Lewisyoutube.com/channel/UCRDEsZDDhVhtHLi0L8-5fow⏯ 13:07 Noopkattwitch.tv/noopkatyoutube.com/channel/UCoFU24KMXmCi4Sl3KIFPSVg⏯ 14:04 The Coding Trainyoutube.com/user/shiffman⏯ 18:50 I Don't Want to Talk About Itamazon.com/Dont-Want-Talk-About-Overcoming/dp/0684835398⏯ 22:09 Thin Matrixyoutube.com/user/ThinMatrix⏯ 23:52 VS Code Live Sharemarketplace.visualstudio.com/items?itemName=MS-vsliveshare.vsliveshareTHANKS 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
Trying Docker for the First Time 📖 Many Learnings! DevTips 2018-12-14 | Sponsored by: Brilliant, thanks! Be one of the first 200 people to sign up with this link and get 20% off your annual subscription with Brilliant.org!brilliant.org/DevTipsHow 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-startedThe editor is called Visual Studio Code and is free. Look for the Live Share extension to share your environment with friends.💻 code.visualstudio.comDevTips 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
How to Load Web Fonts in 2019 🎆 DevTips 2018-12-07 | Sponsored by: Coursera.org, thanks! Get the world's best online education experience on subjects such as Data Science, Business, Blockchain, you name it at Coursera! http://go.thoughtleaders.io/721720181207After 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-loadingThe Font Loading Checklist by Zach Leatherman☑️ zachleat.com/web/font-checklistThe Five Whys of Web Font Loading Performance (video)▶️ zachleat.com/web/five-whysThe editor is called Visual Studio Code and is free. Look for the Live Share extension to share your environment with friends.💻 code.visualstudio.comDevTips 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
Font Loading Performance 📉 6 Experiments with FOUT & FOIT DevTips 2018-11-30 | Sponsored by: .TECH Domains, thanks! They recently had an awesome Cyber Monday sale but if you missed out use limited time coupon code DEVTIPS at https://go.tech/DevTips for up to 90% OFF for a limited time! Valid only on 1 & 5 Year Domains!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-loadingThe Font Loading Checklist by Zach Leatherman☑️ zachleat.com/web/font-checklistThe Five Whys of Web Font Loading Performance (video)▶️ zachleat.com/web/five-whysThe helper to get the Google Web Fonts as WOFF2 filesฒ google-webfonts-helper.herokuapp.com/fontsThe editor is called Visual Studio Code and is free. Look for the Live Share extension to share your environment with friends.💻 code.visualstudio.comDevTips 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 in JavaScript (3+1 Ways) DevTips 2018-11-23 | Sponsored by: Coursera.org, thanks! Get the world's best online education experience on subjects such as Data Science, Business, Blockchain, you name it at Coursera! http://go.thoughtleaders.io/721320181123Query 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/4ba7238d595828fd6b7dca73da8c72acThe VS Code plugin used to to preview values is Quokka.js🔌 http://quokka.devtipsshow.comThe editor is called Visual Studio Code and is free. Look for the Live Share extension to share your environment with friends.💻 code.visualstudio.comDevTips 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
Critical CSS + Fail 🧨 DevTips 2018-11-16 | Sponsored by: .TECH, thanks! Pre-register for your .TECH domain and get a further 10% discount at https://go.tech/DevtipsOookay. 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/penthouseGuide 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.comDevTips 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
Teaching CSS to a Coder 🙀 (How to Lazy Load Images) DevTips 2018-11-09 | Sponsored by: ForkLift, thanks! Try the most advanced file manager and file transfer client for macOS and use the coupon code DEVTIPS to get 50% off. http://bit.ly/2IwUBMTDavid 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-boxesTo 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-refsThe editor is called Visual Studio Code and is free. Look for the Live Share extension to share your environment with friends.💻 code.visualstudio.comDevTips 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
What is THIS in JavaScript? DevTips 2018-11-02 | Sponsored by: SkySilk, thanks! SkySilk is a VPS hosting platform with a unique rewards program - use DEVSILK2018 when signing up to get 250 extra skypoints: http://bit.ly/2S7oHdrDavid and MPJ talks about bind and this in JavaScript, figuring out what the heck is actually going on. Code and notes from the episodehttps://www.notion.so/maximumsheep/What-is-this-2dc4b2f02da940debd7848d2a13fdb0fWatch followup video on Fun Fun Function about class property arrow functions:youtube.com/watch?v=uCuTQYf80FUThat cool inline evaluation thing is called Quokka:http://quokka.devtipsshow.comDevTips 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
How to Work with Legacy Code ☠️ DevTips 2018-10-26 | Sponsored by: Brilliant, thanks! Be one of the first 200 people to sign up with this link and get 20% off your annual subscription with Brilliant.org!brilliant.org/DevTipsWe 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.8mVguvfk5K88mWjymDnx2bDevTips 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!
Our favourite ES2018 features 💖 DevTips 2018-10-19 | Sponsored by: Codementor, thanks! Use the link codemntr.io/devtips to show that you came from here. The first 200 sign-ups using the link will get a $15 free credit.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-17ede97f36d5MPJ has a killer video on iterators on Fun Fun Function🔪 youtube.com/watch?v=W4brAobC2HcThat cool inline evaluation thing is called Quokka😎 http://quokka.devtipsshow.comThe editor is called Visual Studio Code and is free. Look for the Live Share extension to share your environment with friends.💻 code.visualstudio.comDevTips 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
Recursion ➰ for Paginated Web Scraping DevTips 2018-10-12 | Sponsored by: Brilliant, thanks! Be one of the first 200 people to sign up with this link and get 20% off your annual subscription with Brilliant.org!brilliant.org/DevTipsWe 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 CodeSee the previous episode where we explain Puppeteer and finding the data to scrape▶️ youtube.com/watch?v=pixfH6yyqZkThe code used in this video is on GitHub🗒 github.com/chhib/scraper/tree/5d00bb08c6ec4ea8cbaec7ea78fb90a10a864f8bPuppeteer - Headless Chrome browser for scraping (instead of Phantom JS)🔪 github.com/GoogleChrome/puppeteerThe editor is called Visual Studio Code and is free. Look for the Live Share extension to share your environment with friends.💻 code.visualstudio.comDevTips 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
CSS Animation with Physics Simulation 📈 (so much over-engineering ⚙️) DevTips 2018-10-05 | Sponsored by: Framer X, thanks! The easiest and most advanced design tool. Everything interactive and unlimited. Designer AND developers can use Framer. Every component can be shared (and is React). framer.comLet'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 ⊹ positioningTry out the Observable notebook yourself🗒 beta.observablehq.com/@chhib/simulating-bouncing-ball-to-generate-realistic-physics-csBurak Kanber's physics modeling post with gravity and drag📉 burakkanber.com/blog/modeling-physics-javascript-gravity-and-dragHenrik Joreteg's create-keyframe-animation module to generate the CSS keyframes📽 npmjs.com/package/create-keyframe-animationHow 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-imageDevTips 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
Web Scraping with Node.js & Puppeteer (🌋 rants included, no extra charge) DevTips 2018-09-28 | Sponsored by: Brilliant, thanks! Be one of the first 200 people to sign up with this link and get 20% off your annual subscription with Brilliant.org!brilliant.org/DevTipsWe 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/puppeteerThe editor is called Visual Studio Code and is free. Look for the Live Share extension to share your environment with friends.💻 code.visualstudio.comDevTips 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
Finding a Designer + 🍪 FIKA DevTips 2018-09-21 | David and MPJ discuss the troubles of hiring a designer through a marketplace and how wonderful life is once you find one. Digressing into remote work troubles. AND the difficult word RAPPORT.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.comDevTips 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
Code Review 🦊 SO MUCH LEARNING #6 Building an Online Business DevTips 2018-09-07 | Sponsored by: FullStack Javascript Developer Edegree on Kickstarter by Eduonix kickstarter.com/projects/1311831077/eduonix-fullstack-javascript-developer-edegree?ref=crrxozExplaining 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 BRIEF17:29 Code Review FIXING IT UP34:25 Retrospective 🏁 - What did we learn??#codereview #pairprogramming #nextjs #reactjsLast episode when David built the things we fix here▶️ youtube.com/watch?v=AQ1ArQEw_VwThis episodes code on Github💻 github.com/chhib/online-business/tree/06ddcacfadda16eaf41b7b5853318b4b11ad996eLearn Next.js with their own super great free tutorial/course🖖 nextjs.org/learnThe editor is called Visual Studio Code and is free. Look for the Live Share extension to share your environment with friends💻 code.visualstudio.comDevTips 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
Adding a Database to Next.js 🖖 #5 Building an Online Business DevTips 2018-08-31 | Adding Firebase Cloud Firestore to the Online Biz💰Niz. Now we have a proper database, and thanks to next.js - server-side rendering. My sweet oh my it is very beautiful.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=_OTUGVAEWCARegular Expressions ULTRA BASICS▶️ youtube.com/watch?v=VrT3TRDDE4MPusher's dotenv article🔗 pusher.com/tutorials/chat-sentiment-analysis-nextjs#setting-environment-variablesFirebase Cloud Firestore documentation🔗 firebase.google.com/docs/firestore/quickstartLearn Next.js with their own super great free tutorial/course🖖 nextjs.org/learnThe editor is called Visual Studio Code and is free💻 code.visualstudio.comDevTips 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!
Server-side rendered data fetch in Next.js #4 Building an Online Business DevTips 2018-08-24 | Now we have Next.js which is great for server-side rendering (SSR). With getInitialProps() we can set dynamically fetched data and still get that sweet SSR functionality. Comparing it with Reacts componentDidMount().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-QGq9uaF3BbPojp4xyoRwCode from the episode📝 github.com/chhib/online-business/commit/b7136cb108a5172ff5630cd89efc8c202e5590f1React prototyping episode on componentDidMount and populating components with data▶️ youtube.com/watch?v=568g8hxJJp4Fun Fun Function has several videos on async await. Here's a few:▶️ Basic youtube.com/watch?v=568g8hxJJp4▶️ Advanced youtube.com/watch?v=ho5PnBOoacwLearn Next.js with their own super great free tutorial/course🖖 nextjs.org/learnThe editor is called Visual Studio Code and is free💻 code.visualstudio.comDevTips 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 🤗.
Why did we not use Ember.js? DevTips 2018-07-20 | A brief discussion between David and MPJ looking back on a comment from our React JS Prototyping series. Why we chose React over Ember?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_aR7M0zfQm2KTuXLearn about Ember.jsemberjs.com
Next.js Basics #3 Building an Online Business DevTips 2018-07-06 | To get server-side rendering (SSR) and routing with React - the go-to framework is Next.js. We convert our create-react-app into a Next.js app. Also how Next.js handles style tags tied to components, but written like CSS in the ordinary fashion - a very neat approach!💖💖💖 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-QGq9uaF3BbPojp4xyoRwCode from the episode⌨️ github.com/chhib/online-business/tree/b016cb9be6e14a28aea641d8f05b6888f68d4a95Learn Next.js with their own super great free tutorial/course🖖 nextjs.org/learn
Going from Sketch to React.js #2 Building an Online Business DevTips 2018-06-29 | Creating an HTML/React framework for our site from the Sketch sketch. Then realising... We should... Do things... Differently.👍: we're starting to do thing😓: we're not really accomplishing much👍: lifeSee the first video where we plan things out: youtube.com/watch?v=bgsuOm_pse4Code from the episode: github.com/chhib/online-business/tree/dced9b7864b9d1bcd5d5b4ca572d15ff0dd534c3
What do () parenthesis and | pipe mean in RegExp? #2 REGEX ULTRA BASICS DevTips 2018-06-22 | This episodes shows the basics of how to use capture groups (), non-capture groups (?:) and alternation (|) in Regular Expressions in JavaScript.The editor is called Visual Studio Code and is free💻 code.visualstudio.comCode used in the episode📝 gist.github.com/chhib/e005e0e9d48cc81529139afdc2ccecc8If 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=VrT3TRDDE4MThe 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=W4brAobC2HcLearn more about Regular Expressions on MDN🔗 developer.mozilla.org/en-US/docs/Web/JavaScript/Guide/Regular_ExpressionsRegex Tester websites🔗 regexpal.com🔗 regex101.com🔗 regexr.com
Anti-Motivated DevTips 2018-06-15 | "This is kind of new to me, I’ve dealt with a lack of motivation before, but never anything like this." 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
THE PLAN #1 Lets build an online business 💰 DevTips 2018-06-08 | NEW SERIES! We're... building... an... ONLINE BUSINESS! Prepare for 105%-crash-and-burn total failure. It'll be FUN and we'll LEARN a lot! Expect: 📊 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 .comLet's get to it!
node.js basics DevTips 2018-06-01 | We look at how to use node.js to run some JavaScript on our computer, outside of the browser! That's actually all that node.js is - it's a way to run JavaScript outside of the browser. In this video, we look at how to install node, and how to use it to read and filter the contents of a file.Code from the episodegist.github.com/mpj/2bfd436b363f6e8572e6ce9e28b7dd18mpj on Twittertwitter.com/mpjme
Regular Expressions in JavaScript - #1 REGEX ULTRA BASICS DevTips 2018-05-25 | A regular expression (or regex) is way to find strings within strings. It's small code that when applied to a string, will give other strings - either the whole string or parts of the string. This video gives you the ULTRA BASICS of REGEX.Regexes most common use cases are:What can we use them for?1. ValidationIf something is formatted correctly. Like verifying if someone has inputted the correct things in a form like an email address or a postal code2.ExtractionExtract parts of a string that we would like to use. Say find how many times someone wrote "david" in a text.ReplacementFind 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 exampleCompanion code used in the episodecodepen.io/devtips/pen/gzqKKPOr try one of these tools to experiment with regexes. They all do basically the same, it's just a matter of taste:regexpal.comregexpal.comregex101.comRead more on MDN, it's the best resource:developer.mozilla.org/en-US/docs/Web/JavaScript/Guide/Regular_Expressions
URL Parsing with RegEx, createElement and new URL() DevTips 2018-05-18 | Exploring how to parse URLs first with Regular Expressions (RegExp), then with document.createElement, and finally with new URL().Example with RegExcodepen.io/devtips/pen/pVZbawExample with document.createElementcodepen.io/devtips/pen/GdXRwKIn which browsers will url.searchParams work?caniuse.com/#feat=urlsearchparams
Learning to code on your mobile? DevTips 2018-05-11 | The answer is YES - you can learn to code on a smart phone - with the Grasshopper app. A neat way of combining both examples and quizzes to learn JavaScript on your mobile phone.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.
What got you into programming? DevTips 2018-05-04 | What is "programming" really? David contemplating programming and what got him started.I mention ANSI en.wikipedia.org/wiki/ANSI_art and BBSes en.wikipedia.org/wiki/Bulletin_board_systemWould be awesome if you'd like to share in the comments below what got YOU into programming!
Top 3 Dont-Need-jQuery DevTips 2018-04-27 | You don’t NEED jQuery today. Let’s look at the three things you totally can accomplish without dropping in the jQuery library on your app or site. $.ajax(), $().ready() and the jQuery DOM selector.This is DevTips with David.document.querySelector()developer.mozilla.org/en-US/docs/Web/API/Document/querySelectorcaniuse.com/#feat=queryselectorDOMContentLoadeddeveloper.mozilla.org/en-US/docs/Web/Events/DOMContentLoadedcaniuse.com/#feat=domcontentloadedfetch()developer.mozilla.org/en-US/docs/Web/API/Fetch_API/Using_Fetchcaniuse.com/#feat=fetchCodePen used in the videocodepen.io/devtips/pen/VXbqqojQuery 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.
Goodbye DevTips DevTips 2018-04-20 | Thank you Travis for what you have started here on DevTips! Follow his journey onward on his new channel youtube.com/user/MrTravisNeilsonand also Instagram:instagram.com/travisneilsonTravis 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.
Summary & reflections - #16 React JS prototyping DevTips 2018-02-07 | Done! Having an after-work beer, looking back on what we've done and reflecting. Yas!🔗 All the code on Githubgithub.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/DevTipsListen to Travis' Podcast - http://www.travandlos.comGet awesomeness emailed to you every thursday - http://travisneilson.com/notes You should follow DevTips on Twitter - twitter.com/DevTipsShowMPJ's channel on programming Fun Fun Function is great - youtube.com/funfunfunctionDavid is known as Data David discussing analytics and data - youtube.com/channel/UC0TQC6ZPNm23dU6ecc5x0Gg
Programmable styling - #15 React JS prototyping DevTips 2018-02-07 | Programming the CSS styling to allow for conditional styles integrated with the components. Shut out the pain of us scalping the CSS file and putting everything inline and as JavaScript variables. Just go with it. You will be fine.🔗 Better Playlists on Herokuhttp://better-playlists.herokuapp.com 🔗 This episode's codegithub.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/DevTipsListen to Travis' Podcast - http://www.travandlos.comGet awesomeness emailed to you every thursday - http://travisneilson.com/notes You should follow DevTips on Twitter - twitter.com/DevTipsShowMPJ's channel on programming Fun Fun Function is great - youtube.com/funfunfunctionDavid is known as Data David discussing analytics and data - youtube.com/channel/UC0TQC6ZPNm23dU6ecc5x0Gg
Advanced data mangling with Promises - #14 React JS prototyping DevTips 2018-01-31 | Fixing upp the hours aggregator with nested API calls to the Spotify API. Learn how to deal with them using JavaScript Promises - a neat way of having multiple external calls wait for each other.🔗 Learn more about JavaScript Promises on Fun Fun Functionyoutube.com/watch?v=2d7s3spWAzo🔗 Better Playlists on Herokuhttp://better-playlists.herokuapp.com 🔗 This episode's codegithub.com/mpj/better-playlists/tree/3fe87eaa49146d7596b28db257bf67271080968a🔗 Spotify's Web API Endpoint Referencedeveloper.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/DevTipsListen to Travis' Podcast - http://www.travandlos.comGet awesomeness emailed to you every thursday - http://travisneilson.com/notes You should follow DevTips on Twitter - twitter.com/DevTipsShowMPJ's channel on programming Fun Fun Function is great - youtube.com/funfunfunctionDavid is known as Data David discussing analytics and data - youtube.com/channel/UC0TQC6ZPNm23dU6ecc5x0Gg
Pulling data from the Spotify API - #13 React JS prototyping DevTips 2018-01-24 | Finally harvesting! Pulling our own actual Spotify user and playlist data into the React app! AND WE DEPLOY. REPEATEDLY. BECAUSE IT IS FUN (please make it stop).🔗 Better Playlists on Herokuhttp://better-playlists.herokuapp.com🔗 This episode's final codegithub.com/mpj/better-playlists/tree/3ab1533c29dd1d0c73f4ab5fc30111579d5bd521🔗 Spotify's Web API Endpoint Referencedeveloper.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/DevTipsListen to Travis' Podcast - http://www.travandlos.comGet awesomeness emailed to you every thursday - http://travisneilson.com/notes You should follow DevTips on Twitter - twitter.com/DevTipsShowMPJ's channel on programming Fun Fun Function is great - youtube.com/funfunfunctionDavid is known as Data David discussing analytics and data - youtube.com/channel/UC0TQC6ZPNm23dU6ecc5x0Gg
Understanding OAuth with the Spotify API - #12 React JS prototyping DevTips 2018-01-17 | We build a small backend server to handle authenticating with the Spotify API via OAuth. After this episode we can finally get the user's own data into the prototype!This actually works very similar for any OAuth credential server you might need.🔗 Sign-in through the backend we just builthttp://better-playlists-backend.herokuapp.com/login🔗 OAuth Bridge Templategithub.com/mpj/oauth-bridge-template🔗 Better Playlists on Herokuhttp://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/DevTipsListen to Travis' Podcast - http://www.travandlos.comGet awesomeness emailed to you every thursday - http://travisneilson.com/notes You should follow DevTips on Twitter - twitter.com/DevTipsShowMPJ's channel on programming Fun Fun Function is great - youtube.com/funfunfunctionDavid is known as Data David discussing analytics and data - youtube.com/channel/UC0TQC6ZPNm23dU6ecc5x0Gg
Dynamic text filtering on the client - #11 React JS prototyping DevTips 2018-01-10 | We're wiring up the filter component to the app. Whatever text is input will dynamically filter both the list of playlist components as well as the aggregation components listing hours and number of playlists.🔗 The code from this episodegithub.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/DevTipsListen to Travis' Podcast - http://www.travandlos.comGet awesomeness emailed to you every thursday - http://travisneilson.com/notes You should follow DevTips on Twitter - twitter.com/DevTipsShowMPJ's channel on programming Fun Fun Function is great - youtube.com/funfunfunctionDavid is known as Data David discussing analytics and data - youtube.com/channel/UC0TQC6ZPNm23dU6ecc5x0Gg
MOAR populating components with data - #10 React JS prototyping DevTips 2018-01-03 | Populating the playlist components with fake server data. Learning why .map() is the way to iterate through our playlists instead of .forEach() in the component.🔗 The code from this episodegithub.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/DevTipsListen to Travis' Podcast - http://www.travandlos.comGet awesomeness emailed to you every thursday - http://travisneilson.com/notes You should follow DevTips on Twitter - twitter.com/DevTipsShowMPJ's channel on programming Fun Fun Function is great - youtube.com/funfunfunctionDavid is known as Data David discussing analytics and data - youtube.com/channel/UC0TQC6ZPNm23dU6ecc5x0Gg
