DevTips

Videos: 126 Likes: 78,257 Views: 2,943,259

Videos by: DevTips

Summary & reflections – #16 React JS prototyping

2 months ago
Done! Having an after-work beer, looking back on what we’ve done and reflecting. Yas! 🔗 All the code on Github github.com/mpj/better-playlists/ – – – In this series we’ll go from start to finish in building a fully functioning high-fidelity prototype with OAuth2 authentication and API connections fetching real data. The user will experience the prototype […]

Programmable styling – #15 React JS prototyping

2 months ago
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 Heroku better-playlists.herokuapp.com/ 🔗 This episode’s code github.com/mpj/better-playlists/tree/fc5df38f222c4f3db03316b5aafb626162283bb8 – – – In this […]

Advanced data mangling with Promises – #14 React JS prototyping

3 months ago
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 Function 🔗 Better Playlists on Heroku better-playlists.herokuapp.com/ 🔗 This episode’s code […]

Pulling data from the Spotify API – #13 React JS prototyping

3 months ago
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 Heroku better-playlists.herokuapp.com/ 🔗 This episode’s final code github.com/mpj/better-playlists/tree/3ab1533c29dd1d0c73f4ab5fc30111579d5bd521 🔗 Spotify’s Web API Endpoint Reference developer.spotify.com/web-api/endpoint-reference/ – – – In this series we’ll go from […]

Understanding OAuth with the Spotify API – #12 React JS prototyping

3 months ago
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 built better-playlists-backend.herokuapp.com/login 🔗 OAuth Bridge Template […]

Dynamic text filtering of playlists – #11 React JS prototyping

3 months ago
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 […]

MOAR populating components with data – #10 React JS prototyping

4 months ago
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 […]

Populating components with data – #9 React JS prototyping

4 months ago
Finally coding again! We begin populating our components with mock data. In doing that, we stumble upon the ternary operator and the reduce() function. More on ternary (? 🙂 operator ♥ developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/Conditional_Operator More on logical (&&) operator ♥ developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/Logical_Operators MPJ explaining .reduce() ► www.youtube.com/watch?v=Wl98eZpkp-c – – – In this series we’ll go from start to […]

Deploying to the internet! – #8 React JS prototyping

4 months ago
Yet another episode MOSTLY NOT ACCOMPLISHING MUCH! Real-world development for you. Deploying our first version of the prototype to the internet using Heroku. You’ll learn about: ♥ Heroku and deployment ♥ Different git remotes (GitHub and Heroku) ♥ The pain when GitHub is not online, but how it is OK because git is decentralized Here’s […]

First push to GitHub – #7 React JS prototyping

4 months ago
WARNING: tired programmers exerting realistic performance of not accomplishing much in this episode! Messing around with initializing a git repository and pushing it to Github. Here are the commits: github.com/mpj/better-playlists/commits/master Now you have the power to peek into the future of coming episodes. Be brave. ► Check out Travis’ earlier series on GitHub for Noobs […]

Creating a dummy overview with JSX – #6 React JS prototyping

5 months ago
By using React components we’re building a dummy overview with JSX. We follow the sketch and just get the components in place, without having real data yet. – – – 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. […]

Creating the React app – #5 React JS prototyping

5 months ago
Let’s get coding! OMG we mix HTML and JavaScript and it autoruns when we save – this is fun! Getting started with create-react-app finally. If you have problems with the global npm install, follow this guide to set correct npm permissions: docs.npmjs.com/getting-started/fixing-npm-permissions Don’t have a codetemp directory and want to create it? Type this in […]