title
Web Development In 2020 - A Practical Guide
description
In this complete and practical guide, we will look at just about every technology in web development. You do NOT have to learn everything here. It is simply a guide of options to help you understand what is what and pick your learning path
💖 Become a Patron: Show support & get perks!
http://www.patreon.com/traversymedia
Website & Udemy Course Links:
https://www.traversymedia.com
Follow Traversy Media:
https://www.twitter.com/traversymedia
https://www.instagram.com/traversymedia
https://www.facebook.com/traversymedia
Check out this list of resources/links compiled by Andrew Shearer based off this guide - https://github.com/andrews1022/web-development-2020-course-list
detail
{'title': 'Web Development In 2020 - A Practical Guide', 'heatmap': [{'end': 571.873, 'start': 523.775, 'weight': 0.739}, {'end': 873.588, 'start': 828.214, 'weight': 0.793}, {'end': 1280.952, 'start': 1222.409, 'weight': 0.73}, {'end': 1488.85, 'start': 1439.284, 'weight': 0.781}, {'end': 2318.231, 'start': 2227.291, 'weight': 0.835}, {'end': 2406.793, 'start': 2357.524, 'weight': 0.915}, {'end': 2619.886, 'start': 2573.513, 'weight': 0.7}, {'end': 2895.424, 'start': 2837.075, 'weight': 0.974}, {'end': 3362.011, 'start': 3317.86, 'weight': 0.772}, {'end': 3624.798, 'start': 3578.62, 'weight': 1}], 'summary': "Provides a comprehensive guide to web development technologies, emphasizing the transition to shorter trend-focused videos due to industry slowdown, discussing paths and tools, web fundamentals, essential skills and trends, typescript's significance, various web technologies, and 2020 trends including jamstack, serverless architecture, and emerging technologies like webassembly.", 'chapters': [{'end': 75.095, 'segs': [{'end': 75.095, 'src': 'embed', 'start': 7.182, 'weight': 0, 'content': [{'end': 10.445, 'text': "Hey what's going on guys welcome to my practical guide for web development.", 'start': 7.182, 'duration': 3.263}, {'end': 17.791, 'text': "Now. I've done this every year since, I think, 2017, and it's basically a complete map of technologies that are relevant to web development,", 'start': 10.485, 'duration': 7.306}, {'end': 18.752, 'text': 'at least at this time.', 'start': 17.791, 'duration': 0.961}, {'end': 22.695, 'text': 'And this includes things like languages frameworks libraries tools.', 'start': 19.112, 'duration': 3.583}, {'end': 27.457, 'text': "and it's a guide for all types of developers, from front end to back end to full stack.", 'start': 23.315, 'duration': 4.142}, {'end': 33.24, 'text': 'now, since the industry has kind of slowed down in terms of of new technologies,', 'start': 27.457, 'duration': 5.783}, {'end': 41.805, 'text': "i think that this will be the last year i do a complete guide and then from now on, i'll just do like a shorter video on trends for the year,", 'start': 33.24, 'duration': 8.565}, {'end': 51.871, 'text': 'because what this is is a complete map of all the different languages front-end frameworks, back-end frameworks, libraries, tools,', 'start': 41.805, 'duration': 10.066}, {'end': 54.393, 'text': 'all that stuff start to finish.', 'start': 51.871, 'duration': 2.522}, {'end': 55.714, 'text': 'It is a very long video.', 'start': 54.433, 'duration': 1.281}, {'end': 59.917, 'text': "It'll probably be a little longer than an hour, but bear with me.", 'start': 55.754, 'duration': 4.163}, {'end': 65.681, 'text': "You definitely don't have to learn everything or even close to everything in this guide, so try not to get overwhelmed by that.", 'start': 59.957, 'duration': 5.724}, {'end': 75.095, 'text': "The reason I do this is to help you pick your path and pick what you want to learn, and And also just to let you know what's what,", 'start': 66.622, 'duration': 8.473}], 'summary': 'Annual practical guide for web development since 2017 covering relevant technologies, to be the last complete guide due to industry slowdown, with future focus on shorter trend videos.', 'duration': 67.913, 'max_score': 7.182, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/0pThnRneDjw/pics/0pThnRneDjw7182.jpg'}], 'start': 7.182, 'title': 'Web development guide', 'summary': 'Provides a comprehensive guide to web development technologies, transitioning to shorter trend-focused videos due to industry slowdown, with the upcoming video expected to be over an hour long.', 'chapters': [{'end': 75.095, 'start': 7.182, 'title': 'Practical web development guide', 'summary': 'Provides a comprehensive guide to technologies relevant to web development, covering languages, frameworks, libraries, and tools, with a plan to transition to shorter trend-focused videos due to industry slowdown, and the video is expected to be over an hour long.', 'duration': 67.913, 'highlights': ['The chapter provides a comprehensive guide to technologies relevant to web development, covering languages, frameworks, libraries, and tools (2017-present).', 'The industry slowdown prompts the decision to transition to shorter trend-focused videos instead of complete guides.', 'The video is expected to be over an hour long, serving as a detailed resource for developers to pick their learning path.']}], 'duration': 67.913, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/0pThnRneDjw/pics/0pThnRneDjw7182.jpg', 'highlights': ['The video is expected to be over an hour long, serving as a detailed resource for developers to pick their learning path.', 'The chapter provides a comprehensive guide to technologies relevant to web development, covering languages, frameworks, libraries, and tools (2017-present).', 'The industry slowdown prompts the decision to transition to shorter trend-focused videos instead of complete guides.']}, {'end': 422.793, 'segs': [{'end': 126.999, 'src': 'embed', 'start': 94.728, 'weight': 0, 'content': [{'end': 98.351, 'text': "because there's a lot of different reasons to want to learn how to code.", 'start': 94.728, 'duration': 3.623}, {'end': 106.263, 'text': "Do you want to work for a company that's probably the most popular? decision is just becoming a developer for a company, applying for jobs.", 'start': 98.371, 'duration': 7.892}, {'end': 108.205, 'text': 'You could also be a freelancer.', 'start': 106.764, 'duration': 1.441}, {'end': 109.706, 'text': 'I started out freelancing.', 'start': 108.225, 'duration': 1.481}, {'end': 111.928, 'text': 'You could have your own business or agency.', 'start': 110.067, 'duration': 1.861}, {'end': 116.892, 'text': 'And what you do can kind of dictate what technologies you learn.', 'start': 111.948, 'duration': 4.944}, {'end': 119.894, 'text': 'You could become a consultant for other companies.', 'start': 117.733, 'duration': 2.161}, {'end': 126.999, 'text': 'You could learn how to code to create your own apps or some kind of SaaS, which is a software as a service to make a little bit of money there.', 'start': 119.935, 'duration': 7.064}], 'summary': 'Learning to code opens various career opportunities such as working for popular companies, freelancing, starting a business, or becoming a consultant.', 'duration': 32.271, 'max_score': 94.728, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/0pThnRneDjw/pics/0pThnRneDjw94728.jpg'}, {'end': 173.26, 'src': 'embed', 'start': 133.324, 'weight': 1, 'content': [{'end': 137.887, 'text': "And then you also have the option to be a front end developer where you're dealing with the client side.", 'start': 133.324, 'duration': 4.563}, {'end': 142.49, 'text': "you're dealing with HTML, CSS, JavaScript, maybe a front end JavaScript framework.", 'start': 137.887, 'duration': 4.603}, {'end': 150.196, 'text': 'You could be a back end developer dealing with building APIs and microservices, dealing with databases Or full stack,', 'start': 142.81, 'duration': 7.386}, {'end': 153.499, 'text': "which seems to be the most popular option where you're doing both.", 'start': 150.196, 'duration': 3.303}, {'end': 157.782, 'text': "All right, so it's important to know your path and what it is you want to do.", 'start': 154.199, 'duration': 3.583}, {'end': 163.247, 'text': "So let's start off with the necessities, the basic system tools for web development.", 'start': 158.663, 'duration': 4.584}, {'end': 166.229, 'text': 'And obviously, you need a computer and an operating system.', 'start': 163.367, 'duration': 2.862}, {'end': 168.031, 'text': "Can't write much code without that.", 'start': 166.73, 'duration': 1.301}, {'end': 173.26, 'text': "And as far as hardware goes, web development isn't really demanding on your system.", 'start': 168.796, 'duration': 4.464}], 'summary': 'Web developers can specialize in front end, back end, or full stack, with full stack being the most popular option. basic system tools include a computer and an operating system.', 'duration': 39.936, 'max_score': 133.324, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/0pThnRneDjw/pics/0pThnRneDjw133324.jpg'}, {'end': 314.641, 'src': 'embed', 'start': 242.446, 'weight': 4, 'content': [{'end': 249.33, 'text': 'So as far as a text editor or an IDE goes, I would definitely recommend VS Code for most cases, most languages.', 'start': 242.446, 'duration': 6.884}, {'end': 253.733, 'text': "It's very performant.", 'start': 250.771, 'duration': 2.962}, {'end': 255.294, 'text': 'It has a ton of features.', 'start': 253.953, 'duration': 1.341}, {'end': 256.875, 'text': 'It has great extensions.', 'start': 255.474, 'duration': 1.401}, {'end': 259.178, 'text': 'It has a built-in terminal.', 'start': 257.696, 'duration': 1.482}, {'end': 261.966, 'text': "I mean, there's nothing bad I can say about VS Code.", 'start': 259.219, 'duration': 2.747}, {'end': 264.812, 'text': 'It also seems to be the most popular in the industry.', 'start': 261.986, 'duration': 2.826}, {'end': 267.138, 'text': "So you're going to see a lot of people using it.", 'start': 264.832, 'duration': 2.306}, {'end': 272.675, 'text': "You also have Sublime Text and Atom, which are some other great text editors that I've used in the past.", 'start': 267.674, 'duration': 5.001}, {'end': 274.936, 'text': 'You might need an IDE.', 'start': 273.615, 'duration': 1.321}, {'end': 277.956, 'text': 'So Visual Studio is pretty popular for like .', 'start': 275.056, 'duration': 2.9}, {'end': 278.517, 'text': 'NET stuff.', 'start': 277.956, 'duration': 0.561}, {'end': 281.317, 'text': "If you're doing ASP.NET, C Sharp.", 'start': 278.617, 'duration': 2.7}, {'end': 287.939, 'text': "If you're using Java or a language like that, a compiled language, you probably need an IDE.", 'start': 282.117, 'duration': 5.822}, {'end': 291.06, 'text': 'So you might want to look at Eclipse or NetBeans.', 'start': 288.119, 'duration': 2.941}, {'end': 292.38, 'text': "I mean, there's a bunch of them out there.", 'start': 291.1, 'duration': 1.28}, {'end': 300.267, 'text': "And for a web browser, you basically have two really respected choices, and that's Chrome and Firefox.", 'start': 293.32, 'duration': 6.947}, {'end': 303.11, 'text': 'And either one of these are great.', 'start': 301.068, 'duration': 2.042}, {'end': 305.492, 'text': "I mean, I use Chrome just because I've used it forever.", 'start': 303.13, 'duration': 2.362}, {'end': 309.216, 'text': "There's nothing I can say that's that's bad about it.", 'start': 305.512, 'duration': 3.704}, {'end': 312.639, 'text': "I mean, it's fast as it uses the V8 JavaScript engine.", 'start': 309.276, 'duration': 3.363}, {'end': 314.641, 'text': 'The dev tools are fantastic.', 'start': 313.059, 'duration': 1.582}], 'summary': 'Vs code is recommended for most languages, very performant and popular in the industry. chrome and firefox are respected web browser choices.', 'duration': 72.195, 'max_score': 242.446, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/0pThnRneDjw/pics/0pThnRneDjw242446.jpg'}, {'end': 362.702, 'src': 'embed', 'start': 335.747, 'weight': 7, 'content': [{'end': 343.591, 'text': 'I just tend to go with the default bash terminal on Mac and Linux, and if I use Windows, I usually go for git bash,', 'start': 335.747, 'duration': 7.844}, {'end': 346.272, 'text': "which is a third-party terminal that's Unix-based.", 'start': 343.591, 'duration': 2.681}, {'end': 348.933, 'text': "that's much better than the standard Windows command line.", 'start': 346.272, 'duration': 2.661}, {'end': 353.535, 'text': "Now, Windows does have a new bash terminal, but I haven't tried it yet.", 'start': 349.433, 'duration': 4.102}, {'end': 357.137, 'text': "I haven't really even looked at it, so I don't have too much input on that.", 'start': 353.935, 'duration': 3.202}, {'end': 362.702, 'text': "And then you also have the Windows subsystem for Linux, which isn't really for me.", 'start': 358.278, 'duration': 4.424}], 'summary': 'Prefer default bash terminal on mac and linux, and git bash on windows, finding it much better than standard windows command line.', 'duration': 26.955, 'max_score': 335.747, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/0pThnRneDjw/pics/0pThnRneDjw335747.jpg'}, {'end': 430.955, 'src': 'embed', 'start': 402.007, 'weight': 8, 'content': [{'end': 403.227, 'text': 'I like Adobe XD.', 'start': 402.007, 'duration': 1.22}, {'end': 411.69, 'text': "I used Photoshop for well over a decade, but switched to Adobe XD because it's more targeted to what I'm doing.", 'start': 403.428, 'duration': 8.262}, {'end': 413.71, 'text': "And I think it's a little easier.", 'start': 412.05, 'duration': 1.66}, {'end': 417.131, 'text': "There's also Sketch and Figma, which are pretty popular.", 'start': 413.73, 'duration': 3.401}, {'end': 418.732, 'text': "I've used Sketch a couple times.", 'start': 417.311, 'duration': 1.421}, {'end': 421.632, 'text': "I believe it's only available on Mac.", 'start': 419.172, 'duration': 2.46}, {'end': 422.793, 'text': 'I could be wrong about that.', 'start': 421.672, 'duration': 1.121}, {'end': 428.954, 'text': 'But it allows you to, both of these allow you to create really cool interactive UI mockups.', 'start': 423.253, 'duration': 5.701}, {'end': 430.955, 'text': 'So you may want to check those out.', 'start': 429.435, 'duration': 1.52}], 'summary': 'Prefer adobe xd over photoshop, finds it easier. also mentions sketch and figma for ui mockups.', 'duration': 28.948, 'max_score': 402.007, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/0pThnRneDjw/pics/0pThnRneDjw402007.jpg'}], 'start': 75.095, 'title': 'Choosing paths and tools in web development', 'summary': 'Explores different paths in web development, emphasizing the importance of understanding goals and preferences. it also discusses recommended tools for software development, including vs code as the top choice for text editing and ides like visual studio for specific languages, as well as preferred web browsers, terminal options, and optional design software for developers.', 'chapters': [{'end': 241.706, 'start': 75.095, 'title': 'Choosing your path in web development', 'summary': "Discusses the different paths in web development, including options for employment, types of development, and necessary system tools, emphasizing the importance of understanding one's goals and preferences.", 'duration': 166.611, 'highlights': ['Understanding different paths in web development The chapter covers various career paths in web development, such as working for a company, freelancing, starting a business, or becoming a consultant, emphasizing the impact of career choice on the technologies to be learned.', 'Options for types of development (front end, back end, full stack) The chapter discusses the options of being a front end developer, dealing with client-side technologies, a back end developer, handling APIs and databases, or a full stack developer, highlighting the popularity of the full stack option.', "Importance of knowing one's goals and preferences Emphasizing the significance of understanding one's goals and preferences in determining what to learn, the chapter highlights the importance of choosing a path aligned with individual aspirations in web development.", 'Necessities and system tools for web development The chapter emphasizes the basic system tools required for web development, including the need for a computer and an operating system, and discusses the hardware and operating system preferences, detailing the suitability of mid-range laptops or desktops and the flexibility of using Mac, Windows, or Linux.']}, {'end': 422.793, 'start': 242.446, 'title': 'Choosing the right tools for software development', 'summary': 'Discusses the recommended tools for software development, including vs code as the top choice for text editing and ides like visual studio for specific languages. it also covers the preferred web browsers, terminal options, and optional design software for developers.', 'duration': 180.347, 'highlights': ['VS Code is recommended for most languages due to its performance, features, extensions, and popularity in the industry.', 'Visual Studio is popular for .NET development, while Eclipse or NetBeans are suitable for Java or other compiled languages.', 'Chrome and Firefox are respected web browser choices, with Chrome being fast and utilizing the V8 JavaScript engine, while Firefox offers excellent developer tools.', 'The default bash terminal on Mac and Linux, and git bash on Windows, are recommended for working with system commands and CLIs, with third-party options like iTerm and Hyper also available.', 'Adobe XD is a preferred design software for creating mockups, while Sketch and Figma are other popular options, especially for Mac users.']}], 'duration': 347.698, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/0pThnRneDjw/pics/0pThnRneDjw75095.jpg', 'highlights': ['Understanding different paths in web development The chapter covers various career paths in web development, such as working for a company, freelancing, starting a business, or becoming a consultant, emphasizing the impact of career choice on the technologies to be learned.', 'Options for types of development (front end, back end, full stack) The chapter discusses the options of being a front end developer, dealing with client-side technologies, a back end developer, handling APIs and databases, or a full stack developer, highlighting the popularity of the full stack option.', "Importance of knowing one's goals and preferences Emphasizing the significance of understanding one's goals and preferences in determining what to learn, the chapter highlights the importance of choosing a path aligned with individual aspirations in web development.", 'Necessities and system tools for web development The chapter emphasizes the basic system tools required for web development, including the need for a computer and an operating system, and discusses the hardware and operating system preferences, detailing the suitability of mid-range laptops or desktops and the flexibility of using Mac, Windows, or Linux.', 'VS Code is recommended for most languages due to its performance, features, extensions, and popularity in the industry.', 'Visual Studio is popular for .NET development, while Eclipse or NetBeans are suitable for Java or other compiled languages.', 'Chrome and Firefox are respected web browser choices, with Chrome being fast and utilizing the V8 JavaScript engine, while Firefox offers excellent developer tools.', 'The default bash terminal on Mac and Linux, and git bash on Windows, are recommended for working with system commands and CLIs, with third-party options like iTerm and Hyper also available.', 'Adobe XD is a preferred design software for creating mockups, while Sketch and Figma are other popular options, especially for Mac users.']}, {'end': 832.3, 'segs': [{'end': 513.332, 'src': 'embed', 'start': 462.861, 'weight': 0, 'content': [{'end': 467.264, 'text': 'HTML5 allows us to create really semantic layouts.', 'start': 462.861, 'duration': 4.403}, {'end': 476.05, 'text': "So before HTML5, we'd have to just use divs and have ID of header or classes of header and footer and all that.", 'start': 467.564, 'duration': 8.486}, {'end': 480.473, 'text': 'But with HTML5, we have semantic tags like the header tag and the footer tag.', 'start': 476.37, 'duration': 4.103}, {'end': 483.095, 'text': 'the article tag, things like that.', 'start': 481.173, 'duration': 1.922}, {'end': 488.318, 'text': 'So you really want to learn how to semantically layout your elements correctly.', 'start': 483.155, 'duration': 5.163}, {'end': 492.481, 'text': "I would say that's probably the most important part of HTML itself.", 'start': 488.559, 'duration': 3.922}, {'end': 498.126, 'text': 'Most of your time is going to be spent learning CSS because CSS is a lot harder than HTML.', 'start': 493.362, 'duration': 4.764}, {'end': 502.569, 'text': 'You want to learn all the fundamentals, colors, fonts, positioning.', 'start': 499.286, 'duration': 3.283}, {'end': 505.251, 'text': 'Learning the box model is really, really important.', 'start': 502.709, 'duration': 2.542}, {'end': 513.332, 'text': 'CSS Grid and Flexbox are probably the best additions to CSS that there have been, because before those,', 'start': 506.21, 'duration': 7.122}], 'summary': 'Html5 enables semantic layouts, css fundamentals, box model, grid, and flexbox are crucial for web development.', 'duration': 50.471, 'max_score': 462.861, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/0pThnRneDjw/pics/0pThnRneDjw462861.jpg'}, {'end': 617.403, 'src': 'heatmap', 'start': 523.775, 'weight': 2, 'content': [{'end': 526.076, 'text': 'So definitely learn CSS Grid and Flexbox.', 'start': 523.775, 'duration': 2.301}, {'end': 527.557, 'text': "It'll make your life a lot easier.", 'start': 526.116, 'duration': 1.441}, {'end': 530.738, 'text': 'CSS custom properties are fairly new.', 'start': 528.557, 'duration': 2.181}, {'end': 533.239, 'text': 'I think 2018 they came out.', 'start': 530.758, 'duration': 2.481}, {'end': 541.103, 'text': "They're basically variables in CSS, so they can be very helpful and help you to not repeat yourself so much in your CSS.", 'start': 533.719, 'duration': 7.384}, {'end': 544.364, 'text': 'CSS transitions and doing animations.', 'start': 541.743, 'duration': 2.621}, {'end': 548.646, 'text': "I wouldn't say you have to go crazy with this at first, but I would just learn the basics,", 'start': 544.404, 'duration': 4.242}, {'end': 553.548, 'text': 'learn how to maybe bring something in from the side smoothly, stuff like that.', 'start': 548.646, 'duration': 4.902}, {'end': 558.469, 'text': "Um, but you don't have to master CSS before moving on to something else.", 'start': 554.308, 'duration': 4.161}, {'end': 559.87, 'text': 'All right.', 'start': 558.489, 'duration': 1.381}, {'end': 563.111, 'text': 'So responsive design is, is very, very important.', 'start': 560.05, 'duration': 3.061}, {'end': 566.712, 'text': 'It has been for the last, you know, five plus years.', 'start': 563.131, 'duration': 3.581}, {'end': 571.873, 'text': 'most people actually use the internet on their mobile device, on their smartphone, than their computer.', 'start': 566.712, 'duration': 5.161}, {'end': 575.854, 'text': "So creating a layout that's responsive is very important.", 'start': 571.953, 'duration': 3.901}, {'end': 578.455, 'text': "Uh, if it's any kind of serious project.", 'start': 575.874, 'duration': 2.581}, {'end': 581.321, 'text': "And doing it isn't really that hard.", 'start': 579.62, 'duration': 1.701}, {'end': 583.442, 'text': 'You need to set the viewport.', 'start': 582.201, 'duration': 1.241}, {'end': 589.264, 'text': "You need to create your media queries so you can create a media query so that if the screen is, let's say,", 'start': 583.562, 'duration': 5.702}, {'end': 598.749, 'text': '600 pixels or less which would be a smartphone or a small device then you want to have a one call, a stacked one column layout.', 'start': 589.264, 'duration': 9.485}, {'end': 604.353, 'text': 'And then if you have a bigger screen size than that, you can have two columns, three columns and so on.', 'start': 599.309, 'duration': 5.044}, {'end': 607.855, 'text': 'You just want it to look decent on smaller screens.', 'start': 604.373, 'duration': 3.482}, {'end': 611.438, 'text': 'And you also want it to look decent on large screens like a smart TV.', 'start': 608.276, 'duration': 3.162}, {'end': 613.62, 'text': 'You want to use fluid widths.', 'start': 612.399, 'duration': 1.221}, {'end': 617.403, 'text': "I would say use rem units over pixels, but that's really just preference.", 'start': 614.02, 'duration': 3.383}], 'summary': 'Learn css grid, flexbox, custom properties, and responsive design for modern web development.', 'duration': 83.684, 'max_score': 523.775, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/0pThnRneDjw/pics/0pThnRneDjw523775.jpg'}, {'end': 728.503, 'src': 'embed', 'start': 660.109, 'weight': 7, 'content': [{'end': 665.892, 'text': "So another trend that I'm seeing and I'm actually using myself is to use custom reusable CSS components.", 'start': 660.109, 'duration': 5.783}, {'end': 676.117, 'text': "And I'm kind of moving away from large frameworks like Bootstrap and creating my own basically my own mini framework for each project.", 'start': 666.372, 'duration': 9.745}, {'end': 685.265, 'text': 'And you can build these reusable components like cards, alerts, the same stuff that the frameworks offer, but you build it in a custom way.', 'start': 676.837, 'duration': 8.428}, {'end': 686.646, 'text': "So it's a custom design.", 'start': 685.385, 'duration': 1.261}, {'end': 688.868, 'text': "It doesn't look too bootstrappy.", 'start': 686.686, 'duration': 2.182}, {'end': 692.251, 'text': "I think it's a good way to go.", 'start': 690.249, 'duration': 2.002}, {'end': 695.534, 'text': "You don't have to import an entire library.", 'start': 692.291, 'duration': 3.243}, {'end': 699.037, 'text': 'You can just create the components that you need for that particular UI.', 'start': 695.995, 'duration': 3.042}, {'end': 705.972, 'text': 'And SAS, which is a CSS preprocessor, allows you to do this more efficiently.', 'start': 700.348, 'duration': 5.624}, {'end': 714.317, 'text': 'I mean, you can use variables, nesting, conditionals, functions, all types of stuff to make your CSS more efficient, quicker.', 'start': 706.032, 'duration': 8.285}, {'end': 721.501, 'text': "You can use the dry principle, which is don't repeat yourself if you use like inheritance and functions and stuff like that.", 'start': 715.497, 'duration': 6.004}, {'end': 728.503, 'text': "So, SAS is definitely a technology that I would suggest learning and it's pretty easy to learn.", 'start': 721.861, 'duration': 6.642}], 'summary': "Trend of using custom reusable css components, moving away from large frameworks like bootstrap, building custom mini frameworks for each project, utilizing sas for more efficient css, and recommending learning sas as it's easy to learn.", 'duration': 68.394, 'max_score': 660.109, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/0pThnRneDjw/pics/0pThnRneDjw660109.jpg'}, {'end': 806.148, 'src': 'embed', 'start': 782.511, 'weight': 9, 'content': [{'end': 791.516, 'text': 'Now, one framework that I see really, really gaining traction in 2020 is Tailwind CSS, which is a little different than the others.', 'start': 782.511, 'duration': 9.005}, {'end': 800.023, 'text': 'And the reason for that is when you use something like Bootstrap, you have a button class, an alert class for these high-level components.', 'start': 792.436, 'duration': 7.587}, {'end': 806.148, 'text': 'Well, Tailwind is a set of utility classes, very low-level classes,', 'start': 800.443, 'duration': 5.705}], 'summary': 'Tailwind css gaining traction in 2020 with low-level utility classes.', 'duration': 23.637, 'max_score': 782.511, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/0pThnRneDjw/pics/0pThnRneDjw782511.jpg'}], 'start': 423.253, 'title': 'Web development fundamentals', 'summary': 'Covers learning html5 and css fundamentals, including the use of semantic tags for layout, css grid, and flexbox, emphasizes the importance of responsive design, with tips for creating responsive layouts, and discusses the trend of using custom reusable css components instead of large frameworks like bootstrap.', 'chapters': [{'end': 553.548, 'start': 423.253, 'title': 'Learning html and css', 'summary': 'Emphasizes the importance of learning html5 and css fundamentals, including the use of semantic tags for layout, css grid and flexbox for easier positioning, and the benefits of css custom properties and transitions.', 'duration': 130.295, 'highlights': ['Learning CSS Grid and Flexbox is crucial as they make positioning and layout easier, compared to older methods like using floats or frameworks like Bootstrap.', 'HTML5 enables the creation of semantic layouts using tags like header, footer, and article, allowing for more organized and meaningful structure.', 'CSS custom properties, introduced in 2018, act as variables in CSS, reducing repetition in styles and making code more maintainable.', 'Understanding CSS fundamentals such as colors, fonts, positioning, and the box model is essential for effective styling and layout design.']}, {'end': 658.949, 'start': 554.308, 'title': 'Importance of responsive design', 'summary': 'Emphasizes the importance of responsive design in web development, stating that most people use the internet on their smartphones, and provides key tips for creating responsive layouts including setting viewports, using media queries for different screen sizes, and preferring rem units over pixels.', 'duration': 104.641, 'highlights': ['Creating responsive layouts is crucial as most people use the internet on their smartphones, emphasizing the need for a design that adapts to various screen sizes.', 'Key tips for creating responsive layouts include setting viewports, using media queries for different screen sizes, and preferring rem units over pixels for better adaptability.', 'Emphasizing the importance of fluid widths and using mobile-first layout approach for creating adaptable designs for different screen sizes.']}, {'end': 832.3, 'start': 660.109, 'title': 'Custom reusable css components', 'summary': 'Discusses the trend of using custom reusable css components instead of large frameworks like bootstrap, emphasizing the use of sas for creating efficient and custom-designed components, while also suggesting learning css frameworks like bootstrap and highlighting the rising traction of tailwind css in 2020.', 'duration': 172.191, 'highlights': ['SAS allows for creating custom reusable components like cards and alerts, making CSS more efficient and quicker. SAS enables the creation of custom reusable components like cards and alerts, enhancing CSS efficiency and speed.', "Learning SAS is recommended, as it allows for efficient CSS utilization and is easy to learn for those familiar with CSS. SAS is recommended for its ability to make CSS more efficient, and it's easy to learn for CSS-savvy individuals.", 'Tailwind CSS is gaining traction in 2020 due to its highly customizable, low-level utility classes for creating unique components like buttons and cards. Tailwind CSS is gaining popularity in 2020 because of its customizable, low-level utility classes for creating unique components.', 'Using custom reusable CSS components and learning CSS frameworks like Bootstrap are beneficial for UI development. Utilizing custom reusable CSS components and learning CSS frameworks like Bootstrap are beneficial for UI development.']}], 'duration': 409.047, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/0pThnRneDjw/pics/0pThnRneDjw423253.jpg', 'highlights': ['Learning CSS Grid and Flexbox is crucial for easier positioning and layout.', 'HTML5 enables semantic layouts using tags like header, footer, and article.', 'CSS custom properties act as variables, reducing repetition in styles.', 'Understanding CSS fundamentals such as colors, fonts, positioning, and the box model is essential.', 'Creating responsive layouts is crucial for adapting to various screen sizes.', 'Key tips for creating responsive layouts include setting viewports and using media queries.', 'Emphasizing the importance of fluid widths and using a mobile-first layout approach.', 'SAS allows for creating custom reusable components like cards and alerts, enhancing CSS efficiency and speed.', 'Learning SAS is recommended for efficient CSS utilization and easy learning for CSS-savvy individuals.', 'Tailwind CSS is gaining traction in 2020 due to its highly customizable, low-level utility classes.', 'Using custom reusable CSS components and learning CSS frameworks like Bootstrap are beneficial for UI development.']}, {'end': 2104.891, 'segs': [{'end': 905.942, 'src': 'embed', 'start': 860.78, 'weight': 1, 'content': [{'end': 868.084, 'text': "You know you don't need to learn as much JavaScript as someone that's going to go into learning React or learning Node.js on the back end.", 'start': 860.78, 'duration': 7.304}, {'end': 873.588, 'text': 'But you still should learn JavaScript because it is the programming language of the browser.', 'start': 868.985, 'duration': 4.603}, {'end': 877.95, 'text': "And if you want to have dynamic page functionality, you're going to do that through JavaScript.", 'start': 873.708, 'duration': 4.242}, {'end': 880.772, 'text': "You can't do that through Python or anything like that.", 'start': 878.57, 'duration': 2.202}, {'end': 886.115, 'text': 'So you want to learn the fundamentals, variables, data types, functions, all that good stuff.', 'start': 881.772, 'duration': 4.343}, {'end': 889.537, 'text': 'You want to learn about the DOM, which is the document object model.', 'start': 886.615, 'duration': 2.922}, {'end': 895.721, 'text': 'Every element on your page is in the DOM and you can manipulate certain things with JavaScript,', 'start': 890.417, 'duration': 5.304}, {'end': 900.845, 'text': 'using events and using element selectors and things like that.', 'start': 895.721, 'duration': 5.124}, {'end': 905.942, 'text': 'You also probably want to learn JSON, which is JavaScript Object Notation.', 'start': 901.738, 'duration': 4.204}], 'summary': 'Learn javascript fundamentals, dom, and json for dynamic page functionality in the browser.', 'duration': 45.162, 'max_score': 860.78, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/0pThnRneDjw/pics/0pThnRneDjw860780.jpg'}, {'end': 977.85, 'src': 'embed', 'start': 953.843, 'weight': 3, 'content': [{'end': 962.265, 'text': "I'm sure most of you guys know this, but if you don't, it was a very popular update to JavaScript, where it added a whole bunch of new features.", 'start': 953.843, 'duration': 8.422}, {'end': 973.288, 'text': 'Things like arrow functions, template literals, promises, things that really just kind of changed JavaScript and made it much, much better.', 'start': 962.785, 'duration': 10.503}, {'end': 977.85, 'text': "Classes I mean, there's a whole bunch of stuff that was that were added in that update.", 'start': 973.428, 'duration': 4.422}], 'summary': 'Javascript update brought new features like arrow functions, template literals, promises, and classes, making it much better.', 'duration': 24.007, 'max_score': 953.843, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/0pThnRneDjw/pics/0pThnRneDjw953843.jpg'}, {'end': 1025.189, 'src': 'embed', 'start': 998.615, 'weight': 4, 'content': [{'end': 1003.599, 'text': "regardless of what you're doing any kind of web development or any kind of programing at all.", 'start': 998.615, 'duration': 4.984}, {'end': 1006.302, 'text': 'You should be using version control.', 'start': 1004.58, 'duration': 1.722}, {'end': 1012.744, 'text': 'So this will allow you to save your work, to version it, to create separate branches when you create a new feature.', 'start': 1006.582, 'duration': 6.162}, {'end': 1016.706, 'text': 'And you want a place to be able to push your code.', 'start': 1013.505, 'duration': 3.201}, {'end': 1023.308, 'text': 'GitHub is obviously the most popular, but you also have like GitLab, Bitbucket, and some other ones as well.', 'start': 1016.906, 'duration': 6.402}, {'end': 1025.189, 'text': 'But you definitely want to learn Git.', 'start': 1023.789, 'duration': 1.4}], 'summary': 'Web developers should use version control like git to save work and push code to platforms like github, gitlab, and bitbucket.', 'duration': 26.574, 'max_score': 998.615, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/0pThnRneDjw/pics/0pThnRneDjw998615.jpg'}, {'end': 1153.864, 'src': 'embed', 'start': 1126.978, 'weight': 7, 'content': [{'end': 1133.307, 'text': "there's specific extensions for those using those frameworks that have syntax highlighting and IntelliSense.", 'start': 1126.978, 'duration': 6.329}, {'end': 1139.336, 'text': 'So you definitely want to just take a look and see what would make your life a little easier when working in your text editor.', 'start': 1133.668, 'duration': 5.668}, {'end': 1145.54, 'text': 'Emmett is another great tool and it allows you to write really fast HTML and CSS.', 'start': 1140.277, 'duration': 5.263}, {'end': 1148.701, 'text': "I use it mostly for HTML and I don't know what I do without it.", 'start': 1145.7, 'duration': 3.001}, {'end': 1153.864, 'text': "I mean, I probably write HTML five times faster with Emmett and it's built into VS code.", 'start': 1148.781, 'duration': 5.083}], 'summary': 'Extensions and tools like emmett in vs code make coding faster and easier, improving productivity.', 'duration': 26.886, 'max_score': 1126.978, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/0pThnRneDjw/pics/0pThnRneDjw1126978.jpg'}, {'end': 1280.952, 'src': 'heatmap', 'start': 1222.409, 'weight': 0.73, 'content': [{'end': 1225.23, 'text': "You can't do that by default just with the browser.", 'start': 1222.409, 'duration': 2.821}, {'end': 1229.031, 'text': 'So you need Webpack or Parcel to bundle it for you.', 'start': 1225.65, 'duration': 3.381}, {'end': 1234.113, 'text': "So that's only needed if you're going to get deep into JavaScript.", 'start': 1230.052, 'duration': 4.061}, {'end': 1240.816, 'text': 'Even if you use React or Vue or something like that, they use modules, but everything is done under the hood.', 'start': 1234.233, 'duration': 6.583}, {'end': 1244.257, 'text': "You don't actually have to configure your Webpack and stuff like that.", 'start': 1240.836, 'duration': 3.421}, {'end': 1249.32, 'text': "right. so now let's talk about deployment just basic deployments.", 'start': 1246.019, 'duration': 3.301}, {'end': 1253.242, 'text': 'you should at this point you should know html, css and some javascript.', 'start': 1249.32, 'duration': 3.922}, {'end': 1256.784, 'text': 'maybe some tooling like git in the browser dev tools.', 'start': 1253.242, 'duration': 3.542}, {'end': 1258.304, 'text': 'so you need to know how to deploy it.', 'start': 1256.784, 'duration': 1.52}, {'end': 1260.705, 'text': 'get your website onto the internet now.', 'start': 1258.304, 'duration': 2.401}, {'end': 1264.767, 'text': 'i think a lot of people over complicate this these days,', 'start': 1260.705, 'duration': 4.062}, {'end': 1271.37, 'text': "when most of us get started and we're building landing pages and these tiny applications with a single javascript file.", 'start': 1264.767, 'duration': 6.603}, {'end': 1280.952, 'text': "maybe it's a personal site or for some small business or something there's no need to go and learn DevOps and AWS and these really complicated platforms,", 'start': 1271.97, 'duration': 8.982}], 'summary': 'Webpack or parcel needed for deep js. basic deployment: html, css, javascript, git, internet. no need for complex platforms.', 'duration': 58.543, 'max_score': 1222.409, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/0pThnRneDjw/pics/0pThnRneDjw1222409.jpg'}, {'end': 1308.703, 'src': 'embed', 'start': 1282.092, 'weight': 9, 'content': [{'end': 1290.434, 'text': "For hosting a small site or web app, a managed hosting company like InMotion or HostGator, I think that's absolutely fine.", 'start': 1282.092, 'duration': 8.342}, {'end': 1291.034, 'text': "It's easy.", 'start': 1290.474, 'duration': 0.56}, {'end': 1291.674, 'text': "It's cheap.", 'start': 1291.094, 'duration': 0.58}, {'end': 1294.515, 'text': 'You get your email set up very easily.', 'start': 1292.414, 'duration': 2.101}, {'end': 1303.32, 'text': 'You get a cPanel, which is a piece of software to manage your hosting account and allows you to just do everything very easily within the browser.', 'start': 1294.535, 'duration': 8.785}, {'end': 1308.703, 'text': 'No terminal or anything needed in most cases for some of these smaller sites.', 'start': 1304.08, 'duration': 4.623}], 'summary': 'Managed hosting companies like inmotion or hostgator are easy, cheap, and provide easy email setup and cpanel for managing hosting accounts.', 'duration': 26.611, 'max_score': 1282.092, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/0pThnRneDjw/pics/0pThnRneDjw1282092.jpg'}, {'end': 1356.761, 'src': 'embed', 'start': 1327.817, 'weight': 6, 'content': [{'end': 1331.22, 'text': 'And another fantastic option is static hosting with Netlify.', 'start': 1327.817, 'duration': 3.403}, {'end': 1334.682, 'text': "You can get a ton for free and it's really easy to use.", 'start': 1331.98, 'duration': 2.702}, {'end': 1342.729, 'text': 'You can simply push your code from GitHub or GitLab to Netlify and you can have continuous deployment.', 'start': 1334.723, 'duration': 8.006}, {'end': 1345.872, 'text': 'Um, they also have a custom CLI that you can use.', 'start': 1343.429, 'duration': 2.443}, {'end': 1347.853, 'text': 'They give you a free SSL certificate.', 'start': 1345.912, 'duration': 1.941}, {'end': 1351.577, 'text': "There's form submission without having to create like a PHP script.", 'start': 1348.034, 'duration': 3.543}, {'end': 1356.761, 'text': "So, I mean, I know this sounds like an advertisement, but I can't say enough good things about Netlify.", 'start': 1352.117, 'duration': 4.644}], 'summary': 'Netlify offers free static hosting, easy deployment from github/gitlab, custom cli, free ssl certificate, and form submissions without php script.', 'duration': 28.944, 'max_score': 1327.817, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/0pThnRneDjw/pics/0pThnRneDjw1327817.jpg'}, {'end': 1488.85, 'src': 'heatmap', 'start': 1439.284, 'weight': 0.781, 'content': [{'end': 1443.705, 'text': "But chances are, if you're looking to be a front end developer, you'll need to know a front end framework.", 'start': 1439.284, 'duration': 4.421}, {'end': 1446.766, 'text': "If you're freelancing, of course I mean it's up to you.", 'start': 1444.165, 'duration': 2.601}, {'end': 1451.907, 'text': "as long as you can fulfill the client's needs, then I mean you can pretty much know what you want.", 'start': 1446.766, 'duration': 5.141}, {'end': 1456.408, 'text': 'OK, so now you need to pick what you want to do.', 'start': 1452.807, 'duration': 3.601}, {'end': 1459.508, 'text': 'as far as do you want to learn a front end JavaScript framework?', 'start': 1456.408, 'duration': 3.1}, {'end': 1463.429, 'text': 'Do you want to skip that and move to a server side language??', 'start': 1459.948, 'duration': 3.481}, {'end': 1465.891, 'text': 'I mean a lot of people will say,', 'start': 1463.969, 'duration': 1.922}, {'end': 1472.556, 'text': 'especially like hipsters and stuff will say you need to definitely use a front end JavaScript framework if you want to be a developer.', 'start': 1465.891, 'duration': 6.665}, {'end': 1473.557, 'text': "I don't think that's true.", 'start': 1472.576, 'duration': 0.981}, {'end': 1482.925, 'text': 'I think if, excuse me, if you want to create, you know, PHP sites, or maybe use Python with Django, ASP.net or whatever.', 'start': 1473.957, 'duration': 8.968}, {'end': 1488.85, 'text': "if you want to render templates on the server without using a JavaScript framework, I think that's absolutely fine.", 'start': 1482.925, 'duration': 5.925}], 'summary': 'Front end developers may choose to learn a front end javascript framework or a server-side language such as php, python, or asp.net.', 'duration': 49.566, 'max_score': 1439.284, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/0pThnRneDjw/pics/0pThnRneDjw1439284.jpg'}, {'end': 1525.676, 'src': 'embed', 'start': 1496.153, 'weight': 5, 'content': [{'end': 1497.874, 'text': "So we're going to we're going to get into both of these.", 'start': 1496.153, 'duration': 1.721}, {'end': 1500.895, 'text': "But let's start off with the front end JavaScript framework.", 'start': 1497.914, 'duration': 2.981}, {'end': 1504.156, 'text': 'Now, each of these frameworks have like their own ecosystem.', 'start': 1501.295, 'duration': 2.861}, {'end': 1506.157, 'text': "And I'm going to talk about some of that stuff as well.", 'start': 1504.176, 'duration': 1.981}, {'end': 1509.679, 'text': "So what we're getting into now is more advanced front end development.", 'start': 1506.217, 'duration': 3.462}, {'end': 1519.834, 'text': 'OK, so frameworks give us a lot of advantages such as reusable components, a more organized UI, more interact page interaction.', 'start': 1510.37, 'duration': 9.464}, {'end': 1523.115, 'text': "It's better for collaboration and writing clean code.", 'start': 1519.854, 'duration': 3.261}, {'end': 1525.676, 'text': 'Now, people always ask me which one they should learn.', 'start': 1523.555, 'duration': 2.121}], 'summary': 'Front end frameworks offer advantages like reusable components, organized ui, and improved collaboration, benefiting advanced front end development.', 'duration': 29.523, 'max_score': 1496.153, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/0pThnRneDjw/pics/0pThnRneDjw1496153.jpg'}, {'end': 1863.224, 'src': 'embed', 'start': 1830.595, 'weight': 0, 'content': [{'end': 1831.716, 'text': 'So you have a lot of choices.', 'start': 1830.595, 'duration': 1.121}, {'end': 1834.76, 'text': "If it's a smaller app, you might not even need anything.", 'start': 1832.117, 'duration': 2.643}, {'end': 1839.046, 'text': 'You can just put everything right in the root app component.', 'start': 1834.8, 'duration': 4.246}, {'end': 1841.199, 'text': 'All right.', 'start': 1840.899, 'duration': 0.3}, {'end': 1844.423, 'text': "So we've talked about the major frameworks.", 'start': 1841.38, 'duration': 3.043}, {'end': 1851.351, 'text': "Now, one huge trend that I'm seeing in 2019, going into 2020, is server side rendering.", 'start': 1844.623, 'duration': 6.728}, {'end': 1855.796, 'text': "as opposed to the traditional single page web app, that's rendered on the client side,", 'start': 1851.351, 'duration': 4.445}, {'end': 1859.2, 'text': "because that's by default when you use something like create react app.", 'start': 1855.796, 'duration': 3.404}, {'end': 1863.224, 'text': 'It generates an app that runs on the client.', 'start': 1859.821, 'duration': 3.403}], 'summary': 'Server side rendering is a major trend in 2019-2020.', 'duration': 32.629, 'max_score': 1830.595, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/0pThnRneDjw/pics/0pThnRneDjw1830595.jpg'}, {'end': 2065.96, 'src': 'embed', 'start': 2040.785, 'weight': 8, 'content': [{'end': 2046.489, 'text': 'If you use Gatsby, it does all the data fetching from local files during build time.', 'start': 2040.785, 'duration': 5.704}, {'end': 2048.59, 'text': "And it's very, very performant.", 'start': 2047.049, 'duration': 1.541}, {'end': 2051.672, 'text': 'Gatsby sites are incredibly fast.', 'start': 2048.949, 'duration': 2.723}, {'end': 2056.795, 'text': 'And something like Gatsby has a lot in common with Next.js, which we just talked about.', 'start': 2052.232, 'duration': 4.563}, {'end': 2059.496, 'text': 'They both provide a boilerplate application.', 'start': 2057.155, 'duration': 2.341}, {'end': 2060.658, 'text': "They're both performant.", 'start': 2059.657, 'duration': 1.001}, {'end': 2061.658, 'text': 'They have good SEO.', 'start': 2060.678, 'duration': 0.98}, {'end': 2065.96, 'text': 'However, Next.js needs a server to run because it renders on the server.', 'start': 2062.099, 'duration': 3.861}], 'summary': 'Gatsby excels in data fetching and performance, similar to next.js, with good seo.', 'duration': 25.175, 'max_score': 2040.785, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/0pThnRneDjw/pics/0pThnRneDjw2040785.jpg'}], 'start': 832.3, 'title': 'Essential web development skills and trends', 'summary': 'Emphasizes the importance of learning vanilla javascript, dom manipulation, json, modern javascript (es6), git, developer tools, and apis in web development. it also discusses text editor extensions, basic deployment options, front-end development skills, and trends in web development for 2019-2020, focusing on server-side rendering, static site generators, and popular javascript frameworks.', 'chapters': [{'end': 1105.117, 'start': 832.3, 'title': 'Key skills for web development', 'summary': 'Emphasizes the importance of learning vanilla javascript, including the fundamentals, dom manipulation, json, and modern javascript (es6), along with the significance of git, developer tools, and apis in web development.', 'duration': 272.817, 'highlights': ['The importance of learning vanilla JavaScript Emphasizes the significance of understanding vanilla JavaScript for web development, highlighting its role as the programming language of the browser and its necessity for dynamic page functionality.', 'The need to learn about DOM manipulation and JSON Underlines the importance of grasping the fundamentals of manipulating the Document Object Model (DOM) and understanding JavaScript Object Notation (JSON) for working with APIs and fetching data.', 'The recommendation to master modern JavaScript (ES6) Suggests mastering modern JavaScript, particularly ES6, due to its significant update with features like arrow functions, template literals, and promises, which have enhanced JavaScript functionality.', 'The significance of learning Git and version control Stresses the importance of learning Git for version control, creating separate branches, and pushing code, emphasizing its relevance in web development and programming.', 'The importance of familiarizing with browser developer tools Highlights the necessity of getting familiar with browser developer tools, such as the Chrome dev tools, for tasks like editing HTML/CSS, debugging JavaScript, and monitoring network requests and responses.']}, {'end': 1387.855, 'start': 1105.117, 'title': 'Text editor extensions and basic deployment', 'summary': 'Discusses the importance of text editor extensions for improving workflow efficiency and the options for basic website deployment, emphasizing simplicity and cost-effectiveness.', 'duration': 282.738, 'highlights': ['Text editor extensions like Live Server, Live SAS Compiler, and Bracket Colorizer can enhance productivity when working with frameworks like React or Vue. Mentions specific extensions and their role in improving workflow efficiency.', 'Emmett tool significantly boosts HTML writing speed in VS Code, making the process approximately five times faster. Quantifies the improvement in HTML writing speed using Emmett tool.', 'NPM and Yarn are JavaScript package managers that enable quick package installations, relevant for front-end development and node usage. Discusses the relevance of NPM and Yarn for JavaScript development and potential usage scenarios.', 'Managed hosting companies like InMotion and HostGator are suitable for hosting small sites or web apps, providing easy setup and management through cPanel. Emphasizes the simplicity and cost-effectiveness of using managed hosting companies for small website deployment.', 'Netlify provides an easy-to-use static hosting option with features such as continuous deployment, free SSL certificate, and form submission without complex scripting requirements. Highlights the advantages of using Netlify for website hosting and deployment.']}, {'end': 1830.314, 'start': 1388.336, 'title': 'Front-end development and javascript frameworks', 'summary': "Discusses the skills required to become a basic front-end developer, including building mobile-friendly layouts, utilizing css frameworks, adding dynamic page functionality with javascript, and the importance of learning front-end javascript frameworks such as react, vue, and angular. it also highlights the increasing popularity of vue and svelte, and the trend towards using lighter state management solutions like react's context api and vuex in 2020.", 'duration': 441.978, 'highlights': ['The chapter discusses the skills required to become a basic front-end developer, including building mobile-friendly layouts, utilizing CSS frameworks, adding dynamic page functionality with JavaScript, and the importance of learning front-end JavaScript frameworks such as React, Vue, and Angular. The transcript emphasizes the skills necessary to become a basic front-end developer, such as building mobile-friendly layouts, utilizing CSS frameworks, adding dynamic page functionality with JavaScript, and the significance of learning front-end JavaScript frameworks like React, Vue, and Angular.', "It also highlights the increasing popularity of Vue and Svelte, and the trend towards using lighter state management solutions like React's context API and VueX in 2020. The transcript points out the growing popularity of Vue and Svelte and the trend towards using lighter state management solutions like React's context API and VueX in 2020."]}, {'end': 2104.891, 'start': 1830.595, 'title': 'Trends in web development 2019-2020', 'summary': 'Discusses the trends in web development for 2019-2020, emphasizing the shift towards server-side rendering with frameworks like next.js and nuxt for react and vue, and the rise of static site generators such as gatsby and gridsome, highlighting their benefits in terms of performance, seo, and automatic code splitting.', 'duration': 274.296, 'highlights': ['Server-side rendering trend The trend in 2019-2020 is towards server-side rendering with frameworks like Next.js and Nuxt for React and Vue, as it brings benefits like production proximity, file system routing, and improved SEO.', 'Benefits of server-side rendering Server-side rendering offers benefits such as file system routing for creating routes easily, improved SEO as content is already present for search engine crawlers, and automatic code splitting, providing a range of features out of the box.', 'Static site generators like Gatsby Gatsby, a popular static site generator for React, is highlighted for its ability to generate incredibly fast static web pages by fetching data from local files during build time, providing performance, good SEO, and the capability to create blogs and directory type content using Markdown or headless CMS.']}], 'duration': 1272.591, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/0pThnRneDjw/pics/0pThnRneDjw832300.jpg', 'highlights': ['The trend in 2019-2020 is towards server-side rendering with frameworks like Next.js and Nuxt for React and Vue, as it brings benefits like production proximity, file system routing, and improved SEO.', 'The importance of learning vanilla JavaScript for web development, highlighting its role as the programming language of the browser and its necessity for dynamic page functionality.', 'The need to learn about DOM manipulation and JSON for working with APIs and fetching data.', 'The recommendation to master modern JavaScript (ES6) due to its significant update with features like arrow functions, template literals, and promises, which have enhanced JavaScript functionality.', 'The significance of learning Git for version control, creating separate branches, and pushing code, emphasizing its relevance in web development and programming.', 'The chapter discusses the skills required to become a basic front-end developer, including building mobile-friendly layouts, utilizing CSS frameworks, adding dynamic page functionality with JavaScript, and the importance of learning front-end JavaScript frameworks such as React, Vue, and Angular.', 'Netlify provides an easy-to-use static hosting option with features such as continuous deployment, free SSL certificate, and form submission without complex scripting requirements.', 'Emmett tool significantly boosts HTML writing speed in VS Code, making the process approximately five times faster.', 'Static site generators like Gatsby, a popular static site generator for React, is highlighted for its ability to generate incredibly fast static web pages by fetching data from local files during build time, providing performance, good SEO, and the capability to create blogs and directory type content using Markdown or headless CMS.', 'Managed hosting companies like InMotion and HostGator are suitable for hosting small sites or web apps, providing easy setup and management through cPanel.']}, {'end': 2572.853, 'segs': [{'end': 2128.374, 'src': 'embed', 'start': 2107.017, 'weight': 0, 'content': [{'end': 2116.625, 'text': 'OK. so another huge player in 2020 is going to be TypeScript, or is TypeScript, and TypeScript is a superset of JavaScript,', 'start': 2107.017, 'duration': 9.608}, {'end': 2125.172, 'text': "meaning it's it's everything that JavaScript is, but with some added features, and one of those features is the the ability to have static types,", 'start': 2116.625, 'duration': 8.547}, {'end': 2128.374, 'text': "because by default, JavaScript doesn't use static types.", 'start': 2125.172, 'duration': 3.202}], 'summary': 'Typescript is a superset of javascript, a huge player in 2020 with added features like static types.', 'duration': 21.357, 'max_score': 2107.017, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/0pThnRneDjw/pics/0pThnRneDjw2107017.jpg'}, {'end': 2322.832, 'src': 'heatmap', 'start': 2227.291, 'weight': 1, 'content': [{'end': 2233.796, 'text': "So if you if you know a majority of the stuff that I've talked about, you could call yourself a front end wizard.", 'start': 2227.291, 'duration': 6.505}, {'end': 2241.521, 'text': "So, if you're familiar with a popular front end framework, you can build advanced front end apps or interfaces, have a smooth front end workflow,", 'start': 2233.876, 'duration': 7.645}, {'end': 2246.525, 'text': 'interact with APIs and data, manage application and component level state.', 'start': 2241.521, 'duration': 5.004}, {'end': 2252.769, 'text': 'And then as a bonus, you have, you know, server side rendering with next or next and then static site generation.', 'start': 2247.045, 'duration': 5.724}, {'end': 2259.511, 'text': 'I mean, this is we pretty much gone over all of the front end technologies that you might need to learn.', 'start': 2253.269, 'duration': 6.242}, {'end': 2260.652, 'text': 'All right.', 'start': 2259.531, 'duration': 1.121}, {'end': 2263.013, 'text': "So now we're going to move on to server side.", 'start': 2260.732, 'duration': 2.281}, {'end': 2268.655, 'text': "So if you want to be a back end developer or a full stack developer, you're going to need to learn a server side language.", 'start': 2263.273, 'duration': 5.382}, {'end': 2273.957, 'text': 'And I mean, I have some languages here that that you can choose from.', 'start': 2269.415, 'duration': 4.542}, {'end': 2284.369, 'text': "Obviously Node.js is not a language, it's a JavaScript runtime, but it basically allows you to use JavaScript as a server-side language.", 'start': 2275.118, 'duration': 9.251}, {'end': 2290.416, 'text': "And I have it highlighted because that's what I prefer and there's a few reasons for that.", 'start': 2284.789, 'duration': 5.627}, {'end': 2297.34, 'text': "Node.js is extremely fast, it's asynchronous, it's single-threaded and it's very fast,", 'start': 2291.396, 'duration': 5.944}, {'end': 2304.764, 'text': "and it's very suitable for web apps as long as they're not CPU-intensive, which most web apps are not.", 'start': 2297.34, 'duration': 7.424}, {'end': 2310.708, 'text': 'Another huge reason that I like Node is because I work with JavaScript on the front end.', 'start': 2305.465, 'duration': 5.243}, {'end': 2312.689, 'text': 'I work with React and Vue.', 'start': 2310.768, 'duration': 1.921}, {'end': 2318.231, 'text': 'So having JavaScript on the back end just makes sense to me, having it all be the same language.', 'start': 2313.509, 'duration': 4.722}, {'end': 2322.832, 'text': "That's why you see the mern stack, the mean stack, and why these are so popular.", 'start': 2318.551, 'duration': 4.281}], 'summary': 'To be a front-end wizard, learn popular front-end framework for advanced apps and interfaces, smooth workflow, api interaction, data management, and server-side rendering with next or static site generation. for backend or full stack, consider learning node.js for its speed, asynchronous nature, and use of javascript, making it suitable for web apps.', 'duration': 25.492, 'max_score': 2227.291, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/0pThnRneDjw/pics/0pThnRneDjw2227291.jpg'}, {'end': 2406.793, 'src': 'heatmap', 'start': 2357.524, 'weight': 0.915, 'content': [{'end': 2360.826, 'text': 'Next, we have PHP, which a lot of people give crap to.', 'start': 2357.524, 'duration': 3.302}, {'end': 2364.208, 'text': "And it's unfortunate because PHP can be a great language.", 'start': 2361.066, 'duration': 3.142}, {'end': 2365.309, 'text': "It's very practical.", 'start': 2364.268, 'duration': 1.041}, {'end': 2367.811, 'text': "It's simple to deploy just about anywhere.", 'start': 2365.809, 'duration': 2.002}, {'end': 2370.353, 'text': 'You have Laravel, you have WordPress.', 'start': 2368.631, 'duration': 1.722}, {'end': 2374.597, 'text': 'PHP is great for freelancers that need to get stuff out quickly.', 'start': 2370.853, 'duration': 3.744}, {'end': 2379.762, 'text': "If you're planning on working for a large company, PHP might not be the best choice.", 'start': 2375.398, 'duration': 4.364}, {'end': 2387.528, 'text': "But if you're freelancing or building personal projects and stuff like that, PHP can be a great choice.", 'start': 2380.302, 'duration': 7.226}, {'end': 2392.309, 'text': "It's become cool to just bash PHP and I really don't like that.", 'start': 2387.548, 'duration': 4.761}, {'end': 2396.65, 'text': 'I mean, PHP was the first language I learned and I still really like it.', 'start': 2392.369, 'duration': 4.281}, {'end': 2406.793, 'text': "I don't do a lot of content with it just because more people seem to want JavaScript, and I do prefer JavaScript, but I think that PHP,", 'start': 2396.99, 'duration': 9.803}], 'summary': 'Php is practical and great for freelancers for quick deployment with platforms like laravel and wordpress, but may not be the best choice for large companies.', 'duration': 49.269, 'max_score': 2357.524, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/0pThnRneDjw/pics/0pThnRneDjw2357524.jpg'}, {'end': 2396.65, 'src': 'embed', 'start': 2365.809, 'weight': 2, 'content': [{'end': 2367.811, 'text': "It's simple to deploy just about anywhere.", 'start': 2365.809, 'duration': 2.002}, {'end': 2370.353, 'text': 'You have Laravel, you have WordPress.', 'start': 2368.631, 'duration': 1.722}, {'end': 2374.597, 'text': 'PHP is great for freelancers that need to get stuff out quickly.', 'start': 2370.853, 'duration': 3.744}, {'end': 2379.762, 'text': "If you're planning on working for a large company, PHP might not be the best choice.", 'start': 2375.398, 'duration': 4.364}, {'end': 2387.528, 'text': "But if you're freelancing or building personal projects and stuff like that, PHP can be a great choice.", 'start': 2380.302, 'duration': 7.226}, {'end': 2392.309, 'text': "It's become cool to just bash PHP and I really don't like that.", 'start': 2387.548, 'duration': 4.761}, {'end': 2396.65, 'text': 'I mean, PHP was the first language I learned and I still really like it.', 'start': 2392.369, 'duration': 4.281}], 'summary': "Php is great for freelancers, but not ideal for large companies. it's simple to deploy and suitable for personal projects.", 'duration': 30.841, 'max_score': 2365.809, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/0pThnRneDjw/pics/0pThnRneDjw2365809.jpg'}, {'end': 2506.643, 'src': 'embed', 'start': 2478.172, 'weight': 3, 'content': [{'end': 2480.452, 'text': "I've built a couple small projects with it.", 'start': 2478.172, 'duration': 2.28}, {'end': 2489.455, 'text': "It's a compiled language and it has efficient concurrency much like languages like C and C++, although it's done much easier.", 'start': 2481.312, 'duration': 8.143}, {'end': 2494.376, 'text': "So it's very powerful and not just for web development, many areas of programming.", 'start': 2490.055, 'duration': 4.321}, {'end': 2502.141, 'text': "And it's a fast-growing language, and if you like it, then I'd say go for it and choose it as your server-side language.", 'start': 2495.096, 'duration': 7.045}, {'end': 2505.423, 'text': 'Building REST APIs with Go is pretty easy.', 'start': 2502.681, 'duration': 2.742}, {'end': 2506.643, 'text': "I've done it a couple times.", 'start': 2505.443, 'duration': 1.2}], 'summary': 'Go is a fast-growing, powerful language with efficient concurrency for various programming areas, including web development and building rest apis.', 'duration': 28.471, 'max_score': 2478.172, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/0pThnRneDjw/pics/0pThnRneDjw2478172.jpg'}], 'start': 2107.017, 'title': 'Typescript and 2020 significance', 'summary': "Discusses typescript's significance in 2020 as a superset of javascript, emphasizing its static types, compatibility with front-end and back-end frameworks, and widespread usage. it also highlights the benefits of learning front-end frameworks and server-side languages, including the relevance of node.js and javascript for full-stack development, the practicality of php for freelancers, and the potential of golang for efficient concurrency.", 'chapters': [{'end': 2195.467, 'start': 2107.017, 'title': 'Typescript in 2020', 'summary': 'Discusses the significance of typescript in 2020, highlighting its role as a superset of javascript with added features including static types, its compatibility with front-end and back-end frameworks, support in various editors, and the typescript compiler, emphasizing its flexibility and widespread usage.', 'duration': 88.45, 'highlights': ['TypeScript is a superset of JavaScript, offering added features such as the ability to have static types, providing flexibility in declaring variables, parameters, and custom types. It can be used on its own or within front-end frameworks like React or Vue, and is by default in Angular, with support in various editors.', 'TypeScript incorporates everything in the ES 2015 spec, including modules, decorators, and classes, and has a TypeScript compiler that compiles code to clean JavaScript, enhancing development processes and code quality.', "TypeScript's usage is widespread, with great tooling support in VS Code and other editors, making it a significant player in 2020 for front-end and back-end development, showcasing its adaptability and extensive developer adoption.", "The significance of TypeScript's optional nature, allowing developers to choose whether to use static types, reflects its flexibility, with its broad usage leading to varied opinions about its necessity, highlighting the diverse perspectives within the developer community."]}, {'end': 2572.853, 'start': 2195.827, 'title': 'Front-end and server-side technologies', 'summary': 'Discusses the benefits of learning front-end frameworks and server-side languages, highlighting the relevance of node.js and javascript for full-stack development, the practicality of php for freelancers, and the potential of golang for efficient concurrency.', 'duration': 377.026, 'highlights': ['Node.js is highlighted as a preferred server-side language due to its speed, asynchronous nature, and suitability for web apps, making it a popular choice for full-stack development. Node.js is extremely fast, asynchronous, and suitable for web apps, making it a popular choice for full-stack development.', 'The practicality of PHP for freelancers is emphasized, as it is simple to deploy and suitable for quick development, making it a great choice for personal projects and freelancing. PHP is practical, simple to deploy, and suitable for quick development, making it ideal for personal projects and freelancing.', 'The potential of Golang for efficient concurrency and its fast-growing nature is highlighted, suggesting it as a strong choice for server-side development. Golang offers efficient concurrency and fast-growing potential, making it a strong choice for server-side development.']}], 'duration': 465.836, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/0pThnRneDjw/pics/0pThnRneDjw2107017.jpg', 'highlights': ['TypeScript is a superset of JavaScript, offering static types and flexibility, widely used in front-end and back-end development.', 'Node.js is preferred for full-stack development due to its speed, asynchronous nature, and suitability for web apps.', 'PHP is practical, simple to deploy, and suitable for quick development, making it ideal for personal projects and freelancing.', 'Golang offers efficient concurrency and fast-growing potential, making it a strong choice for server-side development.']}, {'end': 3858.464, 'segs': [{'end': 2601.42, 'src': 'embed', 'start': 2573.513, 'weight': 0, 'content': [{'end': 2576.974, 'text': "All right, so let's look at server side frameworks, and there's a lot of them.", 'start': 2573.513, 'duration': 3.461}, {'end': 2578.954, 'text': "So I'm going to try to go through this pretty quickly.", 'start': 2577.054, 'duration': 1.9}, {'end': 2581.435, 'text': 'So for Node.js, you have a bunch of options.', 'start': 2579.394, 'duration': 2.041}, {'end': 2584.376, 'text': 'Express is definitely the most popular.', 'start': 2581.655, 'duration': 2.721}, {'end': 2588.917, 'text': "Express is a minimalistic framework, meaning it doesn't do too much extra for you.", 'start': 2584.496, 'duration': 4.421}, {'end': 2593.678, 'text': 'It gives you the tools to handle, you know, HTTP requests and responses,', 'start': 2589.397, 'duration': 4.281}, {'end': 2600.02, 'text': "but it's completely up to you on how you handle those and how you build in authentication and stuff like that.", 'start': 2593.678, 'duration': 6.342}, {'end': 2601.42, 'text': 'None of that stuff is included.', 'start': 2600.08, 'duration': 1.34}], 'summary': 'Express is the most popular minimalistic framework for node.js, offering tools for handling http requests and responses.', 'duration': 27.907, 'max_score': 2573.513, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/0pThnRneDjw/pics/0pThnRneDjw2573513.jpg'}, {'end': 2619.886, 'src': 'heatmap', 'start': 2573.513, 'weight': 0.7, 'content': [{'end': 2576.974, 'text': "All right, so let's look at server side frameworks, and there's a lot of them.", 'start': 2573.513, 'duration': 3.461}, {'end': 2578.954, 'text': "So I'm going to try to go through this pretty quickly.", 'start': 2577.054, 'duration': 1.9}, {'end': 2581.435, 'text': 'So for Node.js, you have a bunch of options.', 'start': 2579.394, 'duration': 2.041}, {'end': 2584.376, 'text': 'Express is definitely the most popular.', 'start': 2581.655, 'duration': 2.721}, {'end': 2588.917, 'text': "Express is a minimalistic framework, meaning it doesn't do too much extra for you.", 'start': 2584.496, 'duration': 4.421}, {'end': 2593.678, 'text': 'It gives you the tools to handle, you know, HTTP requests and responses,', 'start': 2589.397, 'duration': 4.281}, {'end': 2600.02, 'text': "but it's completely up to you on how you handle those and how you build in authentication and stuff like that.", 'start': 2593.678, 'duration': 6.342}, {'end': 2601.42, 'text': 'None of that stuff is included.', 'start': 2600.08, 'duration': 1.34}, {'end': 2609.603, 'text': 'On the upside, it gives you a lot of freedom to build things how you want and to build what you want and do it your own way.', 'start': 2602.58, 'duration': 7.023}, {'end': 2613.024, 'text': 'Koa is another very minimalistic framework.', 'start': 2610.143, 'duration': 2.881}, {'end': 2614.884, 'text': "It's actually very similar to Express.", 'start': 2613.064, 'duration': 1.82}, {'end': 2619.886, 'text': 'You have Adonis, which is much higher level and kind of reminds me of Laravel, actually.', 'start': 2615.345, 'duration': 4.541}], 'summary': 'Node.js offers various server side frameworks like express and koa, providing freedom and minimalistic features.', 'duration': 46.373, 'max_score': 2573.513, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/0pThnRneDjw/pics/0pThnRneDjw2573513.jpg'}, {'end': 2714.95, 'src': 'embed', 'start': 2685.278, 'weight': 1, 'content': [{'end': 2687.679, 'text': "There's also a bunch of helpful libraries you can use.", 'start': 2685.278, 'duration': 2.401}, {'end': 2688.94, 'text': 'It has migrations.', 'start': 2687.719, 'duration': 1.221}, {'end': 2697.647, 'text': "I mean, it's a heavy framework relative to something like Express, but it gives you a lot to work with, and it's very elegant.", 'start': 2689.02, 'duration': 8.627}, {'end': 2704.668, 'text': "PHP is criticized a lot for being messy, but if you look at Laravel code, it's actually very clean and elegant,", 'start': 2698.007, 'duration': 6.661}, {'end': 2709.089, 'text': 'and even people that crap on PHP still think Laravel is a pretty good framework.', 'start': 2704.668, 'duration': 4.421}, {'end': 2714.95, 'text': 'You also have Symfony, which is funny because Laravel is actually, part of it is built from Symfony components.', 'start': 2709.729, 'duration': 5.221}], 'summary': "Laravel offers migration and elegant, clean code. it's a heavy framework, but widely praised.", 'duration': 29.672, 'max_score': 2685.278, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/0pThnRneDjw/pics/0pThnRneDjw2685278.jpg'}, {'end': 2783.545, 'src': 'embed', 'start': 2754.944, 'weight': 2, 'content': [{'end': 2757.746, 'text': 'You have to do things in a certain way, the Django way.', 'start': 2754.944, 'duration': 2.802}, {'end': 2762.43, 'text': 'But in turn for that, in return, you get a lot of features such as authentication.', 'start': 2758.126, 'duration': 4.304}, {'end': 2765.032, 'text': 'You even get a complete admin panel for your data.', 'start': 2762.47, 'duration': 2.562}, {'end': 2774.098, 'text': "So Django is, you know, it's a large, full featured framework, whereas Flask is very minimalistic, similar to Express and Slim.", 'start': 2765.592, 'duration': 8.506}, {'end': 2779.702, 'text': 'And it gives you what you need, but you make the rest of the decisions and you have a lot of freedom to do what you want.', 'start': 2774.118, 'duration': 5.584}, {'end': 2783.545, 'text': "And I honestly can't pick one of the two.", 'start': 2780.322, 'duration': 3.223}], 'summary': 'Django offers a complete framework with features like authentication and admin panel, while flask provides minimalistic freedom.', 'duration': 28.601, 'max_score': 2754.944, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/0pThnRneDjw/pics/0pThnRneDjw2754944.jpg'}, {'end': 2823.67, 'src': 'embed', 'start': 2795.993, 'weight': 3, 'content': [{'end': 2799.716, 'text': "Visual Studio is a great IDE when you're working with ASP.NET.", 'start': 2795.993, 'duration': 3.723}, {'end': 2808.021, 'text': "Like I said before, I don't have a ton of experience, but I plan on learning more about ASP.NET in C Sharp.", 'start': 2800.736, 'duration': 7.285}, {'end': 2814.425, 'text': 'So for Java, you have many web frameworks, the most popular being Spring or Spring MVC.', 'start': 2808.802, 'duration': 5.623}, {'end': 2817.808, 'text': "I've never used it, but I know people that have that really like it.", 'start': 2814.866, 'duration': 2.942}, {'end': 2823.67, 'text': 'Ruby, of course, you have Ruby on Rails, which is also a very opinionated framework.', 'start': 2818.548, 'duration': 5.122}], 'summary': 'Visual studio is great for asp.net; java has spring, ruby has ruby on rails.', 'duration': 27.677, 'max_score': 2795.993, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/0pThnRneDjw/pics/0pThnRneDjw2795993.jpg'}, {'end': 2895.424, 'src': 'heatmap', 'start': 2837.075, 'weight': 0.974, 'content': [{'end': 2841.557, 'text': 'Not in terms of how fast it is, but in terms of how fast you can create things.', 'start': 2837.075, 'duration': 4.482}, {'end': 2848.48, 'text': "And then Golang, I don't think you really need a framework in many cases, just because of the way the language is.", 'start': 2842.317, 'duration': 6.163}, {'end': 2854.003, 'text': "But Revel or Reveal, I don't really know how to pronounce it, is one that seems to be pretty popular.", 'start': 2848.6, 'duration': 5.403}, {'end': 2855.844, 'text': "But again, I've never used it.", 'start': 2854.383, 'duration': 1.461}, {'end': 2858.218, 'text': 'All right.', 'start': 2857.898, 'duration': 0.32}, {'end': 2863.1, 'text': "So when you work on the back end or a full stack, you're going to be working with databases.", 'start': 2858.378, 'duration': 4.722}, {'end': 2866.681, 'text': 'Most Web apps need, you know, a place to store data.', 'start': 2863.18, 'duration': 3.501}, {'end': 2872.803, 'text': 'In many cases, you have certain stacks like the Mern stack where the M stands for MongoDB.', 'start': 2867.521, 'duration': 5.282}, {'end': 2879.889, 'text': "you have the lamp stack where, uh, one of the m's stands for mysql, so that's php mysql.", 'start': 2873.343, 'duration': 6.546}, {'end': 2888.758, 'text': "so certain technologies, certain languages kind of go go well with certain uh databases, but you're not stuck stuck to that.", 'start': 2879.889, 'duration': 8.869}, {'end': 2895.424, 'text': "like if you use react and node and all that, you don't have to use mongodb, you can use postgres if you want,", 'start': 2888.758, 'duration': 6.666}], 'summary': 'Golang enables fast development; different tech stacks work with various databases.', 'duration': 58.349, 'max_score': 2837.075, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/0pThnRneDjw/pics/0pThnRneDjw2837075.jpg'}, {'end': 2939.819, 'src': 'embed', 'start': 2909.971, 'weight': 4, 'content': [{'end': 2914.093, 'text': 'They use tables and columns, which visually can be compared to like a spreadsheet.', 'start': 2909.971, 'duration': 4.122}, {'end': 2920.875, 'text': "I'd say relational databases are the most popular and they're a pretty solid choice and you can use them with just about any language.", 'start': 2914.933, 'duration': 5.942}, {'end': 2925.676, 'text': 'As far as which one, I prefer Postgres just because I find it easy to work with.', 'start': 2921.455, 'duration': 4.221}, {'end': 2926.416, 'text': "It's fast.", 'start': 2925.736, 'duration': 0.68}, {'end': 2929.497, 'text': "It's an object relational database.", 'start': 2927.596, 'duration': 1.901}, {'end': 2934.738, 'text': 'And I use MySQL for years or MySQL, however you want to pronounce it.', 'start': 2930.297, 'duration': 4.441}, {'end': 2939.819, 'text': "I use that for years and then switch to Postgres because I don't know, I just liked it a little more.", 'start': 2934.838, 'duration': 4.981}], 'summary': 'Relational databases like postgres are popular, easy to use, and fast.', 'duration': 29.848, 'max_score': 2909.971, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/0pThnRneDjw/pics/0pThnRneDjw2909971.jpg'}, {'end': 3125.237, 'src': 'embed', 'start': 3098.931, 'weight': 5, 'content': [{'end': 3106.697, 'text': "You're also probably going to learn an ORM, which is an object relational mapper, or an ODM, which is an object data mapper,", 'start': 3098.931, 'duration': 7.766}, {'end': 3111.881, 'text': "which are basically abstraction layers, so something that you'll have in your application.", 'start': 3106.697, 'duration': 5.184}, {'end': 3118.208, 'text': 'Mongoose is a good example of one SQLize even frameworks like Django and Laravel.', 'start': 3112.401, 'duration': 5.807}, {'end': 3125.237, 'text': 'they have their own abstraction layer to interact with data, fetch it and insert, update, delete and so on.', 'start': 3118.208, 'duration': 7.029}], 'summary': 'Learning orm/odm in application development is crucial, with examples like mongoose and sqlize.', 'duration': 26.306, 'max_score': 3098.931, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/0pThnRneDjw/pics/0pThnRneDjw3098931.jpg'}, {'end': 3373.273, 'src': 'heatmap', 'start': 3317.86, 'weight': 6, 'content': [{'end': 3320.363, 'text': "So, you know, I don't I don't shit on WordPress at all.", 'start': 3317.86, 'duration': 2.503}, {'end': 3322.706, 'text': 'All right.', 'start': 3322.145, 'duration': 0.561}, {'end': 3325.749, 'text': 'so now you know how to build applications,', 'start': 3322.706, 'duration': 3.043}, {'end': 3337.421, 'text': 'but hosting a full-stack app or a back-end app is a bit more complicated than just a front-end HTML CSS JavaScript site,', 'start': 3325.749, 'duration': 11.672}, {'end': 3339.583, 'text': 'especially if you have databases and stuff.', 'start': 3337.421, 'duration': 2.162}, {'end': 3343.187, 'text': "So you're most likely going to have to be pretty familiar with the command line.", 'start': 3339.943, 'duration': 3.244}, {'end': 3347.968, 'text': "You'll be logging into your servers using SSH, which is a secure shell.", 'start': 3343.867, 'duration': 4.101}, {'end': 3352.549, 'text': 'You might use a password or set up something called SSH keys.', 'start': 3348.828, 'duration': 3.721}, {'end': 3355.289, 'text': 'I do have a crash course on SSH to help you out with this.', 'start': 3352.609, 'duration': 2.68}, {'end': 3360.63, 'text': "Normally, you'll run your app in a web server environment such as NGINX or Apache.", 'start': 3355.969, 'duration': 4.661}, {'end': 3362.011, 'text': 'I prefer NGINX.', 'start': 3361.031, 'duration': 0.98}, {'end': 3366.032, 'text': "I think it's less complicated, seems to be a little more popular as well.", 'start': 3362.031, 'duration': 4.001}, {'end': 3369.852, 'text': "There's just a few config files you'll need to get familiar with.", 'start': 3366.832, 'duration': 3.02}, {'end': 3373.273, 'text': "You'll need to learn how to set up virtual hosts and stuff like that.", 'start': 3370.232, 'duration': 3.041}], 'summary': 'To host a full-stack or back-end app, familiarity with command line and ssh, running app in a web server environment like nginx, and configuring virtual hosts is essential.', 'duration': 55.413, 'max_score': 3317.86, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/0pThnRneDjw/pics/0pThnRneDjw3317860.jpg'}, {'end': 3481.292, 'src': 'embed', 'start': 3450.846, 'weight': 7, 'content': [{'end': 3457.53, 'text': 'I just hope in the near future they can make the whole process of back-end deployment easier than it currently is,', 'start': 3450.846, 'duration': 6.684}, {'end': 3459.972, 'text': 'something like Netlify has done on the front end.', 'start': 3457.53, 'duration': 2.442}, {'end': 3464.956, 'text': 'You may also want to look into virtualization and containers with Docker.', 'start': 3461.373, 'duration': 3.583}, {'end': 3473.084, 'text': 'Docker allows you to install and run pretty much whatever you want in a separate process on your machine inside something called a container,', 'start': 3465.437, 'duration': 7.647}, {'end': 3481.292, 'text': "and other people can use those containers, and you can have the same environment on multiple machines, and it's really good for teams.", 'start': 3473.084, 'duration': 8.208}], 'summary': 'Ease back-end deployment, utilize docker for easy virtualization and containerization.', 'duration': 30.446, 'max_score': 3450.846, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/0pThnRneDjw/pics/0pThnRneDjw3450846.jpg'}, {'end': 3624.798, 'src': 'heatmap', 'start': 3578.62, 'weight': 1, 'content': [{'end': 3580.761, 'text': 'setting up dev environments and workflows.', 'start': 3578.62, 'duration': 2.141}, {'end': 3584.283, 'text': 'building back end APIs and microservices.', 'start': 3580.761, 'duration': 3.522}, {'end': 3586.224, 'text': 'working with databases.', 'start': 3584.283, 'duration': 1.941}, {'end': 3587.665, 'text': 'deploying to production.', 'start': 3586.224, 'duration': 1.441}, {'end': 3591.367, 'text': 'So if you can do this stuff, then you are a full stack rock star.', 'start': 3587.785, 'duration': 3.582}, {'end': 3598.17, 'text': "OK, so now we're going to look at some stuff that isn't really required, but it is some stuff you might want to learn.", 'start': 3592.728, 'duration': 5.442}, {'end': 3600.19, 'text': 'For instance, mobile development.', 'start': 3598.87, 'duration': 1.32}, {'end': 3606.212, 'text': 'We have some really cool technologies to build native mobile apps with web technologies.', 'start': 3600.33, 'duration': 5.882}, {'end': 3611.573, 'text': "So in the past, we'd have to use something like Java or Objective C or Swift.", 'start': 3606.732, 'duration': 4.841}, {'end': 3616.775, 'text': 'But now we can build apps with like JavaScript and native apps, not not just JavaScript.', 'start': 3611.653, 'duration': 5.122}, {'end': 3620.736, 'text': 'web apps that are wrapped in a web view.', 'start': 3617.535, 'duration': 3.201}, {'end': 3624.798, 'text': 'so flutter is really really popular now, going into 2020.', 'start': 3620.736, 'duration': 4.062}], 'summary': 'Learn full-stack development, mobile app dev, and flutter for 2020.', 'duration': 46.178, 'max_score': 3578.62, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/0pThnRneDjw/pics/0pThnRneDjw3578620.jpg'}, {'end': 3650.548, 'src': 'embed', 'start': 3624.798, 'weight': 8, 'content': [{'end': 3633.862, 'text': "it's an open source sdk created by google and it allows you to build and compile uis to native mobile apps.", 'start': 3624.798, 'duration': 9.064}, {'end': 3637.643, 'text': 'actually, it can be used for desktop apps and web apps as well.', 'start': 3633.862, 'duration': 3.781}, {'end': 3643.386, 'text': 'now, flutter does use a programming language called dart, which is a pretty easy language to learn.', 'start': 3637.643, 'duration': 5.743}, {'end': 3650.548, 'text': "a lot of people say it's a mix of javascript and java, So if you already know one language, Dart is pretty easy to pick up,", 'start': 3643.386, 'duration': 7.162}], 'summary': 'Flutter is an open source sdk by google, using dart for easy ui building for mobile, desktop, and web apps.', 'duration': 25.75, 'max_score': 3624.798, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/0pThnRneDjw/pics/0pThnRneDjw3624798.jpg'}, {'end': 3791.032, 'src': 'embed', 'start': 3767.12, 'weight': 9, 'content': [{'end': 3774.503, 'text': 'With PWAs, you can utilize something called service workers in the browser to cache your content for offline viewing.', 'start': 3767.12, 'duration': 7.383}, {'end': 3778.665, 'text': 'So this way, if you lose connection, it functions more like a native app.', 'start': 3774.883, 'duration': 3.782}, {'end': 3783.567, 'text': "You can still do certain things and you don't just get some ugly error message.", 'start': 3778.685, 'duration': 4.882}, {'end': 3786.729, 'text': 'Like I said, you can also make them installable.', 'start': 3784.827, 'duration': 1.902}, {'end': 3788.19, 'text': 'You can add a splash screen.', 'start': 3786.789, 'duration': 1.401}, {'end': 3791.032, 'text': 'It must be over HTTPS.', 'start': 3788.21, 'duration': 2.822}], 'summary': 'Pwas use service workers to cache content for offline viewing, making it function like a native app and avoiding ugly error messages. they are also installable and require https.', 'duration': 23.912, 'max_score': 3767.12, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/0pThnRneDjw/pics/0pThnRneDjw3767120.jpg'}, {'end': 3844.072, 'src': 'embed', 'start': 3815.898, 'weight': 10, 'content': [{'end': 3820.479, 'text': 'It uses Node.js and Chromium to be able to build desktop apps with JavaScript.', 'start': 3815.898, 'duration': 4.581}, {'end': 3824.54, 'text': "And I mean, there's a lot of advantages.", 'start': 3821.139, 'duration': 3.401}, {'end': 3827.601, 'text': "There's high data security, high performance, accessibility.", 'start': 3824.58, 'duration': 3.021}, {'end': 3835.386, 'text': "And when I first heard of Electron, I thought, you know, the apps that you're going to build with this are going to be mediocre at best.", 'start': 3828.36, 'duration': 7.026}, {'end': 3844.072, 'text': 'But some of my favorite desktop apps are actually built with Electron, including VS Code, which is probably my favorite desktop app, period.', 'start': 3835.946, 'duration': 8.126}], 'summary': 'Electron leverages node.js and chromium for high-performance, secure desktop apps. vs code is a prime example.', 'duration': 28.174, 'max_score': 3815.898, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/0pThnRneDjw/pics/0pThnRneDjw3815898.jpg'}], 'start': 2573.513, 'title': 'Web development technologies', 'summary': "Covers server-side frameworks for node.js, php, and python, as well as web frameworks like asp.net, spring mvc, ruby on rails, and golang's revel. it also delves into database technologies, content management systems, hosting full-stack applications, and native mobile app development technologies, providing a comprehensive overview of the web development landscape.", 'chapters': [{'end': 2774.098, 'start': 2573.513, 'title': 'Server side frameworks comparison', 'summary': 'Compares server side frameworks for node.js, php, and python, highlighting popular options like express, laravel, and django, emphasizing their features and levels of minimalism or high-level support.', 'duration': 200.585, 'highlights': ['Express for Node.js is a minimalistic framework, offering freedom in building and handling HTTP requests and responses, but lacking built-in features like authentication and database migrations.', 'Laravel is a high-level PHP framework allowing quick development of CRUD apps with authentication, offering a lot of features and elegant code.', 'Django provides a high-level, opinionated framework with built-in features like authentication and a complete admin panel for data, while Flask is a very minimalistic framework for Python, similar to Express and Slim.']}, {'end': 3074.617, 'start': 2774.118, 'title': 'Web frameworks and databases', 'summary': "Discusses various web frameworks such as asp.net, spring mvc, ruby on rails, and golang's revel, along with the comparison of relational and nosql databases like mongodb and firebase.", 'duration': 300.499, 'highlights': ['ASP.NET MVC and Spring MVC are powerful web frameworks for C# and Java, respectively.', 'Ruby on Rails allows for rapid development of web applications.', 'Relational databases like Postgres and MySQL are popular choices, while NoSQL databases like MongoDB offer more flexibility for application-level field creation.', 'MongoDB is the most popular NoSQL database, used in MEAN, MERN, and MEVN stacks, and can be used with a GUI like Compass and cloud service like Mongo Atlas.', 'Firebase provides authentication, file storage, and a complete cloud platform for smaller to medium-sized apps.']}, {'end': 3322.706, 'start': 3075.257, 'title': 'Database technologies and content management systems', 'summary': 'Discusses the use of sqlite and nedb for small applications, learning sql and orm/odm, the relevance of graphql as a query language for apis, the rise of headless cmss, and the continued popularity of traditional cmss like wordpress and drupal.', 'duration': 247.449, 'highlights': ['Learning SQL and ORM/ODM is essential for working with databases, especially in frameworks like Django, Laravel, and Mongoose.', 'GraphQL is a significant technology that simplifies data retrieval and manipulation, especially in JavaScript, with the potential to be added to existing applications.', 'Headless CMSs like Contentful, prismic.io, and sanity strappy are gaining traction, allowing flexible frontend development with various technologies.', "Traditional CMSs like WordPress and Drupal remain popular, especially for freelancers catering to clients' needs for content creation and management."]}, {'end': 3600.19, 'start': 3322.706, 'title': 'Hosting full-stack applications', 'summary': 'Discusses hosting full-stack applications, including server environments like nginx, hosting options such as linode and heroku, and the relevance of docker and testing in deployment, emphasizing the skills required to become a full-stack rock star and optional knowledge of mobile development.', 'duration': 277.484, 'highlights': ['The skills required to become a full-stack rock star include building user interfaces, working with databases, deploying to production, and setting up dev environments and workflows. These skills encompass building user interfaces, working with databases, deploying to production, and setting up dev environments and workflows.', 'NGINX is preferred for hosting full-stack apps due to its simplicity and popularity compared to other web server environments like Apache. NGINX is recommended for hosting full-stack apps due to its simplicity and popularity over other web server environments like Apache.', 'Preferred hosting options for full-stack apps include bare bones cloud hosts like Linode, DigitalOcean, and Vulture, as well as platform-as-a-service options like Heroku, AWS, and Azure, with the latter being suitable for large scalable web apps. Preferred hosting options for full-stack apps include bare bones cloud hosts like Linode, DigitalOcean, and Vulture, as well as platform-as-a-service options like Heroku, AWS, and Azure, with the latter being suitable for large scalable web apps.', 'Docker is a valuable tool for deployment, allowing for the installation and running of various processes within containers, providing consistent environments across multiple machines and facilitating team collaboration. Docker is a valuable tool for deployment, allowing for the installation and running of various processes within containers, providing consistent environments across multiple machines and facilitating team collaboration.', 'Testing, including unit testing and integration testing, is beneficial for larger applications, with test-driven development helping to save headaches in the long run. Testing, including unit testing and integration testing, is beneficial for larger applications, with test-driven development helping to save headaches in the long run.']}, {'end': 3858.464, 'start': 3600.33, 'title': 'Native mobile app development technologies', 'summary': 'Discusses the rise in popularity of technologies such as flutter, react native, native script, ionic, xamarin, and progressive web apps for native mobile app development, as well as the usage of electron for building desktop apps with javascript.', 'duration': 258.134, 'highlights': ['Flutter, an open source sdk created by Google, is gaining popularity for building native mobile apps using the Dart programming language, described as a mix of JavaScript and Java. Flutter is gaining popularity for native mobile app development; it uses the Dart programming language, described as a mix of JavaScript and Java.', 'Progressive Web Apps (PWAs) are becoming popular for providing a native app experience in the browser, with features like offline content using service workers for caching and installability, along with a strict HTTPS requirement. PWAs are gaining popularity for providing a native app experience in the browser, with features like offline content and installability, along with a strict HTTPS requirement.', 'Electron, a framework using Node.js and Chromium, is highlighted as a powerful technology for building desktop apps with JavaScript, with examples of popular desktop apps built with Electron including VS Code, Atom, Postman, and Discord. Electron is highlighted as a powerful technology for building desktop apps with JavaScript, with examples of popular desktop apps built with Electron.']}], 'duration': 1284.951, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/0pThnRneDjw/pics/0pThnRneDjw2573513.jpg', 'highlights': ['Express for Node.js offers freedom in building and handling HTTP requests and responses, but lacks built-in features like authentication and database migrations.', 'Laravel is a high-level PHP framework allowing quick development of CRUD apps with authentication, offering a lot of features and elegant code.', 'Django provides a high-level, opinionated framework with built-in features like authentication and a complete admin panel for data, while Flask is a very minimalistic framework for Python, similar to Express and Slim.', 'ASP.NET MVC and Spring MVC are powerful web frameworks for C# and Java, respectively.', 'Relational databases like Postgres and MySQL are popular choices, while NoSQL databases like MongoDB offer more flexibility for application-level field creation.', 'Learning SQL and ORM/ODM is essential for working with databases, especially in frameworks like Django, Laravel, and Mongoose.', 'NGINX is preferred for hosting full-stack apps due to its simplicity and popularity compared to other web server environments like Apache.', 'Docker is a valuable tool for deployment, allowing for the installation and running of various processes within containers, providing consistent environments across multiple machines and facilitating team collaboration.', 'Flutter, an open source sdk created by Google, is gaining popularity for building native mobile apps using the Dart programming language, described as a mix of JavaScript and Java.', 'Progressive Web Apps (PWAs) are becoming popular for providing a native app experience in the browser, with features like offline content and installability, along with a strict HTTPS requirement.', 'Electron, a framework using Node.js and Chromium, is highlighted as a powerful technology for building desktop apps with JavaScript, with examples of popular desktop apps built with Electron.']}, {'end': 4363.267, 'segs': [{'end': 3955.069, 'src': 'embed', 'start': 3934.519, 'weight': 0, 'content': [{'end': 3944.566, 'text': 'Using the JAMstack is also cheaper and easier to scale because our deployment amounts to a stack of files that can be served from absolutely anywhere.', 'start': 3934.519, 'duration': 10.047}, {'end': 3950.528, 'text': "And I should definitely mention Netlify because it's a perfect place to host JAMstack applications.", 'start': 3945.346, 'duration': 5.182}, {'end': 3955.069, 'text': 'And as far as data, you could even use like a headless CMS as well.', 'start': 3951.368, 'duration': 3.701}], 'summary': 'Jamstack offers cheaper deployment and easy scaling with files served from anywhere, and netlify is a recommended hosting platform for jamstack applications.', 'duration': 20.55, 'max_score': 3934.519, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/0pThnRneDjw/pics/0pThnRneDjw3934519.jpg'}, {'end': 4027.235, 'src': 'embed', 'start': 3997.848, 'weight': 1, 'content': [{'end': 4003.109, 'text': "And then we can create what's called a serverless function that will do that task for us.", 'start': 3997.848, 'duration': 5.261}, {'end': 4007.53, 'text': 'So instead of having an always-on server, it just runs when we need it to.', 'start': 4003.329, 'duration': 4.201}, {'end': 4012.171, 'text': 'And this really reduces complexity as well as costs significantly.', 'start': 4007.61, 'duration': 4.561}, {'end': 4017.933, 'text': 'Some examples of third-party services are AWS Lambda, probably the most popular.', 'start': 4013.032, 'duration': 4.901}, {'end': 4021.694, 'text': 'But Netlify also provides serverless architecture.', 'start': 4018.293, 'duration': 3.401}, {'end': 4027.235, 'text': "And I definitely prefer Netlify because I think it's just much less of a hassle to set up.", 'start': 4022.014, 'duration': 5.221}], 'summary': 'Serverless functions reduce complexity and costs. aws lambda and netlify are popular options.', 'duration': 29.387, 'max_score': 3997.848, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/0pThnRneDjw/pics/0pThnRneDjw3997848.jpg'}, {'end': 4075.218, 'src': 'embed', 'start': 4045.438, 'weight': 3, 'content': [{'end': 4049.04, 'text': "Okay, so another trend that I'm seeing is API first design.", 'start': 4045.438, 'duration': 3.602}, {'end': 4053.003, 'text': 'And this is just really a concept, not an actual technology.', 'start': 4049.461, 'duration': 3.542}, {'end': 4058.467, 'text': 'So we have many different devices and platforms and just the internet of things.', 'start': 4053.523, 'duration': 4.944}, {'end': 4063.47, 'text': 'We have web apps, mobile apps, gaming consoles, Alexa plugins.', 'start': 4059.287, 'duration': 4.183}, {'end': 4070.935, 'text': 'Companies are starting to base everything off APIs and microservices and then building from that rather than the other way around,', 'start': 4063.85, 'duration': 7.085}, {'end': 4075.218, 'text': "which is what we've done traditionally, where we build a web app and then we build the API.", 'start': 4070.935, 'duration': 4.283}], 'summary': 'Api first design is a growing trend, with companies shifting towards api and microservices-based development for various platforms and devices.', 'duration': 29.78, 'max_score': 4045.438, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/0pThnRneDjw/pics/0pThnRneDjw4045438.jpg'}, {'end': 4118.979, 'src': 'embed', 'start': 4093.507, 'weight': 4, 'content': [{'end': 4099.095, 'text': 'So AI and machine learning are arguably the hottest trends in software development as a whole.', 'start': 4093.507, 'duration': 5.588}, {'end': 4108.368, 'text': 'A lot of times we think of machine learning and web development as separate things, which they are, but it can be useful in web development as well.', 'start': 4099.115, 'duration': 9.253}, {'end': 4109.711, 'text': "I mean, there's plenty of web apps.", 'start': 4108.408, 'duration': 1.303}, {'end': 4114.154, 'text': 'that can make use of machine learning and neural networks and all that good stuff.', 'start': 4110.31, 'duration': 3.844}, {'end': 4118.979, 'text': 'It can be used as an alternative to conventional data mining.', 'start': 4115.276, 'duration': 3.703}], 'summary': 'Ai and machine learning are hot trends in software development, applicable to web apps.', 'duration': 25.472, 'max_score': 4093.507, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/0pThnRneDjw/pics/0pThnRneDjw4093507.jpg'}, {'end': 4233.239, 'src': 'embed', 'start': 4204.999, 'weight': 5, 'content': [{'end': 4209.822, 'text': 'A language like C or C++ is obviously much faster than JavaScript.', 'start': 4204.999, 'duration': 4.823}, {'end': 4215.446, 'text': 'So what WebAssembly offers is an alternative for some of the things JavaScript does in the browser.', 'start': 4210.243, 'duration': 5.203}, {'end': 4220.876, 'text': "It's an efficient low-level bytecode, and it can be executed by a browser.", 'start': 4216.415, 'duration': 4.461}, {'end': 4228.358, 'text': "And it's extremely fast, and it can be generated by languages like C, C++, and also Rust, like I mentioned earlier.", 'start': 4221.056, 'duration': 7.302}, {'end': 4233.239, 'text': 'Rust is a much easier language to learn than C and C++.', 'start': 4229.398, 'duration': 3.841}], 'summary': 'Webassembly offers a faster alternative to javascript in the browser, generated by languages like c, c++, and rust.', 'duration': 28.24, 'max_score': 4204.999, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/0pThnRneDjw/pics/0pThnRneDjw4204999.jpg'}], 'start': 3858.504, 'title': 'Jamstack, serverless architecture, and 2020 trends', 'summary': 'Introduces jamstack, emphasizing better performance, cheaper deployment, and easier scalability. it also discusses serverless architecture benefits like reduced complexity and costs. additionally, it covers 2020 software development trends, focusing on api first design, ai and machine learning integration, and the emergence of webassembly, highlighting their potential impact on web development.', 'chapters': [{'end': 4043.68, 'start': 3858.504, 'title': 'Jamstack and serverless architecture', 'summary': 'Introduces the jamstack, which stands for javascript, apis, and markup, offering better performance, cheaper deployment, and easier scalability, and discusses the benefits of serverless architecture, such as reduced complexity and costs.', 'duration': 185.176, 'highlights': ['The JAMstack, which stands for JavaScript, APIs, and Markup, offers better performance, cheaper deployment, and easier scalability. The JAMstack provides better performance, as pages are generated at deploy time, cheaper deployment, and easier scalability due to the deployment amounting to a stack of files that can be served from anywhere.', 'Serverless architecture reduces complexity and costs significantly by using third-party backends as a service and serverless functions. Serverless architecture reduces complexity and costs by using third-party backends as a service and serverless functions, such as AWS Lambda and Netlify, which only run when needed, reducing the need for an always-on server.', 'Netlify is a perfect place to host JAMstack applications and provides serverless architecture, reducing complexity and costs. Netlify is a perfect place to host JAMstack applications and provides serverless architecture, reducing complexity and costs significantly, making it less of a hassle to set up and create serverless functions.']}, {'end': 4363.267, 'start': 4045.438, 'title': '2020 software development trends', 'summary': 'Discusses the trends of api first design, the integration of ai and machine learning in web development, and the emergence of webassembly, emphasizing the shift towards api first design in software development and the potential impact of ai and webassembly on web development.', 'duration': 317.829, 'highlights': ['API first design is a growing trend in software development, with companies shifting towards building APIs and microservices first, followed by the development of mobile apps, web apps, and other platforms around the APIs. Companies are increasingly adopting API first design, building APIs and microservices before developing mobile apps, web apps, and other platforms, in contrast to the traditional approach.', 'AI and machine learning are prominent trends, with applications in web development for tasks such as content production, user behavior analysis, and security threat removal. AI and machine learning are widely used in web development for tasks like content production, user behavior analysis, and security threat removal, with Python being a dominant language for machine learning and JavaScript featuring libraries like TensorFlow.js and Brain.js.', 'WebAssembly, although in early stages, offers the potential for faster and more efficient web-based applications by allowing the use of low-level languages like C++ alongside JavaScript. WebAssembly, still in its early stages, enables the use of low-level languages like C++ alongside JavaScript, offering the potential for faster and more efficient web-based applications.']}], 'duration': 504.763, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/0pThnRneDjw/pics/0pThnRneDjw3858504.jpg', 'highlights': ['JAMstack provides better performance, cheaper deployment, and easier scalability.', 'Serverless architecture reduces complexity and costs significantly.', 'Netlify is a perfect place to host JAMstack applications and provides serverless architecture.', 'API first design is a growing trend in software development.', 'AI and machine learning are prominent trends in web development.', 'WebAssembly offers the potential for faster and more efficient web-based applications.']}], 'highlights': ['The video is expected to be over an hour long, serving as a detailed resource for developers to pick their learning path.', 'The industry slowdown prompts the decision to transition to shorter trend-focused videos instead of complete guides.', 'Provides a comprehensive guide to technologies relevant to web development, covering languages, frameworks, libraries, and tools (2017-present).', 'Understanding different paths in web development The chapter covers various career paths in web development, such as working for a company, freelancing, starting a business, or becoming a consultant, emphasizing the impact of career choice on the technologies to be learned.', 'Options for types of development (front end, back end, full stack) The chapter discusses the options of being a front end developer, dealing with client-side technologies, a back end developer, handling APIs and databases, or a full stack developer, highlighting the popularity of the full stack option.', "Importance of knowing one's goals and preferences Emphasizing the significance of understanding one's goals and preferences in determining what to learn, the chapter highlights the importance of choosing a path aligned with individual aspirations in web development.", 'Necessities and system tools for web development The chapter emphasizes the basic system tools required for web development, including the need for a computer and an operating system, and discusses the hardware and operating system preferences, detailing the suitability of mid-range laptops or desktops and the flexibility of using Mac, Windows, or Linux.', 'VS Code is recommended for most languages due to its performance, features, extensions, and popularity in the industry.', 'Visual Studio is popular for .NET development, while Eclipse or NetBeans are suitable for Java or other compiled languages.', 'Chrome and Firefox are respected web browser choices, with Chrome being fast and utilizing the V8 JavaScript engine, while Firefox offers excellent developer tools.', 'The default bash terminal on Mac and Linux, and git bash on Windows, are recommended for working with system commands and CLIs, with third-party options like iTerm and Hyper also available.', 'Adobe XD is a preferred design software for creating mockups, while Sketch and Figma are other popular options, especially for Mac users.', 'Learning CSS Grid and Flexbox is crucial for easier positioning and layout.', 'HTML5 enables semantic layouts using tags like header, footer, and article.', 'CSS custom properties act as variables, reducing repetition in styles.', 'Understanding CSS fundamentals such as colors, fonts, positioning, and the box model is essential.', 'Creating responsive layouts is crucial for adapting to various screen sizes.', 'TypeScript is a superset of JavaScript, offering static types and flexibility, widely used in front-end and back-end development.', 'Node.js is preferred for full-stack development due to its speed, asynchronous nature, and suitability for web apps.', 'The trend in 2019-2020 is towards server-side rendering with frameworks like Next.js and Nuxt for React and Vue, as it brings benefits like production proximity, file system routing, and improved SEO.', 'The importance of learning vanilla JavaScript for web development, highlighting its role as the programming language of the browser and its necessity for dynamic page functionality.', 'The need to learn about DOM manipulation and JSON for working with APIs and fetching data.', 'The recommendation to master modern JavaScript (ES6) due to its significant update with features like arrow functions, template literals, and promises, which have enhanced JavaScript functionality.', 'The significance of learning Git for version control, creating separate branches, and pushing code, emphasizing its relevance in web development and programming.', 'Netlify provides an easy-to-use static hosting option with features such as continuous deployment, free SSL certificate, and form submission without complex scripting requirements.', 'Emmett tool significantly boosts HTML writing speed in VS Code, making the process approximately five times faster.', 'Static site generators like Gatsby, a popular static site generator for React, is highlighted for its ability to generate incredibly fast static web pages by fetching data from local files during build time, providing performance, good SEO, and the capability to create blogs and directory type content using Markdown or headless CMS.', 'Express for Node.js offers freedom in building and handling HTTP requests and responses, but lacks built-in features like authentication and database migrations.', 'Laravel is a high-level PHP framework allowing quick development of CRUD apps with authentication, offering a lot of features and elegant code.', 'Django provides a high-level, opinionated framework with built-in features like authentication and a complete admin panel for data, while Flask is a very minimalistic framework for Python, similar to Express and Slim.', 'Relational databases like Postgres and MySQL are popular choices, while NoSQL databases like MongoDB offer more flexibility for application-level field creation.', 'Learning SQL and ORM/ODM is essential for working with databases, especially in frameworks like Django, Laravel, and Mongoose.', 'NGINX is preferred for hosting full-stack apps due to its simplicity and popularity compared to other web server environments like Apache.', 'Docker is a valuable tool for deployment, allowing for the installation and running of various processes within containers, providing consistent environments across multiple machines and facilitating team collaboration.', 'JAMstack provides better performance, cheaper deployment, and easier scalability.', 'Serverless architecture reduces complexity and costs significantly.', 'Netlify is a perfect place to host JAMstack applications and provides serverless architecture.', 'API first design is a growing trend in software development.', 'AI and machine learning are prominent trends in web development.', 'WebAssembly offers the potential for faster and more efficient web-based applications.']}