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.
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.DevTips_ Podcast 002 – Burnout & Butterfly KnivesDevTips2024-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 reactionDevTips2024-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; @JackconteLearning ReactJS: Converting Vanilla JavaScript into ReactJSDevTips2021-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!
Check out the Official DevTips CodePen for random projects and creations: codepen.io/devtips
All background music provided by Monstercat with a Gold subscriptionCreating A React Component WITHOUT ReactDevTips2021-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.
Check out the Official DevTips CodePen for random projects and creations: codepen.io/devtips
All background music provided by Monstercat with a Gold subscriptionWelcome the NEW HOST of the DevTips Show!DevTips2021-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.
-- 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!
Check out the Official DevTips CodePen for random projects and creations: codepen.io/devtips
All background music provided by Monstercat with a Gold subscriptionMy Setup for Design, Web Development, Video Editing and more 💻 👍DevTips2020-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 👍
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!
DevTips has a discord server called Keep On Hacking, check it out! ❤️discord.gg/JNZH3A2Create a Subscription Form from Scratch using HTML, CSS and MailChimpDevTips2020-11-16 | Create a cool MailChimp subscription form using only HTML and CSS. All you need is a MailChimp account and VS Code.
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!
DevTips has a discord server called Keep On Hacking, check it out! ❤️discord.gg/JNZH3A2Creating an Among Us Character with only HTML and CSSDevTips2020-10-29 | Learn how to create the red character from the famous mobile video game “Among Us” with only HTML and CSS.
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!
DevTips has a discord server called Keep On Hacking, check it out! ❤️discord.gg/JNZH3A2What Happened to DevTips THIS TIME??DevTips2019-06-27 | David and Mattias explain what happened to DevTips and (once again) lay out plans for the future.
💛 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/funfunfunctionMy First Progressive Web App (PWA)DevTips2019-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 iOS
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
#pwa #manifestTrying Kubernetes 📦 for the First TimeDevTips2019-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: DevTips15 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!
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
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!
#kubernetes #docker #yamlThe Future of DevTips & Fun Fun FunctionDevTips2019-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-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!
#livestreamingBest Web Development Content of 2018DevTips2018-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/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...
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!
#tips #podcasts #channels #booksTrying Docker for the First Time 📖 Many Learnings!DevTips2018-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/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.
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!
#docker #containers #imagesHow to Load Web Fonts in 2019 🎆DevTips2018-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/721720181207
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/
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!
#webfonts #performance #cssFont Loading Performance 📉 6 Experiments with FOUT & FOITDevTips2018-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/
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!
#webfonts #performance #cssQuery Parameters in JavaScript (3+1 Ways)DevTips2018-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/721320181123
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"
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!
#javascript #queryparameters #regexCritical CSS + Fail 🧨DevTips2018-11-16 | Sponsored by: .TECH, thanks! Pre-register for your .TECH domain and get a further 10% discount at https://go.tech/Devtips
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. 🍪
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!
#criticalcss #webperformance #lighthouseTeaching CSS to a Coder 🙀 (How to Lazy Load Images)DevTips2018-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/2IwUBMT
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!
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!
#css #hack #reactjsWhat is THIS in JavaScript?DevTips2018-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/2S7oHdr
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
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 #bindHow to Work with Legacy Code ☠️DevTips2018-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/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...
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!Our favourite ES2018 features 💖DevTips2018-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... 🍪
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!
#es2018 #regex #iteratorsRecursion ➰ for Paginated Web ScrapingDevTips2018-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/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
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!
#recursion #webscraping #nodejsCSS Animation with Physics Simulation 📈 (so much over-engineering ⚙️)DevTips2018-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.com
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
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!
#css #animation #physicsWeb Scraping with Node.js & Puppeteer (🌋 rants included, no extra charge)DevTips2018-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/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?!
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!
#webscraping #onlinebusiness #nodejsFinding a Designer + 🍪 FIKADevTips2018-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!
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!
#designer #marketplace #fikaLet’s Animate with CSS (and Failing Fast!)DevTips2018-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/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!
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??
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/funfunfunctionAdding a Database to Next.js 🖖 #5 Building an Online BusinessDevTips2018-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??
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!Server-side rendered data fetch in Next.js #4 Building an Online BusinessDevTips2018-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. 🤗
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 🤗.Why did we not use Ember.js?DevTips2018-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.
Learn about Ember.js emberjs.comNext.js Basics #3 Building an Online BusinessDevTips2018-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!!
Learn Next.js with their own super great free tutorial/course 🖖 nextjs.org/learnGoing from Sketch to React.js #2 Building an Online BusinessDevTips2018-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 👍: life
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
Regex Tester websites 🔗 regexpal.com 🔗 regex101.com 🔗 regexr.comAnti-MotivatedDevTips2018-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_fgXkTHE PLAN #1 Lets build an online business 💰DevTips2018-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 .com
Let's get to it!node.js basicsDevTips2018-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.
mpj on Twitter twitter.com/mpjmeRegular Expressions in JavaScript - #1 REGEX ULTRA BASICSDevTips2018-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. 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
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
In which browsers will url.searchParams work? caniuse.com/#feat=urlsearchparamsLearning to code on your mobile?DevTips2018-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?DevTips2018-05-04 | What is "programming" really? David contemplating programming and what got him started.
Would be awesome if you'd like to share in the comments below what got YOU into programming!Top 3 Dont-Need-jQueryDevTips2018-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.
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.Summary & reflections - #16 React JS prototypingDevTips2018-02-07 | Done! Having an after-work beer, looking back on what we've done and reflecting. Yas!
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
David is known as Data David discussing analytics and data - youtube.com/channel/UC0TQC6ZPNm23dU6ecc5x0GgProgrammable styling - #15 React JS prototypingDevTips2018-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.
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
David is known as Data David discussing analytics and data - youtube.com/channel/UC0TQC6ZPNm23dU6ecc5x0GgAdvanced data mangling with Promises - #14 React JS prototypingDevTips2018-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.
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
David is known as Data David discussing analytics and data - youtube.com/channel/UC0TQC6ZPNm23dU6ecc5x0GgPulling data from the Spotify API - #13 React JS prototypingDevTips2018-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).
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
David is known as Data David discussing analytics and data - youtube.com/channel/UC0TQC6ZPNm23dU6ecc5x0GgUnderstanding OAuth with the Spotify API - #12 React JS prototypingDevTips2018-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.
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
David is known as Data David discussing analytics and data - youtube.com/channel/UC0TQC6ZPNm23dU6ecc5x0GgDynamic text filtering on the client - #11 React JS prototypingDevTips2018-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.
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
David is known as Data David discussing analytics and data - youtube.com/channel/UC0TQC6ZPNm23dU6ecc5x0GgMOAR populating components with data - #10 React JS prototypingDevTips2018-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.
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