title
Web Development In 2021 - A Practical Guide

description
This is my yearly guide to web development. I describe web technologies that are commonly needed as well as new trends and give you multiple options to create and plan your learning path to reach your goals. Find a list of my latest Udemy courses at: https://traversymedia.com 💖 Support The Channel! http://www.patreon.com/traversymedia Timestamps: 0:00 - Intro 0:42 - What is this guide? 1:28 - Frontend vs Backend vs Full Stack 3:23 - What is your goal? 3:54 - Basic Tools 6:31 - HTML & CSS 8:24 - Sass 9:11 - CSS Frameworks 11:04 - UI Design Practices 11:49 - Vanilla JavaScript 14:38 - Some Other Tools 17:05 - Basic Frontend Deployment 18:53 - Domain Names, SSL, etc 19:55 - Foundational Frontend Developer Summary 21:00 - What Now? 21:20 - Frontend Frameworks 24:15 - State Management 26:06 - TypeScript 27:42 - Testing 28:42 - Server Side Rendering 30:34 - Static Site Generators 32:20 - Headless CMS 34:10 - The Jamstack 35:22 - Frontend Superstar Summary 36:03 - Server Side Languages 40:34 - Server Side Frameworks 44:27 - Databases 47:22 - GraphQL 49:12 - Socket.io & Real-Time Apps 49:48 - Wordpress Development 51:08 - Deployment, Servers & DevOps 55:02 - Full Stack Developer Summary 55:43 - Mobile Development 56:47 - Progressive Web Apps 57:38 - Desktop Apps With Web Tech 58:29 - AI / Machine Learning 59:17 - Web Assembly 01:00:12 - Algorithms 01:01:04 - Data Structures 01:01:40 - Software Design Patterns 01:02:09 - Wrap Up (Thank God)

