LBRY Block Explorer

LBRY Claims • reddit-clone-with-tailwind-css

a9f3070ec890c80d981cff6bc3b18daa832ea5b7

Published By
@SuboptimalEng
Created On
1 Apr 2021 23:47:52 UTC
Transaction ID
06e32572169490c094d6cf7855fcef69d442c1f0169e703bd9716031e5b76bc8
Cost
Safe for Work
Free
Yes
Recreating the Reddit UI with Tailwind CSS - Suboptimal Clone #2
== [ Description ] ==
In this video, I go over how to clone the Reddit UI using Tailwind CSS. This is the second of many Tailwind clones that I plan to release in the coming few weeks. I'm making this series to practice my UI/web design skills and explain some of the learnings along the way. So sit back, relax, and follow along as I struggle to recreate this Reddit clone.

Note: I code this Reddit clone within Vue.js, but no prior knowledge of the framework is required to follow along. I'd also suggest watching it at 1.25 or 1.5x speed.

== [ Socials ] ==
Twitter ▶ https://twitter.com/SuboptimalEng
Github ▶ https://github.com/SuboptimalEng
Subscribe ▶ https://youtube.com/SuboptimalEng?sub_confirmation=1

== [ Links ] ==
Tailwind CSS: https://tailwindcss.com/
Vue + Tailwind CSS Setup Guide: http://youtu.be/lazG_4uUXMY
Vue + Font Awesome Setup Guide: http://youtu.be/MoDIpTuRWfM
Vue + Airbnb ESLint Setup Guide: http://www.youtu.be/gigc5XIb-BA

== [ Timestamps ] ==
00:00 Reddit UI Clone Demo
01:42 Intro
02:48 Project Setup
03:28 GitHub Template + Code
04:01 Navbar - Base Code
05:46 Navbar - Reddit Logo
10:01 Navbar - Dropdown Button
14:18 Navbar - Dropdown Div
18:36 Quick Reddit UI Recap
19:23 Navbar - Search
21:20 Navbar - Common Actions
24:28 Navbar - Reddit Coins
27:26 Navbar - Profile Section
31:16 Trending Today
36:02 Popular Section - Filter
41:08 Popular Section - Posts
45:52 Reddit UI Clone Recap
46:25 Fin

== [ Tags ] ==
#suboptimal #tailwindcss #codereview
Author
Content Type
Unspecified
video/mp4
Language
English
Open in LBRY

More from the publisher

