LBRY Block Explorer

LBRY Claims • basics-of-vue-note-taking-app

b1a8ab8414959852e2ed3d3f96a0ba534f7ea6ab

Published By
@SuboptimalEng
Created On
13 Jun 2021 21:40:18 UTC
Transaction ID
7988d26460f66ea707855f688b902e456af09b31429a101808dc79df53309d84
Cost
Safe for Work
Free
Yes
I Made a Local-First Markdown Note-Taking App [Basics of Vue.js]
== [ 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
Author
Content Type
Unspecified
video/mp4
Language
English
Open in LBRY

More from the publisher

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
1 year ago
Content Type
Language
video/mp4
English
Controlling
VIDEO
RECRE
recreating-youtube-ui-with-tailwind-css-v2
lbry://@SuboptimalEng/recreating-youtube-ui-with-tailwind-css-v2
== [ Description ] == In this video, I go over how to clone the YouTube home page UI using Tailwind CSS. This is the first of many Tailwind clones that I plan build and make videos on, in the coming few weeks. I'm making this series to practice my UI/web design skills and explain my learnings along the way. So sit back, relax, and follow along as I struggle to recreate this YouTube clone live. Note: I code this YouTube 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/ FontAwesome: https://github.com/FortAwesome/vue-fontawesome/ == [ Timestamps ] == 00:00 YouTube UI Clone Demo 00:50 Intro 02:47 YouTube UI Explained 04:22 Project Setup with Tailwind CSS 07:40 YouTube Clone UI Overview 10:00 YouTube Clone UI Base 14:20 Font Awesome Icons 21:39 Left Navbar UI 24:28 Search Bar UI 40:41 Tags UI 45:20 Videos UI 55:18 Unhandled UI Bugs 55:46 Fin == [ Tags ] == #suboptimal #youtubeclone #tailwindcss
Transaction
Created
1 year ago
Content Type
Language
video/mp4
English
Controlling
VIDEO
LEETC
leetcode-20-valid-parentheses-in-python
lbry://@SuboptimalEng/leetcode-20-valid-parentheses-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 + colossal failure). Stay tuned to learn how to crack (nearly) any coding interview. In today's "Leetcode in Python" episode, I will be going over Valid Parentheses. 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 pretty slowly. ⏳Timestamps 00:09 Problem statement 00:29 Examples 01:50 Algorithm 05:20 Big O Complexity 06:28 The Code 10:30 Coding Example ?Resources Code: https://github.com/SuboptimalEng/ Leetcode: https://leetcode.com/problems/valid-parentheses/ #validParentheses #leetcode #python ... https://www.youtube.com/watch?v=hlbuyOgxHbs
Transaction
Created
1 year ago
Content Type
Language
video/mp4
English
Controlling
VIDEO
LEETC
leetcode-104-maximum-depth-of-a-binary
lbry://@SuboptimalEng/leetcode-104-maximum-depth-of-a-binary
?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 104th LeetCode problem: Maximum Depth of a Binary Tree. 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:17 Problem 00:52 Algorithm 06:55 Complexity 08:05 Python Code ?Resources Code: https://github.com/SuboptimalEng/ LeetCode: https://leetcode.com/problems/maximum-depth-of-binary-tree/ ?Music Joakim Karud, Canals: https://soundcloud.com/joakimkarud/canals-chilihop-essentials-summer-2016 #leetcode #python #suboptimaleng ... https://www.youtube.com/watch?v=to2XMEXE1ms
Transaction
Created
1 year ago
Content Type
Language
video/mp4
English
Controlling
VIDEO
HOW T
How-to-Setup-Vue-with-Tailwind-CSS-via-the-Vue-CLI-Basics-of-Vue.js
lbry://@SuboptimalEng/How-to-Setup-Vue-with-Tailwind-CSS-via-the-Vue-CLI-Basics-of-Vue.js
Dank Memes ▶ https://twitter.com/SuboptimalEng Github Code ▶ https://github.com/SuboptimalEng Subscribe ▶ https://youtube.com/SuboptimalEng?sub_confirmation=1 == [ Timestamps ] == 00:00 Intro 00:20 Overview 00:42 Vue CLI Setup 01:29 Vue Add Tailwind 02:11 Import Tailwind 03:15 Tailwind in Subcomponents 03:48 Fin == [ Tags ] == #suboptimal #basicsofvue #vuesetup
Transaction
Created
1 year ago
Content Type
Language
video/mp4
English
Controlling
VIDEO
HOW I
How-I-Set-Up-Vim-Mode-in-Iterm2-with-Oh-My-Zsh
lbry://@SuboptimalEng/How-I-Set-Up-Vim-Mode-in-Iterm2-with-Oh-My-Zsh
== [ Description ] == I'm Suboptimal (software) Engineer and, in this video, I go over how I set up Vi-mode in Iterm2 with the Oh My Zsh plugin. == [ Socials ] == Twitter: https://twitter.com/SuboptimalEng GitHub: https://github.com/SuboptimalEng YouTube: https://youtube.com/SuboptimalEng == [ Links ] == Dotfiles: https://github.com/SuboptimalEng/dotfiles/ Iterm2, Vim, and Oh My Zsh Explained: https://www.youtube.com/watch?v=4IvmlDJIrJ8 == [ Timestamps ] == 00:00 Intro 00:20 Vim in Terminal Demo 01:10 Prerequisite Knowledge 01:50 Enabling Vim 02:32 Problems with Vim Mode 04:15 Customizing Vim Mode 04:35 Toggle Vim Mode 05:22 Disable Vim File View 06:18 Change Cursor Style 07:35 Outro == [ Tags ] == #suboptimal #software #engineer
Transaction
Created
1 year ago
Content Type
Language
video/quicktime
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
1 year ago
Content Type
Language
video/mp4
English
Controlling
VIDEO
CODIN
vim_tutor_with_react
lbry://@SuboptimalEng/vim_tutor_with_react
== [ Description ] == In this video, we go over how to build a Vim tutor with React and CodeMirror in under 60 lines of code. We start off by setting up the frontend with CodeMirror to allow the user to run Vim commands on an editor. Then we create a challenge to teach the user about Vim keybindings. Finally, we add a React hook counter to display the number of times the programmer completed the Vim challenge. == [ Projects ] == Orbital Video File Browser ? https://www.orbital.so == [ Socials ] == Twitter ▶ https://twitter.com/SuboptimalEng Github ▶ https://github.com/SuboptimalEng YouTube ▶ https://youtube.com/SuboptimalEng Website ▶ https://suboptimaleng.com == [ Resources] == Project Inspiration: https://www.vim.so GitHub Code: https://github.com/SuboptimalEng/VimTutor Tailwind CSS: https://tailwindcss.com/docs/guides/create-react-app CodeMirror: https://www.npmjs.com/package/@uiw/react-codemirror == [ Timestamps ] == 00:00 What is Vim? 01:06 Vim Tutor Demo 01:58 Set up React with Tailwind 04:03 Set up React with CodeMirror 07:38 Build Simple Vim Editor 11:43 Create Realistic Vim Game 15:12 Update Vim Test Automatically 17:00 Create Vim Tutor Rules == [ Tags ] == #suboptimal #reactjs #vim
Transaction
Created
1 year ago
Content Type
Language
video/mp4
English
Controlling
VIDEO
CODIN
react-infinite-scroll
lbry://@SuboptimalEng/react-infinite-scroll
== [ Description ] == In this coding tutorial, we go over how to build an infinite scroller with React hooks. Learning how to build infinite scrolling is important because it is a popular coding interview question for frontend engineers and it is also used by a lot of tech companies like Facebook and Twitter. We will start off this tutorial by setting up Next.js with Tailwind CSS. Next, we will query an API with axios and load the data into a React useState hook. Finally, we will implement the infinite scroll component to load data after the user scrolls to the bottom of the page. == [ Projects ] == Orbital Video File Browser ? https://www.orbital.so == [ Socials ] == Twitter ▶ https://twitter.com/SuboptimalEng Github ▶ https://github.com/SuboptimalEng YouTube ▶ https://youtube.com/SuboptimalEng Website ▶ https://suboptimaleng.com == [ Resources] == GitHub Code: https://github.com/SuboptimalEng/CodingTutorials Next.js Setup Guide: https://nextjs.org/docs/getting-started Pokemon API: https://pokeapi.co/ == [ Timestamps ] == 00:00 What is Infinite Scroll? 00:49 Next.js Setup Guide 02:19 Request API Data with Axios 04:05 Store Data in useState Hook 06:46 Update UI with Tailwind CSS 07:55 Refactor Code with useEffect 09:05 Add Window Event Listener 10:08 Determine Page Scroll Offset 13:22 Load API Data on Scroll 15:14 Add Infinite Scroll == [ Tags ] == #suboptimal #reactjs #reacthooks
Transaction
Created
1 year ago
Content Type
Language
video/mp4
English