detail
{'title': 'Web Development In 2021 - A Practical Guide', 'heatmap': [{'end': 1297.542, 'start': 1252.895, 'weight': 1}, {'end': 3016.634, 'start': 2973.647, 'weight': 0.74}, {'end': 3567.248, 'start': 3522.924, 'weight': 0.76}], 'summary': 'Covers the annual practical guide to web development since 2016 or 2017, emphasizing various paths for web developers, stability of existing technologies, and fresh commentary. it provides a comprehensive roadmap for web developers in 2021, focusing on front end to back end technologies, essential tools, and the importance of learning design software, front-end frameworks, static site generators, web development technologies, backend technologies, databases, graphql, real-time communication, freelance web development, hosting strategies, and essential tech skills for developers such as docker, kubernetes, flutter, react native, ai, and machine learning integration.', 'chapters': [{'end': 47.523, 'segs': [{'end': 34.942, 'src': 'embed', 'start': 7.406, 'weight': 0, 'content': [{'end': 11.068, 'text': "Hey, what's going on, guys? Welcome to my annual practical guide to web development.", 'start': 7.406, 'duration': 3.662}, {'end': 17.412, 'text': "So this is something I've done every year since I believe 2016 or 2017, and people seem to really like it.", 'start': 11.148, 'duration': 6.264}, {'end': 19.073, 'text': "It's been requested over and over.", 'start': 17.512, 'duration': 1.561}, {'end': 27.719, 'text': "So we're going to look at all the possible paths for you to take as a web developer, looking at mostly technologies like languages, frameworks, tools,", 'start': 19.173, 'duration': 8.546}, {'end': 28.179, 'text': 'et cetera.', 'start': 27.719, 'duration': 0.46}, {'end': 32.901, 'text': 'I will say that not too much has changed over the last year in terms of new tech.', 'start': 28.799, 'duration': 4.102}, {'end': 34.942, 'text': 'So you will see a lot of the same stuff.', 'start': 33.241, 'duration': 1.701}], 'summary': 'Annual practical guide to web development since 2016 or 2017, covering various technologies and paths.', 'duration': 27.536, 'max_score': 7.406, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/VfGW0Qiy2I0/pics/VfGW0Qiy2I07406.jpg'}], 'start': 7.406, 'title': 'Annual web development guide', 'summary': 'Discusses the annual practical guide to web development, conducted since 2016 or 2017, focusing on various paths for web developers, stability of existing technologies, and fresh commentary.', 'chapters': [{'end': 47.523, 'start': 7.406, 'title': 'Annual web development guide', 'summary': 'Discusses the annual practical guide to web development, which has been conducted since 2016 or 2017, focusing on various paths for web developers and the stability of existing technologies, with an emphasis on fresh commentary.', 'duration': 40.117, 'highlights': ['The annual practical guide to web development has been ongoing since 2016 or 2017, with stable technologies and fresh commentary.', 'The guide explores various paths for web developers, including languages, frameworks, and tools.']}], 'duration': 40.117, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/VfGW0Qiy2I0/pics/VfGW0Qiy2I07406.jpg', 'highlights': ['The annual practical guide to web development has been ongoing since 2016 or 2017, with stable technologies and fresh commentary.', 'The guide explores various paths for web developers, including languages, frameworks, and tools.']}, {'end': 351.894, 'segs': [{'end': 75.405, 'src': 'embed', 'start': 47.964, 'weight': 0, 'content': [{'end': 56.711, 'text': 'So this is a roadmap for web developers in 2021 that focuses mainly on technologies from front end to back end, as well as some trends and guidance.', 'start': 47.964, 'duration': 8.747}, {'end': 65.259, 'text': 'And the most important thing to keep in mind when watching this video or looking at these slides is that everyone has a different path and different goals.', 'start': 57.252, 'duration': 8.007}, {'end': 66.9, 'text': "There's no one size fits all.", 'start': 65.299, 'duration': 1.601}, {'end': 75.405, 'text': "And that's why these guides are so long, because They're full of choices depending on which path you plan to take, which language, and so on.", 'start': 67.281, 'duration': 8.124}], 'summary': 'Roadmap for web developers in 2021 covering front end to back end technologies and emphasizing individual paths and goals.', 'duration': 27.441, 'max_score': 47.964, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/VfGW0Qiy2I0/pics/VfGW0Qiy2I047964.jpg'}, {'end': 126.383, 'src': 'embed', 'start': 88.755, 'weight': 1, 'content': [{'end': 94.722, 'text': 'Now, before talking about any specific technologies, you need to figure out what type of web developer you want to be.', 'start': 88.755, 'duration': 5.967}, {'end': 99.007, 'text': "There's basically three main types, and this is just web development specifically.", 'start': 94.762, 'duration': 4.245}, {'end': 104.674, 'text': "We're not talking about other types of programming careers or DevOps specific roles or anything like that.", 'start': 99.047, 'duration': 5.627}, {'end': 111.337, 'text': 'So first of all, we have a front end developer, which is someone that deals with the front facing website or user interface.', 'start': 105.254, 'duration': 6.083}, {'end': 120.621, 'text': "We'll talk about all these technologies, but you're going to be working with HTML, CSS, SAS, JavaScript, maybe TypeScript,", 'start': 111.777, 'duration': 8.844}, {'end': 126.383, 'text': 'most likely a front end framework like React or Vue, working with the document object model and so on.', 'start': 120.621, 'duration': 5.762}], 'summary': 'To become a web developer, choose from front-end, back-end, or full-stack, and work with html, css, javascript, and frameworks like react or vue.', 'duration': 37.628, 'max_score': 88.755, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/VfGW0Qiy2I0/pics/VfGW0Qiy2I088755.jpg'}, {'end': 302.465, 'src': 'embed', 'start': 244.955, 'weight': 3, 'content': [{'end': 245.876, 'text': "That's what I prefer.", 'start': 244.955, 'duration': 0.921}, {'end': 247.456, 'text': 'Remember, these are just my choices.', 'start': 245.956, 'duration': 1.5}, {'end': 251.558, 'text': 'uh, for most web development you can use any operating system you want.', 'start': 248.016, 'duration': 3.542}, {'end': 253.659, 'text': 'windows is fine, linux is fine.', 'start': 251.558, 'duration': 2.101}, {'end': 257.361, 'text': 'i actually use mac and windows and i also use linux for my servers.', 'start': 253.659, 'duration': 3.702}, {'end': 262.963, 'text': 'so text editors or integrated development environments are used to write and compile code.', 'start': 257.361, 'duration': 5.602}, {'end': 267.566, 'text': "for most web development, you're not going to need to compile your code like you would, let's say.", 'start': 262.963, 'duration': 4.603}, {'end': 272.068, 'text': 'for you know writing desktop tools, my suggestion is visual studio code.', 'start': 267.566, 'duration': 4.502}, {'end': 276.25, 'text': 'i can say with a good amount of certainty that vs code is the most popular in the industry.', 'start': 272.068, 'duration': 4.182}, {'end': 279.213, 'text': 'You also have Sublime Text, which is pretty popular.', 'start': 276.69, 'duration': 2.523}, {'end': 281.516, 'text': "It's a little more difficult to use, in my opinion.", 'start': 279.453, 'duration': 2.063}, {'end': 283.518, 'text': 'Atom, Brackets.', 'start': 282.417, 'duration': 1.101}, {'end': 287.102, 'text': 'Vim is actually used by a lot of developers as well.', 'start': 284.038, 'duration': 3.064}, {'end': 291.046, 'text': "It's really not for me, but the people that use it seem to absolutely love it.", 'start': 287.162, 'duration': 3.884}, {'end': 296.8, 'text': 'So you also obviously need a web browser and I would suggest either Chrome or Firefox.', 'start': 291.815, 'duration': 4.985}, {'end': 302.465, 'text': "I use Chrome myself, but I'm actually thinking of switching to Firefox for a couple of reasons,", 'start': 297.06, 'duration': 5.405}], 'summary': 'Choice of tools for web development: vs code popular, chrome or firefox for browsers.', 'duration': 57.51, 'max_score': 244.955, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/VfGW0Qiy2I0/pics/VfGW0Qiy2I0244955.jpg'}], 'start': 47.964, 'title': 'Web development in 2021', 'summary': 'Provides a comprehensive roadmap for web developers in 2021, emphasizing front end to back end technologies. it also discusses the three types of web developers and essential tools needed for web development.', 'chapters': [{'end': 87.828, 'start': 47.964, 'title': 'Web development roadmap 2021', 'summary': 'Provides a comprehensive roadmap for web developers in 2021, emphasizing technologies from front end to back end, and emphasizes the importance of individual paths and goals, without promoting a one-size-fits-all approach.', 'duration': 39.864, 'highlights': ["The chapter emphasizes the importance of individual paths and goals, stating that there's no one size fits all.", 'It provides a comprehensive roadmap for web developers in 2021, covering technologies from front end to back end and offering guidance.', 'The guide includes personal choices and opinions of the presenter, but encourages viewers to consider them with a grain of salt.']}, {'end': 351.894, 'start': 88.755, 'title': 'Types of web developers and essential tools', 'summary': 'Discusses the three types of web developers: front end, back end, and full stack, along with the essential tools such as operating systems, text editors, web browsers, and terminals needed for web development.', 'duration': 263.139, 'highlights': ['There are three main types of web developers: front end, back end, and full stack, each requiring different technologies and skills. The chapter explains the distinctions between front end, back end, and full stack developers and the specific technologies and skills required for each role.', 'Front end developers work with HTML, CSS, JavaScript, and front end frameworks like React or Vue, while back end developers work server-side with languages such as JavaScript, Python, PHP, and C Sharp, and full stack developers handle both front end and back end technologies. The specific technologies and languages required for front end, back end, and full stack developers are outlined, providing an overview of the skills needed for each role.', 'Visual Studio Code is recommended as the most popular text editor for web development, along with other options like Sublime Text, Atom, Brackets, and Vim. The chapter discusses the popular text editors and integrated development environments recommended for web development, with Visual Studio Code being highlighted as the most popular choice in the industry.', 'The use of web browsers such as Chrome or Firefox, along with their front end development tools and extensions, is suggested for web development. The recommendation to use web browsers like Chrome or Firefox, and their associated front end development tools and extensions, is provided as essential for web development.', 'Essential tools like operating systems, text editors, web browsers, and terminals are highlighted as crucial for web development, with recommendations for specific tools and platforms. The essential tools required for web development, including operating systems, text editors, web browsers, and terminals, are emphasized, with specific recommendations for various tools and platforms.']}], 'duration': 303.93, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/VfGW0Qiy2I0/pics/VfGW0Qiy2I047964.jpg', 'highlights': ['The chapter provides a comprehensive roadmap for web developers in 2021, covering technologies from front end to back end and offering guidance.', 'There are three main types of web developers: front end, back end, and full stack, each requiring different technologies and skills.', 'Front end developers work with HTML, CSS, JavaScript, and front end frameworks like React or Vue, while back end developers work server-side with languages such as JavaScript, Python, PHP, and C Sharp.', 'Visual Studio Code is recommended as the most popular text editor for web development, along with other options like Sublime Text, Atom, Brackets, and Vim.', 'The use of web browsers such as Chrome or Firefox, along with their front end development tools and extensions, is suggested for web development.', 'Essential tools like operating systems, text editors, web browsers, and terminals are highlighted as crucial for web development.']}, {'end': 1187.869, 'segs': [{'end': 381.356, 'src': 'embed', 'start': 352.634, 'weight': 0, 'content': [{'end': 358.098, 'text': "Now, as far as design software, this is something that isn't required for most web developer positions.", 'start': 352.634, 'duration': 5.464}, {'end': 366.465, 'text': 'However, I would suggest that front end developers learn the basics of at least one of these just to create quick mockups and UI elements, etc.', 'start': 358.559, 'duration': 7.906}, {'end': 368.606, 'text': 'I prefer Adobe XD.', 'start': 367.185, 'duration': 1.421}, {'end': 371.608, 'text': 'You could also use Photoshop, which I use for many, many years.', 'start': 368.726, 'duration': 2.882}, {'end': 375.912, 'text': "Sketch is pretty popular, but I believe it's only available for Mac.", 'start': 372.109, 'duration': 3.803}, {'end': 381.356, 'text': "And then Figma is actually a web based utility that's really powerful as well and pretty popular.", 'start': 376.292, 'duration': 5.064}], 'summary': 'Front end developers should learn basic design software like adobe xd, photoshop, sketch, or figma for creating mockups and ui elements.', 'duration': 28.722, 'max_score': 352.634, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/VfGW0Qiy2I0/pics/VfGW0Qiy2I0352634.jpg'}, {'end': 469.265, 'src': 'embed', 'start': 434.194, 'weight': 1, 'content': [{'end': 435.895, 'text': "So you'll see that throughout the video.", 'start': 434.194, 'duration': 1.701}, {'end': 445.826, 'text': 'So for HTML, HTML5, obviously you want to learn page structure, semantic tags like header, section, aside.', 'start': 437.376, 'duration': 8.45}, {'end': 449.009, 'text': "Try not to use divs where you don't have to.", 'start': 445.906, 'duration': 3.103}, {'end': 457.919, 'text': 'Basic CSS styling, so colors, fonts, spacing with margin and padding, positioning including absolute, relative, fixed, etc.', 'start': 449.59, 'duration': 8.329}, {'end': 462.022, 'text': "alignment is really important and there's a few ways to do it.", 'start': 458.84, 'duration': 3.182}, {'end': 469.265, 'text': 'we used to use floats back in the day, but now we have flexbox and css grid, which have been a gods, a godsend.', 'start': 462.022, 'duration': 7.243}], 'summary': 'Learn html5 page structure, semantic tags, and basic css styling for web development.', 'duration': 35.071, 'max_score': 434.194, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/VfGW0Qiy2I0/pics/VfGW0Qiy2I0434194.jpg'}, {'end': 580.281, 'src': 'embed', 'start': 551.064, 'weight': 2, 'content': [{'end': 558.369, 'text': 'So next we have CSS or UI frameworks and these offer premade classes to create elements on the fly.', 'start': 551.064, 'duration': 7.305}, {'end': 561.711, 'text': 'Things like menus lists alerts and much more.', 'start': 558.429, 'duration': 3.282}, {'end': 564.953, 'text': 'Now I would suggest learning one as a front end developer.', 'start': 562.171, 'duration': 2.782}, {'end': 571.737, 'text': "So some of the popular ones are tailwind CSS which is really hot right now and it's a bit different than the others.", 'start': 565.393, 'duration': 6.344}, {'end': 580.281, 'text': 'So something like bootstrap which has been around for a while you have the CSS classes that will give you alerts, cards, and many other elements.', 'start': 572.057, 'duration': 8.224}], 'summary': 'Css frameworks like tailwind css and bootstrap offer premade classes for creating elements, such as alerts and cards, which are useful for front-end developers.', 'duration': 29.217, 'max_score': 551.064, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/VfGW0Qiy2I0/pics/VfGW0Qiy2I0551064.jpg'}, {'end': 788.736, 'src': 'embed', 'start': 761.852, 'weight': 3, 'content': [{'end': 768.573, 'text': "So the basics like variables, arrays, loops, that's all the all the first steps to learning any languages.", 'start': 761.852, 'duration': 6.721}, {'end': 772.825, 'text': 'The document object model or the DOM is extremely important.', 'start': 769.843, 'duration': 2.982}, {'end': 782.832, 'text': 'The browser treats an HTML page as a structured document and you can use JavaScript to manipulate things in that document and make it dynamic.', 'start': 772.945, 'duration': 9.887}, {'end': 788.736, 'text': 'For instance, if you want to click a button, you can have an event that will remove some other node in the DOM.', 'start': 782.912, 'duration': 5.824}], 'summary': 'Learning basics like variables, arrays, and loops are first steps in any language. the document object model (dom) is crucial for manipulating html pages with javascript to make them dynamic.', 'duration': 26.884, 'max_score': 761.852, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/VfGW0Qiy2I0/pics/VfGW0Qiy2I0761852.jpg'}, {'end': 905.055, 'src': 'embed', 'start': 878.294, 'weight': 4, 'content': [{'end': 882.697, 'text': "Now, along the way, there's going to be some other tools that you'll probably pick up, and these are some of them.", 'start': 878.294, 'duration': 4.403}, {'end': 887.701, 'text': "I wouldn't say that these are required except for version control with Git.", 'start': 882.838, 'duration': 4.863}, {'end': 891.905, 'text': "That's something that just about every type of developer is going to need to learn.", 'start': 887.761, 'duration': 4.144}, {'end': 894.987, 'text': 'So version control is really important, specifically Git.', 'start': 892.425, 'duration': 2.562}, {'end': 898.229, 'text': "Just about every company you'll work for will use Git.", 'start': 895.667, 'duration': 2.562}, {'end': 905.055, 'text': "It's a way to save, track and version your code as well as work on code bases with other developers.", 'start': 899.23, 'duration': 5.825}], 'summary': 'Version control with git is essential for developers, used by almost every company.', 'duration': 26.761, 'max_score': 878.294, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/VfGW0Qiy2I0/pics/VfGW0Qiy2I0878294.jpg'}, {'end': 1174.43, 'src': 'embed', 'start': 1144.688, 'weight': 5, 'content': [{'end': 1146.69, 'text': 'These are just services that I use myself.', 'start': 1144.688, 'duration': 2.002}, {'end': 1149.172, 'text': "They're also great for email hosting.", 'start': 1147.53, 'duration': 1.642}, {'end': 1153.796, 'text': 'If you use something like Netlify, you can point your domain to Netlify,', 'start': 1149.512, 'duration': 4.284}, {'end': 1158.32, 'text': 'your main domain and then set up your email hosting at somewhere like Namecheap.', 'start': 1153.796, 'duration': 4.524}, {'end': 1165.284, 'text': 'SSL is secure sockets layer so that everything is encrypted through HTTPS.', 'start': 1159.3, 'duration': 5.984}, {'end': 1170.067, 'text': "I wouldn't suggest deploying anything that isn't HTTPS these days.", 'start': 1165.784, 'duration': 4.283}, {'end': 1174.43, 'text': 'Netlify comes with a free SSL and so do some other services.', 'start': 1170.547, 'duration': 3.883}], 'summary': 'Netlify offers free ssl for secure encrypted hosting, recommended for email hosting.', 'duration': 29.742, 'max_score': 1144.688, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/VfGW0Qiy2I0/pics/VfGW0Qiy2I01144688.jpg'}], 'start': 352.634, 'title': 'Front end development essentials', 'summary': 'Covers the importance of learning design software like adobe xd, photoshop, sketch, and figma, and essential tools and languages for front end development, including html, css, javascript, and associated tools and frameworks.', 'chapters': [{'end': 390.466, 'start': 352.634, 'title': 'Web developer design software', 'summary': 'Discusses the importance of front-end developers learning design software like adobe xd, photoshop, sketch, and figma to create quick mockups and ui elements, especially for freelancing and client mockups.', 'duration': 37.832, 'highlights': ['Front-end developers should learn design software like Adobe XD, Photoshop, Sketch, and Figma to create quick mockups and UI elements, especially for freelancing and client mockups.', "Learning design software is not required for most web developer positions, but it's beneficial for creating quick mockups and UI elements.", 'Adobe XD, Photoshop, Sketch, and Figma are popular design software options for front-end developers.', "Figma is a web-based utility that's powerful and popular for creating mockups and UI elements."]}, {'end': 1187.869, 'start': 391.536, 'title': 'Front end development essentials', 'summary': 'Covers essential tools and languages for front end development, including the importance of learning html, css, javascript, and various associated tools and frameworks, as well as hosting and domain setup considerations.', 'duration': 796.333, 'highlights': ['Learning HTML and CSS is essential for every web developer, including basic page structure, semantic tags, basic CSS styling, flexbox, CSS grid, transitions, animations, and responsive design. HTML and CSS are fundamental for web development, covering page structure, semantic tags, basic CSS styling, flexbox, CSS grid, transitions, animations, and responsive design, which are crucial for creating user-friendly and visually appealing websites.', 'SAS is recommended for both front end and full stack developers due to its special features and ease of learning. SAS, a CSS preprocessor, offers special features such as variables, functions, and nesting, making it beneficial for front end and full stack developers due to its ease of learning and potential usefulness in development projects.', 'Understanding UI frameworks like Tailwind CSS and Bootstrap is important for front end developers, with Tailwind CSS offering high customizability and Bootstrap being widely used. Front end developers should understand UI frameworks like Tailwind CSS and Bootstrap, with Tailwind CSS offering high customizability and Bootstrap being widely used, enhancing the development of user interfaces.', 'Basic understanding of user interface design principles and practices is beneficial for front end developers, even if the visual design is not their primary role. Front end developers can benefit from a basic understanding of user interface design principles, enabling them to contribute to the visual appeal and usability of web applications, even if visual design is not their primary responsibility.', 'Learning JavaScript, including variables, arrays, loops, DOM manipulation, array methods, JSON, and HTTP requests, is crucial for front end and full stack developers. JavaScript knowledge, covering variables, arrays, loops, DOM manipulation, array methods, JSON, and HTTP requests, is essential for front end and full stack developers, providing the foundation for creating dynamic and interactive web applications.', 'Version control with Git, and familiarity with other developer tools like package managers, module bundlers, and browser dev tools, are important for effective and collaborative development. Version control with Git, along with other developer tools like package managers, module bundlers, and browser dev tools, are crucial for efficient and collaborative development, enhancing code management and workflow.', 'Understanding various hosting options, domain setup, and SSL considerations is essential for making web applications live on the internet. Comprehensive understanding of hosting options, domain setup, and SSL considerations is crucial for deploying web applications, ensuring their availability and security on the internet.']}], 'duration': 835.235, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/VfGW0Qiy2I0/pics/VfGW0Qiy2I0352634.jpg', 'highlights': ['Front-end developers should learn design software like Adobe XD, Photoshop, Sketch, and Figma to create quick mockups and UI elements, especially for freelancing and client mockups.', 'Learning HTML and CSS is essential for every web developer, including basic page structure, semantic tags, basic CSS styling, flexbox, CSS grid, transitions, animations, and responsive design.', 'Understanding UI frameworks like Tailwind CSS and Bootstrap is important for front end developers, with Tailwind CSS offering high customizability and Bootstrap being widely used.', 'Learning JavaScript, including variables, arrays, loops, DOM manipulation, array methods, JSON, and HTTP requests, is crucial for front end and full stack developers.', 'Version control with Git, and familiarity with other developer tools like package managers, module bundlers, and browser dev tools, are important for effective and collaborative development.', 'Understanding various hosting options, domain setup, and SSL considerations is essential for making web applications live on the internet.']}, {'end': 1722.671, 'segs': [{'end': 1297.542, 'src': 'heatmap', 'start': 1252.895, 'weight': 1, 'content': [{'end': 1258.603, 'text': 'So to me, in my opinion, knowing how to do all that makes you a foundational front end developer.', 'start': 1252.895, 'duration': 5.708}, {'end': 1262.399, 'text': 'right. so what now?', 'start': 1260.137, 'duration': 2.262}, {'end': 1266.021, 'text': 'so it, this really depends on the path you want to take.', 'start': 1262.399, 'duration': 3.622}, {'end': 1273.166, 'text': "you could keep sharpening your javascript skills and start doing algorithms or more advanced javascript, which we'll talk about later.", 'start': 1266.021, 'duration': 7.145}, {'end': 1280.03, 'text': 'if you want to stick to front end, move to a front-end framework like react, or you could start to learn the back end.', 'start': 1273.166, 'duration': 6.864}, {'end': 1282.532, 'text': "so we're going to go ahead and go with front end,", 'start': 1280.03, 'duration': 2.502}, {'end': 1290.837, 'text': "because this is kind of the the most popular path people take is going from what we've already talked about to then learning something like React.", 'start': 1282.532, 'duration': 8.305}, {'end': 1297.542, 'text': 'So as a front end developer, like I said, you most likely need to learn some kind of JavaScript framework.', 'start': 1291.779, 'duration': 5.763}], 'summary': 'To become a foundational front end developer, focus on javascript and consider learning react.', 'duration': 44.647, 'max_score': 1252.895, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/VfGW0Qiy2I0/pics/VfGW0Qiy2I01252895.jpg'}, {'end': 1346.311, 'src': 'embed', 'start': 1318.954, 'weight': 0, 'content': [{'end': 1326.058, 'text': 'Also, working with a framework and a team makes it much easier, because you have a lot of standards that every developer is going to follow,', 'start': 1318.954, 'duration': 7.104}, {'end': 1330.781, 'text': 'rather than this jumbled JavaScript that you created that no one else understands.', 'start': 1326.058, 'duration': 4.723}, {'end': 1336.825, 'text': "And it's important to mention that you can use any framework in the front end with any language on the server.", 'start': 1331.382, 'duration': 5.443}, {'end': 1346.311, 'text': 'So React can be used for the user interface and then you can have your API or your back end written in Java, Python, C Sharp, whatever it might be.', 'start': 1336.925, 'duration': 9.386}], 'summary': 'Using a framework and team standards simplifies development, with flexibility to pair react with various server-side languages.', 'duration': 27.357, 'max_score': 1318.954, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/VfGW0Qiy2I0/pics/VfGW0Qiy2I01318954.jpg'}, {'end': 1520.929, 'src': 'embed', 'start': 1493.213, 'weight': 1, 'content': [{'end': 1499.555, 'text': 'So React has the built in context API to handle state, which is great for smaller apps or medium sized apps.', 'start': 1493.213, 'duration': 6.342}, {'end': 1506.478, 'text': 'However, if you plan on having a lot of different types of data, you know authentication, whatever it might be,', 'start': 1499.915, 'duration': 6.563}, {'end': 1508.779, 'text': 'whatever types of data your application holds.', 'start': 1506.478, 'duration': 2.301}, {'end': 1514.403, 'text': 'You probably want to look into Redux, which is a really popular state manager for React.', 'start': 1509.259, 'duration': 5.144}, {'end': 1520.929, 'text': "I prefer it over the context API, but a lot of people, you know, they don't want to add something if they don't have to.", 'start': 1514.564, 'duration': 6.365}], 'summary': "React's context api is suitable for smaller to medium apps, but for managing diverse data, consider redux.", 'duration': 27.716, 'max_score': 1493.213, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/VfGW0Qiy2I0/pics/VfGW0Qiy2I01493213.jpg'}, {'end': 1565.832, 'src': 'embed', 'start': 1536.688, 'weight': 2, 'content': [{'end': 1539.751, 'text': 'So VueX works really, really well for state management.', 'start': 1536.688, 'duration': 3.063}, {'end': 1541.32, 'text': 'Angular is a bit different.', 'start': 1540.299, 'duration': 1.021}, {'end': 1544.221, 'text': "Like I said before, it's a larger framework.", 'start': 1541.34, 'duration': 2.881}, {'end': 1545.382, 'text': "It's more full-featured.", 'start': 1544.281, 'duration': 1.101}, {'end': 1551.785, 'text': 'It has built-in services that you can use to spread state or spread data across your components.', 'start': 1545.722, 'duration': 6.063}, {'end': 1557.208, 'text': 'However, there are also third-party state managers like NGRX.', 'start': 1552.105, 'duration': 5.103}, {'end': 1561.51, 'text': 'And then for Svelte, Svelte has a built-in context API as well.', 'start': 1557.748, 'duration': 3.762}, {'end': 1565.832, 'text': "I'm not really too sure on third-party state managers for Svelte.", 'start': 1561.55, 'duration': 4.282}], 'summary': 'Vuex excels in state management. angular is larger with built-in services. svelte has a built-in context api.', 'duration': 29.144, 'max_score': 1536.688, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/VfGW0Qiy2I0/pics/VfGW0Qiy2I01536688.jpg'}, {'end': 1625.116, 'src': 'embed', 'start': 1598.744, 'weight': 3, 'content': [{'end': 1603.626, 'text': 'It basically is JavaScript, but it has some additional features such as static types.', 'start': 1598.744, 'duration': 4.882}, {'end': 1608.309, 'text': 'For me, I do mostly smaller to medium sized projects, mostly for teaching.', 'start': 1604.107, 'duration': 4.202}, {'end': 1611.07, 'text': "So I personally don't really use TypeScript that much.", 'start': 1608.389, 'duration': 2.681}, {'end': 1616.233, 'text': 'I have used it on a large production project and I can definitely see the benefits.', 'start': 1611.63, 'duration': 4.603}, {'end': 1619.134, 'text': 'It helps you find errors before they occur.', 'start': 1616.793, 'duration': 2.341}, {'end': 1620.894, 'text': 'It makes your code more robust.', 'start': 1619.214, 'duration': 1.68}, {'end': 1625.116, 'text': 'On the other hand, it is something else to learn and it is more code to type.', 'start': 1621.715, 'duration': 3.401}], 'summary': 'Typescript offers benefits like error prevention and robust code, but may require additional learning and typing effort.', 'duration': 26.372, 'max_score': 1598.744, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/VfGW0Qiy2I0/pics/VfGW0Qiy2I01598744.jpg'}, {'end': 1705.238, 'src': 'embed', 'start': 1681.502, 'weight': 4, 'content': [{'end': 1688.726, 'text': "It can feel kind of like a waste of time when you start learning testing, but ultimately it's going to save you time once you know how to utilize it.", 'start': 1681.502, 'duration': 7.224}, {'end': 1691.007, 'text': "There's different types of testing.", 'start': 1689.546, 'duration': 1.461}, {'end': 1695.511, 'text': "There's unit tests, which will test individual units like functions or classes.", 'start': 1691.047, 'duration': 4.464}, {'end': 1700.975, 'text': 'Integration tests will test modules as a group, so multiple functions, etc.', 'start': 1695.971, 'duration': 5.004}, {'end': 1705.238, 'text': 'And then end-to-end testing for your entire workflow from start to finish.', 'start': 1701.456, 'duration': 3.782}], 'summary': 'Learning testing may seem like a waste of time, but it saves time in the end. different types include unit, integration, and end-to-end testing.', 'duration': 23.736, 'max_score': 1681.502, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/VfGW0Qiy2I0/pics/VfGW0Qiy2I01681502.jpg'}], 'start': 1187.889, 'title': 'Essential frontend development skills', 'summary': 'Covers essential skills for front end development, including setting up a productive environment, working with html, css, and javascript, using front end frameworks like react, and the importance of choosing the right framework based on industry demand and personal preference. it also delves into frontend state management using frameworks such as react, vue, angular, and svelte, and emphasizes the importance of using state managers like redux. additionally, it touches upon the benefits of learning typescript and testing in frontend and backend development, including unit tests, integration tests, and end-to-end testing.', 'chapters': [{'end': 1454.319, 'start': 1187.889, 'title': 'Front end development essentials', 'summary': 'Highlights the essential skills needed to become a foundational front end developer, including setting up a productive development environment, working with html, css, and javascript, using front end frameworks like react, and the importance of choosing the right framework based on industry demand and personal preference.', 'duration': 266.43, 'highlights': ['Front end developer skills The ability to set up a productive development environment, work with HTML, CSS, JavaScript, use SAS and a CSS framework, create responsive layouts, build websites with dynamic functionality, connect to third party APIs, use Git with GitHub, and deploy and manage basic front end websites or web apps.', 'Importance of front end frameworks Front end frameworks such as React allow for the creation of single page web apps with intricate user interfaces, making development easier and more efficient compared to vanilla JavaScript, and enabling standardization in team development.', 'Comparison of front end frameworks The speaker shares insights into popular front end frameworks like React, Vue, Angular, and Svelte, highlighting their differences in learning curve, industry popularity, backing by companies, and suitability for different project sizes and types.']}, {'end': 1722.671, 'start': 1455.006, 'title': 'Frontend state management and testing overview', 'summary': 'Discusses frontend state management using various frameworks such as react, vue, angular, and svelte, and highlights the importance of using state managers like redux for handling global state. it also touches upon the optional but beneficial aspects of learning typescript and testing in frontend and backend development, including the types of testing like unit tests, integration tests, and end-to-end testing.', 'duration': 267.665, 'highlights': ["React's built-in context API for state is suitable for smaller apps, whereas Redux is recommended for managing various data types, with Redux being the most popular third-party state manager for React. React's context API for smaller apps, Redux for managing various data types", "VueX is recommended for state management in Vue, while Angular provides built-in services for spreading state across components and also offers third-party state managers like NGRX. VueX for state management in Vue, Angular's built-in services and NGRX for state management", 'TypeScript, although optional, offers benefits such as static types which help in finding errors before they occur, making the code more robust, and can be used with front-end and back-end frameworks. Benefits of TypeScript, usage with front-end and back-end frameworks', 'Testing is crucial for saving time in the long run and includes unit tests, integration tests, and end-to-end testing, applicable to both front-end and back-end development. Importance of testing, types of testing - unit, integration, end-to-end testing']}], 'duration': 534.782, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/VfGW0Qiy2I0/pics/VfGW0Qiy2I01187889.jpg', 'highlights': ['Front end frameworks like React enable easier and more efficient development compared to vanilla JavaScript.', "React's built-in context API is suitable for smaller apps, while Redux is recommended for managing various data types.", 'VueX is recommended for state management in Vue, while Angular provides built-in services for spreading state across components.', 'TypeScript offers benefits such as static types which help in finding errors before they occur, making the code more robust.', 'Testing is crucial for saving time in the long run and includes unit tests, integration tests, and end-to-end testing.']}, {'end': 2033.279, 'segs': [{'end': 1881.243, 'src': 'embed', 'start': 1788.594, 'weight': 0, 'content': [{'end': 1792.354, 'text': "This isn't good for SEO because web crawlers can't see your content.", 'start': 1788.594, 'duration': 3.76}, {'end': 1798.195, 'text': "Now, there's other ways around this, but using an SSR framework does it by default.", 'start': 1792.754, 'duration': 5.441}, {'end': 1801.756, 'text': 'It also makes routing easier because you simply name a file,', 'start': 1798.355, 'duration': 3.401}, {'end': 1806.157, 'text': 'you put it in a specific directory and it loads that file in the browser when you go to that URL.', 'start': 1801.756, 'duration': 4.401}, {'end': 1809.158, 'text': 'And it can also boost performance.', 'start': 1807.257, 'duration': 1.901}, {'end': 1813.679, 'text': "As far as which one you choose, it's most likely based on your framework of choice.", 'start': 1809.618, 'duration': 4.061}, {'end': 1816.039, 'text': 'So for React, you have Next.js.', 'start': 1814.099, 'duration': 1.94}, {'end': 1826.062, 'text': "For Vue. you have Nuxt.js, which is basically Next for Vue, Angular Universal for Angular and then Sapper for Svelte, which I've actually never used.", 'start': 1816.52, 'duration': 9.542}, {'end': 1833.384, 'text': 'Again, you want to learn the framework first and kind of master that and then look into things like server-side rendering.', 'start': 1827.022, 'duration': 6.362}, {'end': 1841.666, 'text': 'Now. another really popular trend right now is static site generators, which have actually been around for a while,', 'start': 1835.222, 'duration': 6.444}, {'end': 1844.928, 'text': "but they've become much more powerful in the past couple of years.", 'start': 1841.666, 'duration': 3.262}, {'end': 1850.451, 'text': "Instead of generating your site pages in real time, they're generated at build time,", 'start': 1845.428, 'duration': 5.023}, {'end': 1854.313, 'text': "meaning that there's no generation of HTML or calls to a database.", 'start': 1850.451, 'duration': 3.862}, {'end': 1856.875, 'text': 'It just responds with the file itself.', 'start': 1854.553, 'duration': 2.322}, {'end': 1860.156, 'text': 'This makes your website very fast and easy to host.', 'start': 1857.355, 'duration': 2.801}, {'end': 1868.079, 'text': 'You can actually host your site on a CDN, which is a content delivery network where your files can be replicated around the world.', 'start': 1860.876, 'duration': 7.203}, {'end': 1870.42, 'text': "And it's really, really fast.", 'start': 1868.599, 'duration': 1.821}, {'end': 1878.203, 'text': "Now, when we say static site, it doesn't necessarily mean that you can't have dynamic functionality or work with data.", 'start': 1871.34, 'duration': 6.863}, {'end': 1881.243, 'text': 'For instance, Gatsby, which is React based,', 'start': 1878.583, 'duration': 2.66}], 'summary': 'Ssr frameworks like next.js and static site generators like gatsby can boost seo and performance by simplifying routing, while static site generators allow fast hosting on cdns.', 'duration': 92.649, 'max_score': 1788.594, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/VfGW0Qiy2I0/pics/VfGW0Qiy2I01788594.jpg'}, {'end': 1997.709, 'src': 'embed', 'start': 1970.392, 'weight': 3, 'content': [{'end': 1975.317, 'text': "It's used strictly for the data part, and you can add whatever you want for the front end.", 'start': 1970.392, 'duration': 4.925}, {'end': 1981.122, 'text': 'A popular option is to use something like Gatsby, which we just talked about, a static site generator,', 'start': 1975.637, 'duration': 5.485}, {'end': 1983.965, 'text': 'and then connect to a headless CMS to get your content.', 'start': 1981.122, 'duration': 2.843}, {'end': 1988.847, 'text': "So you could have a blog or, i don't know, a recipe index or whatever it might be.", 'start': 1984.005, 'duration': 4.842}, {'end': 1990.167, 'text': "now there's a bunch of options.", 'start': 1988.847, 'duration': 1.32}, {'end': 1992.248, 'text': 'i personally like strappy.', 'start': 1990.167, 'duration': 2.081}, {'end': 1993.948, 'text': "it's an open source node.js.", 'start': 1992.248, 'duration': 1.7}, {'end': 1997.709, 'text': 'headless cms that you host yourself.', 'start': 1993.948, 'duration': 3.761}], 'summary': 'Use gatsby with headless cms like strapi for dynamic web content.', 'duration': 27.317, 'max_score': 1970.392, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/VfGW0Qiy2I0/pics/VfGW0Qiy2I01970392.jpg'}], 'start': 1722.731, 'title': 'Front-end frameworks & static site generators', 'summary': 'Covers the importance of server-side rendering for seo, performance, and routing, and recommends mastering a front-end framework before delving into ssr frameworks. it also discusses the rise in popularity of static site generators, highlighting their benefits in terms of speed, ease of hosting, and dynamic functionality, along with the role of headless cms in separating content management from front-end presentation.', 'chapters': [{'end': 1833.384, 'start': 1722.731, 'title': 'Server-side rendering and front end frameworks', 'summary': 'Explains the importance of server-side rendering for seo, performance, and routing, and recommends mastering a front end framework before delving into ssr frameworks, such as next.js for react and nuxt.js for vue.', 'duration': 110.653, 'highlights': ['The chapter emphasizes the significance of server-side rendering for SEO, performance, and routing, particularly in contrast to single page applications, and suggests mastering a front end framework before exploring SSR frameworks.', 'Using an SSR framework by default improves SEO as it enables web crawlers to see the content, simplifies routing, and can enhance performance, thus providing quantifiable benefits for website visibility, user experience, and speed.', 'Specific SSR frameworks for different front end frameworks are recommended, such as Next.js for React, Nuxt.js for Vue, Angular Universal for Angular, and Sapper for Svelte, with a suggestion to prioritize learning the chosen front end framework before diving into SSR.']}, {'end': 2033.279, 'start': 1835.222, 'title': 'Static site generators and headless cms', 'summary': 'Discusses the rise in popularity of static site generators, highlighting their benefits in terms of speed, ease of hosting, and dynamic functionality, along with the role of headless cms in separating content management from front-end presentation.', 'duration': 198.057, 'highlights': ['Static site generators like Gatsby and Gridsome enable fast and easy-to-host websites, utilizing CDN for global replication and offering dynamic functionality with React components and GraphQL. Gatsby and Gridsome are examples of static site generators that provide fast and easy hosting, dynamic functionality using React components and GraphQL, and the ability to use multiple content sources.', 'Headless CMS, such as Strappy and Sanity.io, allow for separating content management from front-end presentation, offering options for self-hosting or premium hosted services with generous free packages. Headless CMS options like Strappy and Sanity.io enable the separation of content management from front-end presentation, with options for self-hosting or premium hosted services with generous free packages available.', 'Static site generators and headless CMS are becoming increasingly popular, with options available for various programming languages including React, Vue.js, Ruby, and Golang. Static site generators and headless CMS are gaining popularity, with options available for different programming languages such as React, Vue.js, Ruby, and Golang.']}], 'duration': 310.548, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/VfGW0Qiy2I0/pics/VfGW0Qiy2I01722731.jpg', 'highlights': ['Using an SSR framework by default improves SEO, simplifies routing, and enhances performance, providing quantifiable benefits for website visibility, user experience, and speed.', 'Specific SSR frameworks for different front end frameworks are recommended, such as Next.js for React, Nuxt.js for Vue, Angular Universal for Angular, and Sapper for Svelte, with a suggestion to prioritize learning the chosen front end framework before diving into SSR.', 'Static site generators like Gatsby and Gridsome enable fast and easy-to-host websites, utilizing CDN for global replication and offering dynamic functionality with React components and GraphQL.', 'Headless CMS, such as Strappy and Sanity.io, allow for separating content management from front-end presentation, offering options for self-hosting or premium hosted services with generous free packages.', 'Static site generators and headless CMS are becoming increasingly popular, with options available for various programming languages including React, Vue.js, Ruby, and Golang.']}, {'end': 2643.624, 'segs': [{'end': 2076.164, 'src': 'embed', 'start': 2033.299, 'weight': 0, 'content': [{'end': 2040.022, 'text': 'And then WordPress can also be used as a headless CMS because it has a REST API built into it.', 'start': 2033.299, 'duration': 6.723}, {'end': 2049.106, 'text': 'So you can actually have WordPress as your CMS, but you could use Gatsby or you could use just plain old React on the front end along with it.', 'start': 2040.362, 'duration': 8.744}, {'end': 2056.26, 'text': "now the last few slides, the last few technologies that we've talked about can fit into what's called the jam stack.", 'start': 2050.299, 'duration': 5.961}, {'end': 2065.062, 'text': "okay, it's a web architecture with high performance, security and scalability at low cost, and it stands for javascript, apis and markup,", 'start': 2056.26, 'duration': 8.802}, {'end': 2066.702, 'text': "which aren't new concepts.", 'start': 2065.062, 'duration': 1.64}, {'end': 2074.204, 'text': 'but what is new is the way that we use them, and james quick actually did a really good video on the channel called what is the jam stack,', 'start': 2066.702, 'duration': 7.502}, {'end': 2076.164, 'text': 'and he goes into depth on this.', 'start': 2074.204, 'duration': 1.96}], 'summary': 'Wordpress can be used as a headless cms with rest api. jam stack offers high performance, security, and scalability at low cost.', 'duration': 42.865, 'max_score': 2033.299, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/VfGW0Qiy2I0/pics/VfGW0Qiy2I02033299.jpg'}, {'end': 2158.913, 'src': 'embed', 'start': 2126.866, 'weight': 2, 'content': [{'end': 2128.627, 'text': "It's simply the options that you have.", 'start': 2126.866, 'duration': 1.761}, {'end': 2132.069, 'text': 'Some things you should know in order to be a front end.', 'start': 2128.767, 'duration': 3.302}, {'end': 2140.513, 'text': 'superstar is how to build websites, web apps and interfaces with a front end framework, work with components in global state,', 'start': 2132.069, 'duration': 8.444}, {'end': 2146.536, 'text': 'connect to a back end or third party API using endpoints and, if possible, learn some testing.', 'start': 2140.513, 'duration': 6.023}, {'end': 2154.867, 'text': "And then there's some optional things to think about, like TypeScript, Jamstack technologies, static site generators, serverless functions,", 'start': 2147.457, 'duration': 7.41}, {'end': 2158.913, 'text': 'all that stuff which I would say optional to be a front-end developer.', 'start': 2154.867, 'duration': 4.046}], 'summary': 'Key skills for a front-end developer include building websites, web apps, and interfaces with a front-end framework, working with components and global state, connecting to back end or third-party apis using endpoints, and possibly learning testing. optional skills to consider include typescript, jamstack technologies, static site generators, and serverless functions.', 'duration': 32.047, 'max_score': 2126.866, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/VfGW0Qiy2I0/pics/VfGW0Qiy2I02126866.jpg'}, {'end': 2292.619, 'src': 'embed', 'start': 2207.321, 'weight': 3, 'content': [{'end': 2212.664, 'text': 'so I would give it some time before making it your go-to server-side technology.', 'start': 2207.321, 'duration': 5.343}, {'end': 2215.886, 'text': 'Just dabble in it for now is my suggestion at least.', 'start': 2212.724, 'duration': 3.162}, {'end': 2222.689, 'text': 'Python is, of course, very popular in the AI machine learning world, automation.', 'start': 2217.102, 'duration': 5.587}, {'end': 2224.932, 'text': "It's also really popular in web development.", 'start': 2222.989, 'duration': 1.943}, {'end': 2227.635, 'text': "It has some really great frameworks, which I'll talk about in a minute.", 'start': 2224.972, 'duration': 2.663}, {'end': 2232.001, 'text': 'But Python is a great language to learn just in general for many things.', 'start': 2227.935, 'duration': 4.066}, {'end': 2237.789, 'text': 'So you have C sharp dot net, also an available option for the back end.', 'start': 2232.825, 'duration': 4.964}, {'end': 2240.711, 'text': "I know a little bit of C sharp and I'd like to learn more.", 'start': 2237.849, 'duration': 2.862}, {'end': 2242.172, 'text': "It's very clean and structured.", 'start': 2240.771, 'duration': 1.401}, {'end': 2246.295, 'text': 'I see a lot of larger companies using C sharp, at least around where I am.', 'start': 2242.492, 'duration': 3.803}, {'end': 2250.538, 'text': 'Golang is another language that was created by Google.', 'start': 2247.135, 'duration': 3.403}, {'end': 2255.561, 'text': "It's similar to C, but with things like garbage collection and memory safety.", 'start': 2250.578, 'duration': 4.983}, {'end': 2257.843, 'text': "So it's easier to learn than a language like C.", 'start': 2255.901, 'duration': 1.942}, {'end': 2260.464, 'text': "it's also extremely powerful.", 'start': 2258.343, 'duration': 2.121}, {'end': 2264.925, 'text': "it's often used for programming across large-scale servers.", 'start': 2260.464, 'duration': 4.461}, {'end': 2269.487, 'text': "it's used a lot in the, you know, the big business enterprise world.", 'start': 2264.925, 'duration': 4.562}, {'end': 2276.889, 'text': "so ruby is another language and when it comes to web development, you'll probably be using ruby on rails, which is a framework.", 'start': 2269.487, 'duration': 7.402}, {'end': 2280.01, 'text': 'if you do choose ruby, i personally love ruby on rails.', 'start': 2276.889, 'duration': 3.121}, {'end': 2281.091, 'text': "it's not.", 'start': 2280.01, 'duration': 1.081}, {'end': 2285.172, 'text': "it's great for rapid development and it includes a ton of integrated tools.", 'start': 2281.091, 'duration': 4.081}, {'end': 2287.514, 'text': "You may hear people say that Ruby's dead.", 'start': 2285.592, 'duration': 1.922}, {'end': 2292.619, 'text': "However, I don't suggest really listening to people on the Internet, even myself.", 'start': 2287.934, 'duration': 4.685}], 'summary': 'Python is popular in ai, machine learning, and web development. c# is clean and used by large companies. golang is powerful and used for large-scale servers. ruby on rails is great for rapid web development.', 'duration': 85.298, 'max_score': 2207.321, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/VfGW0Qiy2I0/pics/VfGW0Qiy2I02207321.jpg'}, {'end': 2362.44, 'src': 'embed', 'start': 2317.319, 'weight': 7, 'content': [{'end': 2320.801, 'text': 'So PHP is another one that kind of gets a lot of hate on the Internet.', 'start': 2317.319, 'duration': 3.482}, {'end': 2326.844, 'text': "However, I think most people that hate on PHP really haven't used it or haven't used it in a really long time.", 'start': 2320.841, 'duration': 6.003}, {'end': 2331.026, 'text': "There's still a huge number of websites running PHP, so it's still relevant.", 'start': 2327.244, 'duration': 3.782}, {'end': 2336.389, 'text': 'You know, it might not be used at the you know the thing, companies or whatever,', 'start': 2331.947, 'duration': 4.442}, {'end': 2343.116, 'text': "but Especially if you're doing freelancing for small business websites and web apps, PHP can be a really good option.", 'start': 2336.389, 'duration': 6.727}, {'end': 2351.465, 'text': 'It also runs WordPress, which is still used a lot for small business websites and personal websites and so on.', 'start': 2343.136, 'duration': 8.329}, {'end': 2354.228, 'text': "And I'll talk about WordPress a little more later on.", 'start': 2351.866, 'duration': 2.362}, {'end': 2359.776, 'text': 'So Java is probably the most relevant in the big business world.', 'start': 2355.009, 'duration': 4.767}, {'end': 2362.44, 'text': 'Java was the first language that I ever used.', 'start': 2359.896, 'duration': 2.544}], 'summary': 'Php remains relevant with a large number of websites running it; java is prominent in big business.', 'duration': 45.121, 'max_score': 2317.319, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/VfGW0Qiy2I0/pics/VfGW0Qiy2I02317319.jpg'}, {'end': 2402.189, 'src': 'embed', 'start': 2378.874, 'weight': 9, 'content': [{'end': 2387.337, 'text': 'So Kotlin is being used in a lot of places where Java used to be used, including Android development, but it can also be used in web development.', 'start': 2378.874, 'duration': 8.463}, {'end': 2394.363, 'text': "So these are not all, but but a lot of the more popular languages you're going to see used in the world of web development.", 'start': 2387.817, 'duration': 6.546}, {'end': 2402.189, 'text': "And by no means is this a comparison or am I saying any any of these is better than the other? I don't do those types of videos.", 'start': 2394.883, 'duration': 7.306}], 'summary': 'Kotlin is increasingly used in place of java, including android and web development.', 'duration': 23.315, 'max_score': 2378.874, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/VfGW0Qiy2I0/pics/VfGW0Qiy2I02378874.jpg'}, {'end': 2503.639, 'src': 'embed', 'start': 2479.383, 'weight': 10, 'content': [{'end': 2486.888, 'text': 'Nest.js is a larger, more full-featured framework that actually uses TypeScript by default, and it kind of reminds me of Angular,', 'start': 2479.383, 'duration': 7.505}, {'end': 2487.748, 'text': 'but on the back end.', 'start': 2486.888, 'duration': 0.86}, {'end': 2490.21, 'text': 'So Angular and Nest might be a good combination.', 'start': 2487.828, 'duration': 2.382}, {'end': 2492.131, 'text': 'Loopback is another one.', 'start': 2490.99, 'duration': 1.141}, {'end': 2494.873, 'text': 'You can easily create REST APIs with a GUI tool.', 'start': 2492.171, 'duration': 2.702}, {'end': 2503.639, 'text': "Express is definitely the main Node.js framework that's used, and many other frameworks are based off of Express.", 'start': 2495.293, 'duration': 8.346}], 'summary': 'Nest.js and loopback are frameworks for creating rest apis. express is the main node.js framework.', 'duration': 24.256, 'max_score': 2479.383, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/VfGW0Qiy2I0/pics/VfGW0Qiy2I02479383.jpg'}, {'end': 2555.297, 'src': 'embed', 'start': 2529.448, 'weight': 11, 'content': [{'end': 2537.451, 'text': "And Flask is also really good because it's a nice alternative to Django, where Django is very high level.", 'start': 2529.448, 'duration': 8.003}, {'end': 2541.472, 'text': 'Flask is low level and minimalistic, but it gives you a lot of freedom.', 'start': 2537.451, 'duration': 4.021}, {'end': 2546.174, 'text': "It doesn't have all the bells and whistles of Django, but you get a ton of freedom to do the things you want.", 'start': 2541.492, 'duration': 4.682}, {'end': 2555.297, 'text': "And it's actually pretty similar to Express, in my opinion, in terms of how things are done with requests and response or whatever,", 'start': 2546.274, 'duration': 9.023}], 'summary': 'Flask offers freedom and minimalism compared to django, similar to express in handling requests and responses.', 'duration': 25.849, 'max_score': 2529.448, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/VfGW0Qiy2I0/pics/VfGW0Qiy2I02529448.jpg'}, {'end': 2620.533, 'src': 'embed', 'start': 2571.133, 'weight': 12, 'content': [{'end': 2577.837, 'text': 'You also have Symfony, which Laravel is actually based off of Symfony reusable components.', 'start': 2571.133, 'duration': 6.704}, {'end': 2581.7, 'text': 'Symfony, it organizes code in a very clean way.', 'start': 2578.458, 'duration': 3.242}, {'end': 2583.781, 'text': 'It is a little harder to learn than Laravel.', 'start': 2581.72, 'duration': 2.061}, {'end': 2587.346, 'text': "But it's a decent framework, slim in my, I should say.", 'start': 2584.301, 'duration': 3.045}, {'end': 2594.657, 'text': 'in my opinion, slim is another PHP framework that I particularly like for just creating simple rest APIs.', 'start': 2587.346, 'duration': 7.311}, {'end': 2598.784, 'text': 'Again, it kind of reminds me of Express, but for PHP.', 'start': 2596.06, 'duration': 2.724}, {'end': 2604.267, 'text': 'so c sharp has the has asp.net, which is really powerful.', 'start': 2599.745, 'duration': 4.522}, {'end': 2606.187, 'text': 'of course it uses the dot net framework.', 'start': 2604.267, 'duration': 1.92}, {'end': 2614.951, 'text': "i don't have much experience with it, but it is a rel, a well-respected choice, and it's used a lot in, you know, in the business world.", 'start': 2606.187, 'duration': 8.764}, {'end': 2620.533, 'text': 'java has the spring mvc framework, which is obviously an mvc model.', 'start': 2614.951, 'duration': 5.582}], 'summary': "Symfony, laravel's base, is clean but harder to learn. slim is good for simple rest apis. asp.net in c# is powerful and widely used, while java has the spring mvc framework.", 'duration': 49.4, 'max_score': 2571.133, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/VfGW0Qiy2I0/pics/VfGW0Qiy2I02571133.jpg'}], 'start': 2033.299, 'title': 'Web development technologies', 'summary': 'Discusses wordpress as a headless cms with rest api, the jamstack architecture, and the importance of learning front-end and back-end technologies. it also provides an overview of popular web development languages and compares various programming frameworks, recommending popular ones for different use cases.', 'chapters': [{'end': 2207.321, 'start': 2033.299, 'title': 'Front-end and back-end technologies', 'summary': 'Discusses utilizing wordpress as a headless cms with rest api for front-end development, introduces the jamstack architecture with its emphasis on performance, security, and scalability, and emphasizes the importance of learning front-end and back-end technologies for web development.', 'duration': 174.022, 'highlights': ['The chapter discusses utilizing WordPress as a headless CMS with REST API for front-end development. WordPress can be used as a headless CMS with a REST API, allowing integration with front-end technologies like Gatsby and React.', 'Introduces the Jamstack architecture with its emphasis on performance, security, and scalability. The Jamstack is a web architecture focusing on high performance, security, and scalability at low cost, utilizing JavaScript, APIs, and markup.', 'Emphasizes the importance of learning front-end and back-end technologies for web development. Front-end developers are advised to learn front-end frameworks, work with components and global state, and connect to back-end or third-party APIs, while back-end or full-stack developers are recommended to learn a server-side language like Node.js or Deno.']}, {'end': 2394.363, 'start': 2207.321, 'title': 'Popular web development languages overview', 'summary': 'Provides an overview of popular web development languages, including python, c#, golang, ruby, php, java, and kotlin, highlighting their relevance and usage in the industry.', 'duration': 187.042, 'highlights': ['Python is popular in AI, machine learning, and web development, with great frameworks, making it versatile for various applications. Python is widely used in AI, machine learning, and web development, with versatile frameworks and is popular for automation.', 'C# is clean, structured, and favored by larger companies for backend development. C# is favored by larger companies for backend development due to its clean, structured nature.', 'Golang is powerful, easier to learn than C, and widely used for large-scale server programming in the enterprise world. Golang is powerful, easier to learn than C, and widely used for large-scale server programming in the enterprise world.', 'Ruby, particularly Ruby on Rails, is great for rapid web development despite decreased industry relevance. Ruby, especially Ruby on Rails, is great for rapid web development despite reduced industry relevance.', 'PHP, although criticized, remains relevant for small business websites, web apps, and runs WordPress. PHP remains relevant for small business websites, web apps, and runs WordPress despite facing criticism.', 'Java is highly relevant in the big business world and commonly used for web development. Java is highly relevant in the big business world and commonly used for web development.', 'Kotlin, a newer language, is replacing Java in various applications, including Android and web development. Kotlin, a newer language, is replacing Java in various applications, including Android and web development.']}, {'end': 2643.624, 'start': 2394.883, 'title': 'Comparing programming frameworks', 'summary': 'Provides an overview of various programming frameworks like node.js, python, php, and c sharp, highlighting their key features and recommending popular frameworks like express, django, flask, laravel, and asp.net, for different use cases.', 'duration': 248.741, 'highlights': ['Express is the most popular framework for Node.js, allowing easy customization of HTTP request response cycle, middleware creation, and routing endpoints. Node.js uses Express as the main framework, with other frameworks like Koa, Nest.js, and Loopback being good alternatives.', 'Django is a full-featured framework with a complete admin area, while Flask offers a low-level, minimalistic approach with more freedom. Django provides a high-level feature set, while Flask offers more freedom and flexibility.', 'Laravel is the preferred framework for PHP due to its elegance, while Symfony offers clean code organization but with a steeper learning curve. Laravel is favored for its elegance, while Symfony is known for its clean code organization, albeit being more challenging to learn.', "asp.net is a powerful framework for C Sharp, widely used in the business world, and Java utilizes the spring mvc framework, following the model view controller design pattern. asp.net is respected for its power and usage in the business world, while Java's spring mvc framework follows the model view controller design pattern."]}], 'duration': 610.325, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/VfGW0Qiy2I0/pics/VfGW0Qiy2I02033299.jpg', 'highlights': ['WordPress can be used as a headless CMS with a REST API, allowing integration with front-end technologies like Gatsby and React.', 'The Jamstack is a web architecture focusing on high performance, security, and scalability at low cost, utilizing JavaScript, APIs, and markup.', 'Front-end developers are advised to learn front-end frameworks, work with components and global state, and connect to back-end or third-party APIs.', 'Python is widely used in AI, machine learning, and web development, with versatile frameworks and is popular for automation.', 'C# is favored by larger companies for backend development due to its clean, structured nature.', 'Golang is powerful, easier to learn than C, and widely used for large-scale server programming in the enterprise world.', 'Ruby, especially Ruby on Rails, is great for rapid web development despite reduced industry relevance.', 'PHP remains relevant for small business websites, web apps, and runs WordPress despite facing criticism.', 'Java is highly relevant in the big business world and commonly used for web development.', 'Kotlin, a newer language, is replacing Java in various applications, including Android and web development.', 'Node.js uses Express as the main framework, with other frameworks like Koa, Nest.js, and Loopback being good alternatives.', 'Django provides a high-level feature set, while Flask offers more freedom and flexibility.', 'Laravel is favored for its elegance, while Symfony is known for its clean code organization, albeit being more challenging to learn.', "asp.net is respected for its power and usage in the business world, while Java's spring mvc framework follows the model view controller design pattern."]}, {'end': 3001.946, 'segs': [{'end': 2666.065, 'src': 'embed', 'start': 2644.124, 'weight': 1, 'content': [{'end': 2653.329, 'text': 'Ruby on Rails, again, full featured framework for Ruby, also an MVC framework, has a lot of built in tools and allows you to build things really fast.', 'start': 2644.124, 'duration': 9.205}, {'end': 2662.258, 'text': "And then Kotlin, which I personally don't have any experience with, has the Javelin framework and Ktor, which I couldn't tell you anything about.", 'start': 2653.925, 'duration': 8.333}, {'end': 2666.065, 'text': "So if you're interested in Kotlin, I suggest doing a lot more research.", 'start': 2662.359, 'duration': 3.706}], 'summary': 'Ruby on rails is a full-featured and fast framework for ruby, while kotlin offers javelin framework and ktor, requiring further research.', 'duration': 21.941, 'max_score': 2644.124, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/VfGW0Qiy2I0/pics/VfGW0Qiy2I02644124.jpg'}, {'end': 2764.949, 'src': 'embed', 'start': 2713.822, 'weight': 2, 'content': [{'end': 2717.424, 'text': 'You have Postgres, which is my relational database of choice.', 'start': 2713.822, 'duration': 3.602}, {'end': 2723.026, 'text': 'I would use Postgres with just about any language and framework, including Node and Express.', 'start': 2718.564, 'duration': 4.462}, {'end': 2725.968, 'text': 'I also use it with Python, PHP.', 'start': 2723.547, 'duration': 2.421}, {'end': 2731.81, 'text': 'MySQL is is the one that I used for years back when I was doing a lot of PHP.', 'start': 2726.828, 'duration': 4.982}, {'end': 2736.713, 'text': 'Postgres is still really popular, especially in the PHP world.', 'start': 2733.391, 'duration': 3.322}, {'end': 2741.015, 'text': 'You might also look at Microsoft SQL Server Oracle.', 'start': 2736.773, 'duration': 4.242}, {'end': 2746.017, 'text': "There's a lot of different relational databases out there that have been around forever.", 'start': 2741.095, 'duration': 4.922}, {'end': 2752.681, 'text': 'So Firebase is a cloud database and I really wanted to to include this in the list,', 'start': 2746.838, 'duration': 5.843}, {'end': 2756.884, 'text': 'because I personally really like it for smaller to medium sized projects.', 'start': 2752.681, 'duration': 4.203}, {'end': 2759.145, 'text': "It's basically an entire platform.", 'start': 2757.384, 'duration': 1.761}, {'end': 2764.949, 'text': 'It has data and file storage authentication, pretty easy API to use.', 'start': 2759.165, 'duration': 5.784}], 'summary': 'Postgres is popular across languages, firebase suitable for smaller projects.', 'duration': 51.127, 'max_score': 2713.822, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/VfGW0Qiy2I0/pics/VfGW0Qiy2I02713822.jpg'}, {'end': 2822.136, 'src': 'embed', 'start': 2792.193, 'weight': 5, 'content': [{'end': 2795.595, 'text': "It's not something I have a lot of experience with but I do see it used quite a bit.", 'start': 2792.193, 'duration': 3.402}, {'end': 2800.278, 'text': 'Object relational mappers or object data mappers are really important.', 'start': 2796.655, 'duration': 3.623}, {'end': 2805.022, 'text': 'They give you an abstract layer for your application to interact with your database.', 'start': 2800.618, 'duration': 4.404}, {'end': 2808.405, 'text': "So a lot of the times you don't have to actually write SQL queries.", 'start': 2805.402, 'duration': 3.003}, {'end': 2814.79, 'text': 'For instance, you just have this API that you use to interact with your database.', 'start': 2808.465, 'duration': 6.325}, {'end': 2818.233, 'text': 'Mongoose is really popular with Node.js and MongoDB.', 'start': 2814.89, 'duration': 3.343}, {'end': 2822.136, 'text': 'SQLize also used for Postgres.', 'start': 2818.753, 'duration': 3.383}], 'summary': 'Object relational mappers provide an abstract layer for interacting with databases, with examples like mongoose for node.js and mongodb, and sqlize for postgres.', 'duration': 29.943, 'max_score': 2792.193, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/VfGW0Qiy2I0/pics/VfGW0Qiy2I02792193.jpg'}, {'end': 2893.676, 'src': 'embed', 'start': 2869.084, 'weight': 0, 'content': [{'end': 2878.788, 'text': 'Now GraphQL is used in a similar way, except Instead of having all these different endpoints that return all this different data,', 'start': 2869.084, 'duration': 9.704}, {'end': 2885.631, 'text': "even stuff you don't need, GraphQL provides a single endpoint and you can make queries based on the data that you need,", 'start': 2878.788, 'duration': 6.843}, {'end': 2887.152, 'text': "so you don't have to get everything.", 'start': 2885.631, 'duration': 1.521}, {'end': 2893.676, 'text': "If it's an API where You know, it has a bunch of user information and all you need is the first and last name.", 'start': 2887.432, 'duration': 6.244}], 'summary': 'Graphql reduces unnecessary data retrieval by enabling targeted queries, improving efficiency.', 'duration': 24.592, 'max_score': 2869.084, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/VfGW0Qiy2I0/pics/VfGW0Qiy2I02869084.jpg'}, {'end': 2936.973, 'src': 'embed', 'start': 2915.107, 'weight': 4, 'content': [{'end': 2927.41, 'text': "There's a popular client called Apollo that can be used on its own or with a framework like React to communicate with a GraphQL server which you can implement with Node.js and other languages as well.", 'start': 2915.107, 'duration': 12.303}, {'end': 2933.612, 'text': "It's more targeted than a traditional REST API and it saves you a bunch of trips to the server.", 'start': 2928.13, 'duration': 5.482}, {'end': 2936.973, 'text': 'And it also works great with real-time applications.', 'start': 2934.132, 'duration': 2.841}], 'summary': 'Apollo client for graphql reduces server trips, suits real-time apps', 'duration': 21.866, 'max_score': 2915.107, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/VfGW0Qiy2I0/pics/VfGW0Qiy2I02915107.jpg'}, {'end': 3009.07, 'src': 'embed', 'start': 2980.831, 'weight': 6, 'content': [{'end': 2988.376, 'text': "And there's all types of apps and services that you can build that utilize WebSockets, like instant messaging and chat applications,", 'start': 2980.831, 'duration': 7.545}, {'end': 2993.438, 'text': 'real-time analytics, document collaboration, binary streaming and much more.', 'start': 2988.376, 'duration': 5.062}, {'end': 2997.681, 'text': 'So I think apps with real-time communication are only gonna get more popular.', 'start': 2993.558, 'duration': 4.123}, {'end': 3001.946, 'text': 'All right, so I can actually hear some of you cringing right now, but if you are,', 'start': 2998.544, 'duration': 3.402}, {'end': 3009.07, 'text': "it's probably because you haven't done a lot of freelance web development for smaller websites or for for people that are on a budget.", 'start': 3001.946, 'duration': 7.124}], 'summary': 'Websockets enable real-time apps like instant messaging, analytics, and document collaboration, increasing in popularity.', 'duration': 28.239, 'max_score': 2980.831, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/VfGW0Qiy2I0/pics/VfGW0Qiy2I02980831.jpg'}], 'start': 2644.124, 'title': 'Backend technologies, databases, graphql, and real-time communication', 'summary': 'Discusses ruby on rails, kotlin frameworks, relational databases like postgres, nosql databases like firebase, and object relational mappers. it also explains the role of graphql as a back end data query language for apis, its advantages over rest apis, compatibility with javascript, and relevance in real-time applications.', 'chapters': [{'end': 2842.473, 'start': 2644.124, 'title': 'Back end technologies and databases', 'summary': 'Discusses ruby on rails and kotlin frameworks, as well as various types of databases including relational databases like postgres and nosql databases like firebase, highlighting the importance of object relational mappers in working with databases.', 'duration': 198.349, 'highlights': ['Ruby on Rails is a full featured framework for Ruby and allows fast development. Ruby on Rails is a full featured framework for Ruby that enables rapid development.', 'Postgres is a popular relational database choice, widely used with Node, Express, Python, and PHP. Postgres is widely used with various languages and frameworks such as Node, Express, Python, and PHP.', 'Firebase is recommended for smaller to medium sized projects, offering data and file storage, authentication, and an easy-to-use API. Firebase is suitable for smaller to medium sized projects, providing data and file storage, authentication, and a user-friendly API.', 'Object relational mappers provide an abstract layer for database interaction, reducing the need to write SQL queries. Object relational mappers offer an abstract layer for database interactions, minimizing the need for direct SQL queries.']}, {'end': 3001.946, 'start': 2842.533, 'title': 'Understanding graphql and real-time communication', 'summary': 'Explains the role of graphql as a back end data query language for apis, its advantages over rest apis in providing a single endpoint for tailored data retrieval, its compatibility with javascript and real-time applications, and the increasing relevance of real-time communication in various app and service types.', 'duration': 159.413, 'highlights': ['GraphQL serves as a back end data query language for APIs, offering a single endpoint for tailored data retrieval, reducing the need to fetch unnecessary data, and formatted similarly to JSON, making it easy to learn for JavaScript users.', 'GraphQL is more targeted than traditional REST APIs, compatible with real-time applications, and can be used with Node.js and other languages, offering efficiency in communication and reducing server trips.', 'Real-time communication through WebSockets, such as in socket.io, enables bi-directional communication through events, leading to the popularity of real-time apps for various purposes like instant messaging, chat applications, and document collaboration.']}], 'duration': 357.822, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/VfGW0Qiy2I0/pics/VfGW0Qiy2I02644124.jpg', 'highlights': ['GraphQL offers a single endpoint for tailored data retrieval, reducing the need to fetch unnecessary data.', 'Ruby on Rails enables rapid development and is a full featured framework for Ruby.', 'Postgres is widely used with various languages and frameworks such as Node, Express, Python, and PHP.', 'Firebase is suitable for smaller to medium sized projects, providing data and file storage, authentication, and a user-friendly API.', 'GraphQL is more targeted than traditional REST APIs, compatible with real-time applications, and can be used with Node.js and other languages.', 'Object relational mappers offer an abstract layer for database interactions, minimizing the need for direct SQL queries.', 'Real-time communication through WebSockets enables bi-directional communication through events, leading to the popularity of real-time apps.']}, {'end': 3914.549, 'segs': [{'end': 3048.852, 'src': 'embed', 'start': 3021.837, 'weight': 0, 'content': [{'end': 3028.902, 'text': 'But if you plan on building websites and small apps for the mom and pop shop down the street, WordPress can be a good choice.', 'start': 3021.837, 'duration': 7.065}, {'end': 3033.204, 'text': "I'm not saying it's the best choice or anything like that, but it can be used.", 'start': 3029.202, 'duration': 4.002}, {'end': 3037.647, 'text': 'I actually used it quite a bit when I was freelancing, and that was a while ago.', 'start': 3033.264, 'duration': 4.383}, {'end': 3041.97, 'text': 'But I do still know quite a few people that are freelancing and using WordPress.', 'start': 3037.687, 'duration': 4.283}, {'end': 3044.571, 'text': "and i don't just mean knowing how to install it.", 'start': 3042.37, 'duration': 2.201}, {'end': 3048.852, 'text': 'and you know install some third-party template with some third-party plugins.', 'start': 3044.571, 'duration': 4.281}], 'summary': 'Wordpress is a good choice for building websites and small apps for local businesses, with many freelancers still using it.', 'duration': 27.015, 'max_score': 3021.837, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/VfGW0Qiy2I0/pics/VfGW0Qiy2I03021837.jpg'}, {'end': 3126.606, 'src': 'embed', 'start': 3104.758, 'weight': 1, 'content': [{'end': 3114.543, 'text': 'DigitalOcean is a cloud hosting company, and it gives you full control over everything down to what operating system you want to install.', 'start': 3104.758, 'duration': 9.785}, {'end': 3121.965, 'text': 'And this takes a lot more knowledge than using something like Heroku, which is basically a platform as a service.', 'start': 3115.203, 'duration': 6.762}, {'end': 3125.065, 'text': 'And many things are already set up for you.', 'start': 3122.625, 'duration': 2.44}, {'end': 3126.606, 'text': "It's just there for you to use.", 'start': 3125.085, 'duration': 1.521}], 'summary': "Digitalocean offers full control over hosting, unlike heroku's platform as a service.", 'duration': 21.848, 'max_score': 3104.758, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/VfGW0Qiy2I0/pics/VfGW0Qiy2I03104758.jpg'}, {'end': 3207.052, 'src': 'embed', 'start': 3177.152, 'weight': 2, 'content': [{'end': 3179.173, 'text': 'Nginx and Apache are really popular.', 'start': 3177.152, 'duration': 2.021}, {'end': 3180.834, 'text': "I'd suggest Nginx.", 'start': 3179.673, 'duration': 1.161}, {'end': 3182.775, 'text': "It's easier to configure, in my opinion.", 'start': 3180.914, 'duration': 1.861}, {'end': 3186.118, 'text': 'It works well with Node.js, which is what I specialize in.', 'start': 3183.176, 'duration': 2.942}, {'end': 3188.239, 'text': 'It works well with PHP.', 'start': 3186.138, 'duration': 2.101}, {'end': 3194.463, 'text': "If you use some kind of platform as a service like Heroku, you probably won't have to do much configuration, though.", 'start': 3188.92, 'duration': 5.543}, {'end': 3202.789, 'text': "So it's going to depend on where you're working and what you're doing as to how much of this type of stuff you're going to need to know.", 'start': 3194.543, 'duration': 8.246}, {'end': 3207.052, 'text': 'so containers are something you may want to get into.', 'start': 3203.689, 'duration': 3.363}], 'summary': 'Nginx, recommended over apache, is easier to configure and works well with node.js and php. consider containers for future use.', 'duration': 29.9, 'max_score': 3177.152, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/VfGW0Qiy2I0/pics/VfGW0Qiy2I03177152.jpg'}, {'end': 3259.105, 'src': 'embed', 'start': 3234.171, 'weight': 3, 'content': [{'end': 3242.634, 'text': 'You can install specific pieces of software in a container such as an Apache server, a Postgres database, basically whatever you want.', 'start': 3234.171, 'duration': 8.463}, {'end': 3249.377, 'text': 'Kubernetes is often used with Docker, which is a system for automating the management of containers.', 'start': 3243.655, 'duration': 5.722}, {'end': 3254.22, 'text': "I don't have much experience in it, but it is extremely popular in the DevOps world.", 'start': 3249.758, 'duration': 4.462}, {'end': 3259.105, 'text': 'So, for image and video hosting, you can use a local method,', 'start': 3255.1, 'duration': 4.005}], 'summary': 'Kubernetes is popular for container management, used with docker, for devops.', 'duration': 24.934, 'max_score': 3234.171, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/VfGW0Qiy2I0/pics/VfGW0Qiy2I03234171.jpg'}, {'end': 3385.83, 'src': 'embed', 'start': 3358.892, 'weight': 4, 'content': [{'end': 3369.116, 'text': 'Flutter is an open source user interface software development kit or SDK, and actually uses a language called Dart, which, if you know JavaScript,', 'start': 3358.892, 'duration': 10.224}, {'end': 3370.437, 'text': 'is pretty easy to pick up.', 'start': 3369.116, 'duration': 1.321}, {'end': 3375.459, 'text': 'Flutter is extremely powerful and it allows you to build native mobile applications.', 'start': 3370.597, 'duration': 4.862}, {'end': 3377.801, 'text': 'This is what I prefer out of the list.', 'start': 3376.139, 'duration': 1.662}, {'end': 3385.83, 'text': 'However, if you already know React, you may want to get into React Native, which is a framework for building native mobile apps with React.', 'start': 3377.861, 'duration': 7.969}], 'summary': 'Flutter, powered by dart, is powerful for native mobile apps; react native is an alternative for react users.', 'duration': 26.938, 'max_score': 3358.892, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/VfGW0Qiy2I0/pics/VfGW0Qiy2I03358892.jpg'}, {'end': 3452.871, 'src': 'embed', 'start': 3423.454, 'weight': 5, 'content': [{'end': 3427.038, 'text': "And there's a few things that your app needs to be considered a PWA.", 'start': 3423.454, 'duration': 3.584}, {'end': 3431.625, 'text': 'It needs to be built for all screen sizes, big and small.', 'start': 3427.538, 'duration': 4.087}, {'end': 3435.412, 'text': "It should serve offline content if there's no connection.", 'start': 3431.806, 'duration': 3.606}, {'end': 3438.878, 'text': 'And this can be done through the use of service workers in the browser.', 'start': 3435.732, 'duration': 3.146}, {'end': 3444.165, 'text': "So you definitely want to look into service workers if you're looking to learn progressive web apps.", 'start': 3439.501, 'duration': 4.664}, {'end': 3446.326, 'text': 'It needs to be HTTPS.', 'start': 3444.665, 'duration': 1.661}, {'end': 3449.589, 'text': 'It should have a native experience and feel.', 'start': 3447.227, 'duration': 2.362}, {'end': 3452.871, 'text': 'You can even make them installable with splash screens, etc.', 'start': 3449.629, 'duration': 3.242}], 'summary': 'Pwa must consider screen sizes, serve offline, use service workers, be https, and provide a native experience.', 'duration': 29.417, 'max_score': 3423.454, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/VfGW0Qiy2I0/pics/VfGW0Qiy2I03423454.jpg'}, {'end': 3494.842, 'src': 'embed', 'start': 3469.29, 'weight': 6, 'content': [{'end': 3478.735, 'text': 'In fact, many of the really popular desktop apps today are based on Electron, such as VS Code, Atom, which is another text editor, Slack,', 'start': 3469.29, 'duration': 9.445}, {'end': 3480.116, 'text': 'Postman and many others.', 'start': 3478.735, 'duration': 1.381}, {'end': 3484.839, 'text': 'In fact, a lot of the desktop apps that I use are Electron-based.', 'start': 3480.176, 'duration': 4.663}, {'end': 3490.721, 'text': "NWJS is an alternative to Electron, which it's also JavaScript.", 'start': 3485.839, 'duration': 4.882}, {'end': 3494.842, 'text': 'Then you have technologies like Python, Tkinter.', 'start': 3491.041, 'duration': 3.801}], 'summary': 'Electron is the basis of many popular desktop apps like vs code, atom, slack, and postman, with many others also being electron-based.', 'duration': 25.552, 'max_score': 3469.29, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/VfGW0Qiy2I0/pics/VfGW0Qiy2I03469290.jpg'}, {'end': 3573.052, 'src': 'heatmap', 'start': 3521.784, 'weight': 7, 'content': [{'end': 3522.784, 'text': "It's only going to get bigger.", 'start': 3521.784, 'duration': 1}, {'end': 3524.945, 'text': "AI, it's only going to get bigger from here.", 'start': 3522.924, 'duration': 2.021}, {'end': 3532.447, 'text': "So if you want to create or integrate automation and tools that use AI, there's machine learning APIs you can work with.", 'start': 3525.045, 'duration': 7.402}, {'end': 3538.029, 'text': "It's used to understand user behavior of web apps, engagement, analytics.", 'start': 3532.947, 'duration': 5.082}, {'end': 3542.214, 'text': "There's also AI tools that can be used to actually write code.", 'start': 3538.689, 'duration': 3.525}, {'end': 3543.896, 'text': 'Just check out GPT-3.', 'start': 3542.254, 'duration': 1.642}, {'end': 3546.56, 'text': 'I know this scares a lot of developers.', 'start': 3544.797, 'duration': 1.763}, {'end': 3550.645, 'text': 'However, I think of it as a tool that we can use in the future.', 'start': 3546.64, 'duration': 4.005}, {'end': 3556.152, 'text': "I don't think that AI is going to completely replace human developers, at least for a very long time.", 'start': 3550.685, 'duration': 5.467}, {'end': 3557.342, 'text': 'All right.', 'start': 3557.082, 'duration': 0.26}, {'end': 3563.186, 'text': 'So the last technology that I want to mention, specific technology is WebAssembly or Wasm.', 'start': 3557.362, 'duration': 5.824}, {'end': 3567.248, 'text': 'And Wasm is an efficient, low level bytecode for the Web.', 'start': 3563.826, 'duration': 3.422}, {'end': 3573.052, 'text': "It's an improvement to JavaScript, meaning it can do much more powerful things in specific areas.", 'start': 3567.308, 'duration': 5.744}], 'summary': 'Ai and webassembly are growing technologies with potential for automation and improved web capabilities.', 'duration': 51.268, 'max_score': 3521.784, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/VfGW0Qiy2I0/pics/VfGW0Qiy2I03521784.jpg'}, {'end': 3723.274, 'src': 'embed', 'start': 3699.681, 'weight': 8, 'content': [{'end': 3707.705, 'text': 'Now, as you become a more advanced developer and write more intricate code, you might want to look into specific software design patterns,', 'start': 3699.681, 'duration': 8.024}, {'end': 3712.467, 'text': 'which are general reusable solutions to commonly occurring problems.', 'start': 3707.705, 'duration': 4.762}, {'end': 3717.31, 'text': 'And design patterns are language agnostic, just like algorithms and data structures.', 'start': 3712.667, 'duration': 4.643}, {'end': 3723.274, 'text': 'Some examples are the singleton facade, bridge strategy and observer pattern,', 'start': 3717.71, 'duration': 5.564}], 'summary': 'Developers should explore software design patterns for advanced coding, such as singleton, facade, bridge, strategy, and observer patterns.', 'duration': 23.593, 'max_score': 3699.681, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/VfGW0Qiy2I0/pics/VfGW0Qiy2I03699681.jpg'}, {'end': 3786.49, 'src': 'embed', 'start': 3759.574, 'weight': 9, 'content': [{'end': 3768.24, 'text': 'and then go through this video or these slides and pick out the fundamentals and the necessary technologies for that path.', 'start': 3759.574, 'duration': 8.666}, {'end': 3770.921, 'text': "If you're gonna freelance, you might have a different path.", 'start': 3768.64, 'duration': 2.281}, {'end': 3776.625, 'text': "If you're gonna build your own applications and try to sell them or license them out, you might have a different path.", 'start': 3770.981, 'duration': 5.644}, {'end': 3778.826, 'text': 'But just be sure to have a plan.', 'start': 3777.085, 'duration': 1.741}, {'end': 3780.267, 'text': 'And I know plans change.', 'start': 3778.866, 'duration': 1.401}, {'end': 3786.49, 'text': "I've went from freelancing to working for a company, back to freelancing and you know, starting my own business,", 'start': 3780.347, 'duration': 6.143}], 'summary': 'Plan your career path based on your goals, whether freelance or building applications, and be adaptable to changes.', 'duration': 26.916, 'max_score': 3759.574, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/VfGW0Qiy2I0/pics/VfGW0Qiy2I03759574.jpg'}, {'end': 3874.382, 'src': 'embed', 'start': 3841.906, 'weight': 10, 'content': [{'end': 3846.75, 'text': "because you need to prove yourself, especially if you're self-taught, as I am, and you don't have a degree.", 'start': 3841.906, 'duration': 4.844}, {'end': 3849.233, 'text': 'So I think a portfolio is really important.', 'start': 3847.191, 'duration': 2.042}, {'end': 3851.795, 'text': 'Also, networking is really important.', 'start': 3849.893, 'duration': 1.902}, {'end': 3857.888, 'text': 'Online. create social media accounts that are specific, specifically for professional reasons.', 'start': 3852.215, 'duration': 5.673}, {'end': 3860.37, 'text': 'LinkedIn, really important Twitter.', 'start': 3857.888, 'duration': 2.482}, {'end': 3866.696, 'text': 'Twitter has a fantastic developer community and even creating YouTube tutorials, if you can.', 'start': 3860.37, 'duration': 6.326}, {'end': 3874.382, 'text': "I mean I'm not saying go into content creation as a living, but it's something else you can show so that you have,", 'start': 3866.756, 'duration': 7.626}], 'summary': 'Self-taught developers should focus on portfolio, networking, and social media presence for professional advancement.', 'duration': 32.476, 'max_score': 3841.906, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/VfGW0Qiy2I0/pics/VfGW0Qiy2I03841906.jpg'}], 'start': 3001.946, 'title': 'Freelance web development and hosting strategies, tech skills for developers, and web development learning path', 'summary': 'Discusses the relevance of wordpress in freelance web development, importance of learning devops and hosting strategies, essential tech skills for developers such as docker, kubernetes, flutter, react native, progressive web apps, desktop applications, ai, machine learning integration, webassembly, algorithms, data structures, and software design patterns, and insights on navigating a web development learning path emphasizing creating a plan, building a portfolio, networking, and leveraging online resources.', 'chapters': [{'end': 3194.463, 'start': 3001.946, 'title': 'Freelance web development and hosting strategies', 'summary': 'Discusses the relevance of wordpress in freelance web development, the importance of learning devops and hosting strategies, and the preference for hosting platforms such as heroku, digitalocean, and aws.', 'duration': 192.517, 'highlights': ['WordPress can still be beneficial to learn for building websites and small apps for local businesses, even though it may not be suitable for working at big corporations. WordPress can be a good choice for building websites and small apps for local businesses, and it can still be beneficial to learn, especially for freelancers.', 'DigitalOcean is preferred for larger apps that require scalability, providing full control over the hosting environment, including the choice of operating system. DigitalOcean is favored for larger apps, offering full control over the hosting environment and the flexibility to choose the operating system.', 'Nginx is suggested as an ideal web server, particularly for Node.js and PHP, and is easier to configure compared to Apache. Nginx is recommended as a web server for its ease of configuration, compatibility with Node.js and PHP, and preference over Apache.']}, {'end': 3723.274, 'start': 3194.543, 'title': 'Tech skills for developers', 'summary': 'Covers essential tech skills for developers, including docker and kubernetes for devops, mobile app development with flutter and react native, progressive web apps, desktop applications with technologies like electron and python, ai and machine learning integration, webassembly, as well as the importance of algorithms, data structures, and software design patterns for all developers.', 'duration': 528.731, 'highlights': ['Docker and Kubernetes are essential for DevOps, providing a way to run applications in a virtualized environment and automate container management. Docker and Kubernetes are important for DevOps, ensuring consistent application performance across different physical machines and operating systems, with Docker allowing the installation of specific software in containers. Kubernetes automates container management.', 'Mobile app development options include Flutter for powerful native mobile applications and React Native for building cross-platform apps with JavaScript. Flutter and React Native offer powerful options for mobile app development, enabling the creation of native and cross-platform apps with JavaScript, Dart, and React, catering to both Android and iOS platforms.', 'Progressive web apps (PWAs) require specific features like serving offline content, HTTPS, and native app-like experience, with the use of service workers for offline functionality. PWAs require offline content serving, HTTPS, and native app-like experience, with service workers enabling offline functionality, making PWAs a significant trend in future web development.', 'Desktop application development options include Electron for creating apps with web technologies and languages like JavaScript, and WebAssembly for more powerful web-based functionalities alongside JavaScript. Electron provides a popular option for developing desktop apps with web technologies and JavaScript, while WebAssembly offers enhanced web capabilities for tasks like game development and image editing alongside JavaScript.', 'AI and machine learning integration is gaining importance, with applications in user behavior analysis, code generation, and the use of machine learning APIs. AI and machine learning have growing significance, with applications in user behavior analysis, code generation, and the utilization of machine learning APIs for automation and analytics.', 'Algorithms, data structures, and software design patterns are crucial for developers to enhance problem-solving skills and code efficiency, regardless of specialization or language. Algorithms, data structures, and software design patterns are fundamental for improving problem-solving skills and code efficiency, benefiting developers across specializations and languages, with resources like Code Wars and Hacker Rank available for practice.']}, {'end': 3914.549, 'start': 3723.274, 'title': 'Web development learning path', 'summary': 'Provides insights on navigating a web development learning path, emphasizing the importance of creating a plan, building a portfolio, networking, and leveraging online resources for professional growth and career advancement.', 'duration': 191.275, 'highlights': ['Creating a plan tailored to specific career paths, such as front end development or freelancing, by identifying necessary technologies and fundamentals from job listings. Tailoring learning path to specific career goals by identifying necessary technologies from job listings.', 'Emphasizing the importance of creating a portfolio of impressive projects for self-taught individuals to showcase capabilities and enhance job prospects. Underlining the significance of a portfolio in proving capabilities, especially for self-taught individuals.', 'Stressing the significance of networking through professional social media accounts, such as LinkedIn and Twitter, and creating additional content, like YouTube tutorials, to demonstrate passion and expertise. Highlighting the importance of networking and creating additional content to showcase passion and expertise.']}], 'duration': 912.603, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/VfGW0Qiy2I0/pics/VfGW0Qiy2I03001946.jpg', 'highlights': ['WordPress can still be beneficial for freelancers and local businesses.', 'DigitalOcean is preferred for larger apps that require scalability.', 'Nginx is recommended as a web server, especially for Node.js and PHP.', 'Docker and Kubernetes are essential for DevOps and automation.', 'Flutter and React Native offer powerful options for mobile app development.', 'Progressive web apps (PWAs) require specific features like serving offline content and native app-like experience.', 'Electron and WebAssembly provide options for desktop application development.', 'AI and machine learning integration is gaining importance in web development.', 'Algorithms, data structures, and software design patterns are crucial for developers.', 'Tailoring learning path to specific career goals by identifying necessary technologies from job listings.', 'Emphasizing the importance of creating a portfolio of impressive projects.', 'Highlighting the importance of networking and creating additional content to showcase passion and expertise.']}], 'highlights': ['The annual practical guide to web development has been ongoing since 2016 or 2017, with stable technologies and fresh commentary.', 'The guide explores various paths for web developers, including languages, frameworks, and tools.', 'The chapter provides a comprehensive roadmap for web developers in 2021, covering technologies from front end to back end and offering guidance.', 'There are three main types of web developers: front end, back end, and full stack, each requiring different technologies and skills.', 'Front end developers work with HTML, CSS, JavaScript, and front end frameworks like React or Vue, while back end developers work server-side with languages such as JavaScript, Python, PHP, and C Sharp.', 'Visual Studio Code is recommended as the most popular text editor for web development, along with other options like Sublime Text, Atom, Brackets, and Vim.', 'Front-end developers should learn design software like Adobe XD, Photoshop, Sketch, and Figma to create quick mockups and UI elements, especially for freelancing and client mockups.', 'Learning HTML and CSS is essential for every web developer, including basic page structure, semantic tags, basic CSS styling, flexbox, CSS grid, transitions, animations, and responsive design.', 'Understanding UI frameworks like Tailwind CSS and Bootstrap is important for front end developers, with Tailwind CSS offering high customizability and Bootstrap being widely used.', 'Front end frameworks like React enable easier and more efficient development compared to vanilla JavaScript.', 'Using an SSR framework by default improves SEO, simplifies routing, and enhances performance, providing quantifiable benefits for website visibility, user experience, and speed.', 'Static site generators like Gatsby and Gridsome enable fast and easy-to-host websites, utilizing CDN for global replication and offering dynamic functionality with React components and GraphQL.', 'WordPress can be used as a headless CMS with a REST API, allowing integration with front-end technologies like Gatsby and React.', 'The Jamstack is a web architecture focusing on high performance, security, and scalability at low cost, utilizing JavaScript, APIs, and markup.', 'GraphQL offers a single endpoint for tailored data retrieval, reducing the need to fetch unnecessary data.', 'Docker and Kubernetes are essential for DevOps and automation.', 'Flutter and React Native offer powerful options for mobile app development.', 'Progressive web apps (PWAs) require specific features like serving offline content and native app-like experience.', 'AI and machine learning integration is gaining importance in web development.', 'Algorithms, data structures, and software design patterns are crucial for developers.', 'Tailoring learning path to specific career goals by identifying necessary technologies from job listings.', 'Emphasizing the importance of creating a portfolio of impressive projects.', 'Highlighting the importance of networking and creating additional content to showcase passion and expertise.']}