Controlling
VIDEO
WHY I
why-i-chose-heroku-over-digitalocean-for
lbry://@SuboptimalEng/why-i-chose-heroku-over-digitalocean-for
? Overview I ramble about topics related to building and releasing web apps. ⏳ Timestamps 00:00 Intro 00:10 Full Stack Development Overview 00:53 Disclaimer for Other Services 01:53 Digital Ocean vs Heroku 04:07 Pricing for Digital Ocean vs Heroku 04:52 Why Heroku? 08:14 Final Thoughts (Tips for Engineers) ? Description In this video, I discuss my thought process for choosing Heroku over Digital Ocean for deploying my full stack web app. ⚠️ Disclaimer It's my first time with a new microphone - please ignore the accidental ASMR. ? Tech Stack Vue, NodeJS, MongoDB, Netlify, Heroku, and Mongo Atlas ? Thumbnail Inspiration https://www.youtube.com/watch?v=zckGqmJZ3xo #webdev #heroku #digitalocean ... https://www.youtube.com/watch?v=VVgENTnk_qU
Transaction
Created
2 weeks ago
Content Type
Language
video/mp4
English
Controlling
VIDEO
HOW T
basics-of-vue-debugging-in-chrome
lbry://@SuboptimalEng/basics-of-vue-debugging-in-chrome
== [ Description ] == In this basics of Vue.js video, I go over how to setup debugging in a Vue application and how to debug it in Chrome. == [ Socials ] == Twitter ▶ https://twitter.com/SuboptimalEng Github ▶ https://github.com/SuboptimalEng Blog ▶ https://suboptimaleng.github.io Subscribe ▶ https://youtube.com/SuboptimalEng?sub_confirmation=1 == [ Resources ] == Vue Debugging: https://vuejs.org/v2/cookbook/debugging-in-vscode.html == [ Timestamps ] == 00:00 Overview 01:52 Setting Up Debugging in Vue 02:57 Basic Debugging in Chrome 04:45 Quick Recap 05:19 Chrome Debugging Walkthrough 07:39 Advanced Chrome Debugging 09:47 Debugging Alternatives 11:42 Fin == [ Tags ] == #suboptimal #vuejs #debugging
Transaction
Created
2 weeks ago
Content Type
Language
video/mp4
English
Controlling
VIDEO
LEETC
leetcode-78-subsets-in-python
lbry://@SuboptimalEng/leetcode-78-subsets-in-python
?Description Hello everyone! "LeetCode in Python" is a series where I explain all solutions to popular LeetCode problems. Each video contains a theoretical section (where I explain the reasoning behind the most optimal solution) and a practical section (where I go over the Python solution). Solving these LeetCode problems has helped me land interviews and job offers from numerous companies like Amazon (SWE offer), Goldman Sachs (SWE offer), and Google (onsite). Stay tuned to learn how to crack (nearly) any coding interview. In today's "LeetCode in Python" episode, I will be going over the 78th LeetCode problem: Subsets. Please leave a like if you enjoyed the content, and subscribe if you would like to learn more about popular LeetCode problems asked during coding interviews. Thanks, and have a good one! ?Note Feel free to watch this video at 1.25 - 1.5 speed as I go through the solution(s) pretty slowly. ⏳Timestamps 00:21 Problem 00:50 Code 02:07 Explanation 04:23 Complexity ?Resources Code: https://github.com/SuboptimalEng/ LeetCode: https://leetcode.com/problems/subsets/ ?Follow me! Youtube: https://www.youtube.com/c/SuboptimalEng Reddit: https://www.reddit.com/user/SuboptimalEng Github: https://github.com/SuboptimalEng ?Music deadman 死人 - Omae Wa Mou (Tiny Little Adiantum Remix/Lil Boom - Already Dead Instrumental): https://www.youtube.com/watch?v=Ejv0Gk-mGko #leetcode #python #SuboptimalEng ... https://www.youtube.com/watch?v=LiuEfq37hqc
Transaction
Created
2 weeks ago
Content Type
Language
video/mp4
English
Controlling
VIDEO
HOW T
how-to-maximize-your-productivity-with
lbry://@SuboptimalEng/how-to-maximize-your-productivity-with
I'm a suboptimal (software) engineer at a startup in San Francisco and these are my thoughts on how to maximize your coding productivity with VSCode. == [ Timestamps ] == 00:00 Intro 00:08 Visual Studio Code Overview 01:00 File Setup 01:12 Full Stack Engineer Workflow 03:06 Vim Commands 04:12 Summary 04:51 Closing Remarks == [ Socials ] == Twitter: https://twitter.com/SuboptimalEng GitHub: https://github.com/SuboptimalEng == [ Tags ] == #vscode #coding #productivity ... https://www.youtube.com/watch?v=-_z9PMTXrfQ
Transaction
Created
2 weeks ago
Content Type
Language
video/mp4
English
Controlling
VIDEO
LEETC
leetcode-98-validate-binary-search-tree
lbry://@SuboptimalEng/leetcode-98-validate-binary-search-tree
?Description Hello everyone! "LeetCode in Python" is a series where I explain all solutions to popular LeetCode problems. Each video contains a theoretical section (where I explain the reasoning behind the most optimal solution) and a practical section (where I go over the Python solution). Solving these LeetCode problems has helped me land interviews and job offers from numerous companies like Amazon (SWE offer), Goldman Sachs (SWE offer), and Google (onsite). Stay tuned to learn how to crack (nearly) any coding interview. In today's "LeetCode in Python" episode, I will be going over the 98th LeetCode problem: Validate Binary Search Tree in Python. Please leave a like if you enjoyed the content, and subscribe if you would like to learn more about popular LeetCode problems asked during coding interviews. Thanks, and have a good one! ?Note Feel free to watch this video at 1.25 - 1.5 speed as I go through the solution(s) pretty slowly. ⏳Timestamps 00:10 Problem 01:15 Algorithm 05:24 Complexity 06:22 Python Code ?Resources Code: https://github.com/SuboptimalEng/ LeetCode: https://leetcode.com/problems/validate-binary-search-tree/ ?Music Joakim Karud, Canals: https://soundcloud.com/joakimkarud/canals-chilihop-essentials-summer-2016 #leetcode #python #suboptimaleng ... https://www.youtube.com/watch?v=ofuXorE-JKE
Transaction
Created
2 weeks ago
Content Type
Language
video/mp4
English
Controlling
VIDEO
WHY I
vue-vs-react
lbry://@SuboptimalEng/vue-vs-react
== [ Description ] == In this video, I go over my reasons for switching frontend frameworks from Vue to React. It's not an easy decision but after having spent most of 2021 learning Vue and even building a startup using Vue, it's time I make the switch. We will look at Vue.js vs React.js from the lens of building startups and analyze its community support, TypeScript integration, and job market. == [ Socials ] == Twitter ▶ https://twitter.com/SuboptimalEng Github ▶ https://github.com/SuboptimalEng Subscribe ▶ https://youtube.com/SuboptimalEng?sub_confirmation=1 == [ Timestamps ] == 00:00 Intro 00:47 Vue vs React 02:35 Community Support 04:38 TypeScript 07:33 FAANG Job Market 09:50 Final Thoughts on Vue == [ Resources] == Vue vs React: https://www.reddit.com/r/vuejs/comments/ms7wwp/vue_vs_react/ Vue 3 TypeScript: https://www.reddit.com/r/vuejs/comments/l456fl/is_vue_3_really_that_typescript_friendly == [ Tags ] == #suboptimal #vuejs #reactjs
Transaction
Created
2 weeks ago
Content Type
Language
video/mp4
English
Controlling
VIDEO
I MAD
basics-of-vue-note-taking-app
lbry://@SuboptimalEng/basics-of-vue-note-taking-app
== [ Description ] == In this basics of Vue.js video, we go over the open-source local-first Markdown editor I made using Vue, Electron.js and Tailwind CSS. == [ Socials ] == Twitter ▶ https://twitter.com/SuboptimalEng Github ▶ https://github.com/SuboptimalEng Subscribe ▶ https://youtube.com/SuboptimalEng?sub_confirmation=1 == [ Resources ] == Vue.js: https://vuejs.org/ Vuex: https://vuex.vuejs.org/ Electron: https://www.electronjs.org/ Tailwind CSS: https://tailwindcss.com/ Marked: https://marked.js.org/ CodeMirror: https://codemirror.net/ Hotkeys: https://github.com/jaywcjlove/hotkeys/ Markdown App: https://github.com/SuboptimalEng/Graphite == [ Timestamps ] == 00:00 Note-Taking App Demo 01:24 Overview 02:49 Why Make a Local-First App? 04:54 Tech Stack: Vue, Tailwind, Electron 07:09 Helpful NPM Libraries 08:37 Future Improvements 10:40 Fin == [ Tags ] == #suboptimal #vuejs #electron
Transaction
Created
2 weeks ago
Content Type
Language
video/mp4
English
Controlling
VIDEO
REDDI
reddit-navbar-ui-basics-of-tailwind-css
lbry://@SuboptimalEng/reddit-navbar-ui-basics-of-tailwind-css
== [ Description ] == Last week, I made a Reddit Clone using Tailwind CSS and learned a lot about responsive UI. In this video, I go over a specific part of that project - more specifically, I dive deep into how Reddit resizes its navbar. == [ Socials ] == Twitter ▶ https://twitter.com/SuboptimalEng Github ▶ https://github.com/SuboptimalEng Subscribe ▶ https://youtube.com/SuboptimalEng?sub_confirmation=1 == [ Timestamps ] == 00:00 Intro 00:38 Reddit Clone Navbar 01:04 Reddit's UI vs Clone's UI 03:00 Responsive Navbar with Tailwind CSS 06:58 Fin == [ Tags ] == #suboptimal #tailwindcss #redditclone
Transaction
Created
2 weeks ago
Content Type
Language
video/mp4
English
Controlling
VIDEO
WHY Y
using-react-with-typescript
lbry://@SuboptimalEng/using-react-with-typescript
== [ Description ] == I recently started learning React.js with TypeScript and wanted to test out my knowledge by coding a kanban board productivity app like Trello. In this video, we will go over some of the benefits of TypeScript, why you should use it with React, and how it can help you become a more productive developer. == [ Socials ] == Twitter ▶ https://twitter.com/SuboptimalEng Github ▶ https://github.com/SuboptimalEng Subscribe ▶ https://youtube.com/SuboptimalEng?sub_confirmation=1 == [ Resources] == React Beautiful Dnd: https://egghead.io/courses/beautiful-and-accessible-drag-and-drop-with-react-beautiful-dnd == [ Timestamps ] == 00:00 Intro 00:32 React + TypeScript App 01:58 Refactoring with TypeScript 03:57 Using React with TypeScript 05:34 Fin == [ Tags ] == #suboptimal #reactjs #typescript
Transaction
Created
2 weeks ago
Content Type
Language
video/mp4
English