Node Congress 2023 - certificate of participation

Explore the new frontier of battle-tested backends. A two-day conference on all things Node.js, gathering Back-end and Full-stack engineers across the globe in the cloud is here to help you staying up-to-date on the latest Node.js tech.

Node Congress

I’m attending @NodeCongress, the biggest conf on #JavaScript backends – by clicking the badge you may get free remote ticket & join me there with 5k other #nodejs devs & 35 great speakers #deno #cloudflare #awscloud

Node Congress 2023

Nick Taylor

<p><span>Fresh is a web framework based on Deno and Web standards built to run on the edge</span> </p>

Fresh: a new full stack web framework for Deno

Hi everyone, today we're going to talk about FRESH, a full stack web framework for Deno. Before we get started, a little bit about me, as mentioned I work at Netlify, I'm from Montreal Quebec Canada. If you're looking for me online, I'm at NickyT online pretty much everywhere. If you want to know a little more about me, you can visit my website at imdeveloper.com. I also stream on Twitch, so if that's something you're interested in, you can check out imdeveloper.live and I also have a YouTube channel that you can check at youtube.imdeveloper.com. I am also not a big fan of spiders. Alright so what are we going to cover today? We're going to go over what FRESH is, we're going to discuss web standards, and then we'll dig into the features of FRESH. After that there will be a short demo and then we can move on to questions and comments. Alright let's get to it. So what is FRESH? Well hold on, first we need to talk about Deno. So what is Deno? Deno is a runtime for JavaScript, TypeScript, and WebAssembly or WASM that uses V8. For the web, it runs on the edge. You can also use Deno to create command line interfaces, i.e. CLIs. It's got a built-in linter, there's a built-in code formatter, a built-in test runner, there's Node.js interoperability via Node specifiers, and there's also NPM interoperability via NPM specifiers and CDNs. Alright let's talk web standards. So Deno uses web standards, for example, import maps, fetch, request, and response. Like the little drawing over there says, just look it up on MDN. Great docs, but also that's pretty much what you'll need to reference most of the time if you're working with FRESH. As part of web standards, Deno is a part of the WinterCG, the Web Interoperable Runtimes Community Group. It's a space to collaborate on API interoperability for JavaScript runtimes. Feel free to read more about the WinterCG at wintercg.org. Alright so where were we? Assuming that you have Deno installed, getting FRESH installed is pretty quick. You can just run the command that you see on the slide deck here. So that's deno run-A-R and then https://fresh.deno.dev and the name of your project. That was a lot to say. Alright the installation is pretty quick and you have a couple of options. You can choose Tailwind for styles, go with VS Code integration via the Deno VS Code extension, and that's pretty much it. We'll go more into the styling story a little later in the talk. To start FRESH, we go into the root folder of the project in a shell and run deno task start. We won't get into it in this talk, but Deno has a built-in task runner that you can configure via a deno.json file. Alright so let's dig into what FRESH is. So what is FRESH? It's a full-stack web framework that runs on Deno. It's server-side rendered framework. It's got just-in-time rendering on the edge. It provides TypeScript support out of the box and there's nothing to configure to get up and running. There's no build step. There's no JavaScript delivered by default. It uses islands architecture for client interactivity. It uses Preact on the server and client side. And there's JSX support thanks to Preact and TypeScript. If you're unfamiliar with the amazing Preact project, it's a fast and smaller alternative to React with the same modern API. It only gets a mention here for now, but we'll dig into what islands architecture is a little later in the talk. Alright let's go over some of the features of FRESH. We've got static files we'll talk about, routes and routing, data fetching, middleware, error pages, styling, and then we'll get to islands. So first up we have static files. All static assets can be found in the static folder. Static assets, aside from image and source tags, do not have cache headers set on them. You can set cache headers manually or you can use the built-in asset helper to automatically cache an asset for a year. Here's an example of the asset helper in action. So I have this on my style sheet. I'm using the asset helper and what happens is it generates a unique URL which is composed of the asset file path followed by a query string with one key, underscore FRSH underscore C with a value that is the build ID from the deployment. And you can see as I mentioned, there also gets this in the cache control headers set in the response. So we have it there for a year. Alright let's dig into routes and routing. There are three kinds of routes. There's the handler route, which is typically for APIs, the component route, which is for pages, and then the hybrid route. And for hybrid routes, it's for pages that require handler routes. For example, a login page or a search page. Like in other frameworks, routes can also be dynamic. You can see in the table here that I took from the FRSH documentation that there are many types of file based routing patterns that are supported. One thing to note though is FRSH only supports server side rendering, so there is no concept of something like get static paths in Next.js or Astro since pages are never statically generated. Alright let's look at the data fetching story. So for data fetching, we have handler routes which I just mentioned, and we can also use hybrid routes to handle data fetching. For a handler route, all that is required is exporting a function that takes two arguments, a request and a context, and it returns a response. So in this case here, we have a handler which is using the Jokes API that ships with the FRSH demo site, and we can see here it's just generating a list of random jokes from an array and then it's returning that as a response. For hybrid routes, we define functions for actions in an exported variable called handler. We name the async functions in the handler object after HTTP verbs, for example, get. Where as the handler route in the previous example returns a response, typically in a hybrid route you'll want to return the result of the context render method. Think of context render as passing in server side rendered props to the page being rendered. When I say props, I mean react props. Looking at the example on the slide, one thing to note about props in FRSH is that it's not props.movies, the props from context.render are always in the props.data property. So for example, the array of movie props that is actually props.data, it's not props.data.movies. That's a lot of dots in that talk. Alright we're going to move on to middleware. Often like other frameworks, FRSH supports middleware. Middleware files are named underscore middleware dot ts and need to reside in the routes folder. Multiple middlewares are supported. Although Deno encourages you to use TypeScript, you could write the middleware in a JavaScript file. Let's look at an example. Say I navigate to slash movie slash Top Gun. Since we're hitting a dynamic movie route, that means we're using two middlewares. One in the root of the routes folder and one in the movie subfolder. In the case of multiple middlewares, the least specific one runs first. In our example, that means the root middleware runs first. It adds an x-conference header with the value node-congress-2023. Then the second middleware runs in the movie subfolder. It adds an x-movie-page header along with a cache header that caches the page for 60 seconds. If we navigate to slash movies, we can see the two middlewares giving a nice little handshake there. We can see the result in the response is that we get the cache control header and we get the two middlewares, the x-conference and the x-movie-page. Moving on, we're going to talk about error pages. Like other frameworks, you can define custom error pages. For example, the current slide shows a custom 404 page. These are component routes, but they have special props passed in. In the case of the 404 page, you have access to the unknown page props when the page is rendering. The unknown page props gives you access to things like the URL of the page that was not found. For a dynamic route, we call context.renderNotFound to render the 404 page if the page does not exist. Just to bring it back to data fetching, when we were discussing data fetching, I mentioned that we need to typically return the result of context.render for hybrid routes. That still holds, but as I mentioned, if you're on a page that is associated with a dynamic route and the page being loaded does not exist, we return context.renderNotFound instead. Context.renderNotFound will then pass the unknown page props that we were talking about a second ago to the 404 page. Let's move on to styling. When I first talked about Fresh, I mentioned that there was no build step. How does that affect styling our apps? Fresh gives you the option to enable TWIN, a server-side rendered implementation of Tailwind. This is great if you use Tailwind, but if the projects you're working on don't use Tailwind, what are your options? First, I would say modern CSS is pretty awesome these days. You could literally go with a good old style sheet. The fact that nested selectors are coming to browsers and we only have CSS variables and other goodies like has in CSS makes this a compelling choice. You could also add a build step that commits the build artifacts of your CSS tooling. You could accomplish this with a GitHub action or some other form of automation. Although it would work, it doesn't feel right committing build artifacts to the code base and it also goes against one of the promises of Fresh. No build step. I think what we're going to see here is innovation from userland where we may see more server-side rendered implementations of stuff like Sass, PostCSS, etc. much like the TWIN project. Another thing that I would love to see come to Fresh is Scope CSS. We have that in other frameworks like Vue, Svelte. I think that would be a great addition. All right, let's talk about islands. What is an island anyways? I mentioned it briefly when describing the architecture of Fresh, but we'll dig into island architecture a little more now. Long story short is it enables pockets of interactivity in your site or application. I'll leave this chunk of a blog post from Jason Miller up for a minute. But Jason Miller, one of the folks alongside Katie Seiler-Miller coined the term islands architecture. It's actually fitting that Jason is one of the folks that coined this term as he's also the creator of Preact, which Fresh uses. In islands architecture, the goal is to ship mainly static HTML and then mark certain regions of the document object model, i.e. the DOM, as available to hydrate or to use Fresh's terminology revive. When a page with islands loads, only the JavaScript for those islands is loaded. I mentioned that Fresh serves zero JavaScript to the client by default. So how do we enable the client-side interactivity that we're talking about in islands architecture? Fresh has two component folders. There's a components folder and an islands folder. Components in the components folder will always render server-side only, even if you add client-side interactivity to them. It just won't get sent down the JavaScript for the client-side interactivity. And components in the islands folder will render server-side as well as once the page loads and the client-side interactivity will be revived. So let's look at a classic interactive component, a counter. It has a couple of buttons. If you click plus one, it increments the counter. And if you click minus one, it decrements the counter. And in this case here, we have a couple. So how do we revive an island? So essentially what happens is the components that are islands get rendered server-side by Fresh. And if you were to do a view page source of the page that loaded, you will actually see the rendered markup for that particular island or islands. Along with the markup that's rendered for those islands, Fresh also adds a script of type application JSON with the ID underscore, underscore, FRSH, underscore, state as the ID. And in there, there is an array. In that array, the first element is another array, which is an array of all the props for every island that's in the page. The second element in the array is currently empty there, but that's for plugins. That's something we're not really going to touch on today. But if you're interested in the plugins, you can take a peek at the Fresh documentation. So as you can see here, I have JSX for my counter, and it starts off on the server-side where I say I'm passing in a prop with the value three for the start prop. And when it gets rendered on the page, we'll see that the initial props for that particular component get loaded in the array I mentioned. So how does it get revived? So we have that Fresh state that I just mentioned. And then one of the things that Fresh does is alongside the JavaScript related to that particular island, it has a revive function. And that revive function takes the list of the components. So for example, here, the counter, and it also passes in the first element of state, which is all the props for all the islands, as I mentioned. In the previous example, there was only one island. But if there was more than one island, how does Fresh map the initial state correctly? So if we have a couple here, we'll see that they just keep getting added to the array. But how does Fresh know that the counter with the start prop of three and the counter of start with prop five maps correctly to the array there? We talked about denoting interactive regions in the DOM when talking about islands architecture. Island components in Fresh get server-side rendered, as I mentioned, but they also get rendered with HTML comments surrounding them. The comment is prefixed with the FRSH dash followed by the name of the component, colon, and then the array index of where the island component state lives in the initial state for all islands that was initially loaded. It doesn't matter how many different island components there are or how many instances of each. The array index will be incremented in each HTML comment based on the order of the islands in the DOM. One thing to note is that this is just an implementation detail. You'll never need to manage this yourself. I just find it useful to understand the underlying technology. All right, we're going to move over to a short demo. So I'm just going to go ahead and move us over here. So what we have here is I just made a small demo site here. It's got a few pages, so the home here where we have some islands, so I have three counter components here. They're each managing their own state, and I also have a list of movies that goes to the movie route, and we can load up a movie, for example, like Top Gun. And if I open up the network panel here, let's refresh that again, and this has two middlewares running. And like I said, there was the first middleware in the routes root folder, and we can see that it has the x-conference header that that middleware provides. And then the subfolder middleware adds the x-movie-page header as well as the cache control of 60 seconds. All right, so we can close that. And here's an example of a hybrid page. So I'm just going to add a movie. So let's say Lord of the Rings, and I'll give it a rating of five, and I'm going to submit it. So we're on the same page, and the hybrid route has handlers in it in the handler object. And in this particular case, I'm passing a post, and that's what allows us to post back to the page and add the new movie here. For the purposes of this demo, I didn't use a database. It's just using a variable, so an in-memory database. But talking about data is totally out of scope of the talk, but just know that there's a lot of people working on the data problem on the edge. All right, so we're just going to kind of wrap up the demo here with... This is what the view page source looks like of that first page with the three different colored citrus fruits. I've taken out a lot of things just so that I can scroll through it. But the first thing is this is fresh just starting up here. That's what that script is. And you can see the folder here is based on the build ID. And then we can see that it only loads my counter JavaScript, which is for the island. And then we have my style, like I mentioned, and it's using the asset helper, and it's given it a unique ID, and it's got the... It's cached for a year, as I mentioned. I just wanted to show briefly here. So this is literally the code that got rendered minus I took out some SVGs for brevity. But we can see here, for example, that I have the first component here. It's denoted with the HTML comments, and then there's a second one and a third one. Then we have the fresh state here, and we can see there, the three there. And then we have that revive method down here, and we can see that it's running here. And we have our counter component, and then the state we're passing in, which is the props for all that. And that's pretty much the demo. All right, let's move back to the slide deck. And yeah, if you're interested in the demo, it's deployed at imdeveloper.com slash fresh-demo. You can also view the source code. It's at github.com slash nikityonline slash fresh-talk-demo. And we'll just finish off with just some resources that I think you'll all find useful. So there's a bunch of stuff about fresh, Deno, Preact, some TypeScript, web standards, and also just some newer things with Deno, like the node compatibility, and also a link to the winter CG. For folks interested, the slide deck is available at imdeveloper.com slash fresh. And that's pretty much it. We couldn't cover everything in about 20 minutes, but I hope this gave you all enough of a primer to get excited about fresh. Thanks, folks. ♪♪♪


We're bringing free articles, videos, courses, and tutorials to help you learn all about ReactJS, whether you're a beginner or a pro. Introduced in 2011, the framework has become essential for web and mobile developers alike, enabling modern apps by look and function. And while other JS tools have expanded or revised its original notions, React's popularity is still the one to beat.

React is a powerful JavaScript library for building user interfaces. Learn more about React with our comprehensive talks, workshops, tutorials and presentations. Our experts will help you understand the fundamentals of React, as well as advanced concepts such as state management, routing, performance optimization and more. With our resources, you’ll be able to create stunning web applications with React and take your development skills to the next level.

React Talks, Workshops, Tutorials and Presentations for JavaScript Developers

Building swift yet functional apps should be what all developers aspire to. And since you do, we put together a collection of talks and tutorials on application performance and made them available for free. Whether your challenge is on the front-end or the back-end, these talks and workshops will give your great tips and inspire you to try new solutions.

Performance is an essential skill for JavaScript developers. Our portal offers a range of talks, workshops, tutorials and presentations to help you become a better programmer and take your coding skills to the next level. Learn the latest techniques and strategies to improve the performance of your code, discover new tools to measure and track performance, and get tips on how to optimise your code for maximum efficiency. Whether youre looking to improve your existing skills or start from scratch, our comprehensive library of resources will provide you with all the information you need. Take your programming skills to the next level with our performance-focused talks, workshops, tutorials and presentations.

Maximising Performance with Talks, Workshops, Tutorials and Presentations for JavaScript Developers

Testing is a crucial albeit difficult part of software delivery. Make sure your JavaScript apps are always spotless with the following compilation of free online tutorials, courses, and talks from our conferences. They'll take you on a journey from basics to advanced methods and even philosophical questions about testing.

This page contains talks, workshops, tutorials and presentations about testing for JavaScript developers. Learn the best practices of testing code, how to design tests that are most effective, and how to debug problems in your code. Discover how to use automated testing tools, such as Jest and Mocha, to make sure your code is working correctly. Get answers to your questions on topics like unit testing, integration testing, end-to-end testing, and more. With these resources, you can become an expert in testing JavaScript code.

Testing Talks, Workshops, Tutorials, and Presentations for JavaScript Developers

Next.js is a React-based web application framework that allows for server-side rendering, static site generation, and client-side rendering. It offers features such as automatic code splitting, serverless functions, and dynamic imports to improve website performance and scalability. Additionally, it provides an easy-to-use file-based routing system and supports a wide range of technologies and libraries.

The page contains talks, workshops, tutorials and presentations about next.js, a powerful JavaScript framework for building web applications and websites. Learn the fundamentals of this framework through our comprehensive collection of talks, workshops, tutorials and presentations. Get an in-depth understanding of how to use Next.js to create modern, fast, and reliable applications. Discover best practices for structuring and deploying your code, and learn how to leverage the latest features and capabilities of Next.js. With these resources, youll be able to develop high-performing web applications quickly and easily.

Exploring Next.js: Talks, Workshops, Tutorials & Presentations for JavaScript Developers

Coding is like a piece of art — in its ideal state, it should be both functional and beautiful. But how to reach that point? Whether you’d like to make your JavaScript code cleaner or just discover how seasoned developers deal with debugging or building a product, the following tutorials will show you how to include best practices in your daily routine.

The page contains talks, workshops, tutorials and presentations about the best practices for JavaScript developers. Learn from experienced professionals about techniques and strategies to optimize your code, debug errors, and enhance your development skills. Get up-to-date information on the latest trends in the JavaScript ecosystem, such as frameworks, libraries, and tools. Discover the best practices for writing efficient, maintainable, and secure code. Take advantage of our interactive sessions and hands-on tutorials that will help you become a better JavaScript developer.

Best Practices in JavaScript Development: Talks, Workshops, Tutorials and Presentations

Advanced in the context of JavaScript means having a deep understanding of the language and its features. This includes being able to write complex code that makes use of advanced language features such as closures, prototypes, classes, and asynchronous programming. Advanced JavaScript developers are also capable of creating custom libraries and frameworks to extend the language’s capabilities. Additionally, they should be able to debug and optimize their code to ensure it runs efficiently.

Welcome to the advanced learning portal for JavaScript developers! Here, you will find a selection of talks, workshops, tutorials and presentations to help you take your JavaScript skills to the next level. Our resources cover a wide range of topics, including object-oriented programming, data structures, algorithms, design patterns, web development, and more. Whether youre an experienced programmer looking to expand your knowledge or a beginner looking to get up to speed quickly, this portal has something for everyone. With our cutting-edge content and expert instructors, you can be sure that youll get the most out of your learning experience. Start exploring today and take your JavaScript skills to the next level.

Advanced JavaScript Talks, Workshops, Tutorials & Presentations

Did you know that TypeScript lets you write JavaScript the way you really want to? Explore the variety of Typescript courses we compiled from our speakers and collaborators and find out what you can do with this language and how it improves the development experience.

This page contains talks, workshops, tutorials and presentations about Typescript. Learn from experienced JavaScript developers how to get started with Typescript and how to use it in your projects. Get the latest tips and tricks for coding with Typescript and find out how to optimize your code for maximum performance. Discover how to create efficient and maintainable applications with Typescript and take your development skills to the next level.

Learn Typescript: Talks, Workshops, Tutorials & Presentations for JavaScript Developers

Design systems in web design are a set of interconnected design components that are organized in a systematic manner. They provide a consistent visual language and design guidelines for creating digital products, enabling designers to work faster and more efficiently. Design systems also promote better collaboration among team members and help to maintain brand consistency.

Design systems are an essential part of modern web development, and this page contains talks, workshops, tutorials and presentations about design systems for JavaScript developers. From understanding the basics of design systems to mastering advanced techniques, youll find the resources you need to become an expert in creating and maintaining design systems. Learn how to create a unified visual language, define components and use them across multiple projects, and keep your design system up to date as your project evolves. Our talks, workshops, tutorials and presentations will give you the knowledge and tools you need to create and maintain robust design systems.

Design Systems: Talks, Workshops, Tutorials & Presentations for JavaScript Developers

They are independent, reusable, and they let you build fast and eye-catching apps. Obviously, we’re talking about React components, which allow you to take your work to a whole another level. Tune in to the free online tutorials and masterclasses below to learn how to get the most out of their functionality and styling.

This page contains talks, workshops, tutorials and presentations about React Components. Learn the fundamentals of building components with React, from creating and styling custom components to efficiently managing data flow. Discover how to create dynamic user interfaces with reusable components and explore techniques for debugging and testing your application. Get up-to-date with the latest features of React, including hooks and suspense, and learn best practices for deploying and maintaining your React applications.

React Components: Talks, Workshops, Tutorials and Presentations

Scalability is the ability of a system, network, or application to handle a growing amount of work in a capable manner or its ability to be enlarged to accommodate that growth. In terms of JavaScript, scalability refers to the ability to quickly and efficiently increase the size and complexity of a website or web application without sacrificing performance or usability. This includes the ability to add more nodes (computers) to a distributed system, as well as the ability to easily add more features and capabilities to an existing system.

Scalability is an important concept for JavaScript developers, and this page contains a variety of talks, workshops, tutorials and presentations to help them understand the fundamentals and best practices of scalability. From understanding the basics of scaling applications to mastering advanced techniques, these resources provide comprehensive coverage of the topic, allowing developers to stay up-to-date on the latest trends and technologies. With these materials, developers can learn how to create scalable applications that can handle increasing workloads and traffic without sacrificing performance or reliability.

Scalability Talks, Workshops, Tutorials and Presentations for JavaScript Developers

Feeling like boosting up your career? In this section, you'll find free JavaScript courses, tutorials, and coding lessons to help you stay up-to-date with the latest developments in the JS ecosystem and take you from basic to advanced. Dive into it, and you'll find out that the world's most popular programming language is easy to learn.

Welcome to the JavaScript Learning Portal! Here you will find a variety of talks, workshops, tutorials and presentations about JavaScript. Whether youre a beginner looking to learn the basics or an experienced developer looking to stay up-to-date on the latest trends in the language, this portal has something for everyone. We have organized our content into different categories so you can easily find what you need. Explore our selection of talks, workshops, tutorials and presentations today and start learning more about JavaScript!

JavaScript Talks, Workshops, Tutorials & Presentations - Learn JavaScript from the Experts!

Build tools are programs that automate the process of creating a software application. They are used to compile source code, run tests, package applications, and deploy them into production environments. Build tools help developers save time by automating the process of building an application from its source code. In JavaScript development, build tools like Grunt, Gulp, Webpack, and Browserify can be used to automate tasks such as minifying code, running unit tests, and compiling Sass or Less files.

This page contains talks, workshops, tutorials and presentations about build tools, a critical component of web development. Learn how to use build tools to automate tasks such as compilation, minification, unit testing, linting and more. Discover the best practices for efficient project management and get tips on how to get started with build tools. Get access to comprehensive resources from experienced professionals and stay up-to-date with the latest trends in JavaScript development.

Learn How to Use Build Tools for JavaScript Development: Talks, Workshops, Tutorials & Presentations

JS tooling is a term used to describe the tools and processes used to develop applications in JavaScript. This includes frameworks, libraries, build systems, task runners, and other tools that help developers create, test, and deploy their applications. We have talks and workshops on this topic to help students learn how to use these tools effectively and efficiently.

This page contains talks, workshops, tutorials and presentations about js tooling - the most up-to-date JavaScript tools and techniques for developers. Learn how to set up a JavaScript development environment, create custom scripts and build applications with the latest technologies. Discover the best practices for using popular tools like Gulp, Grunt, Webpack, Babel and more. Get tips on debugging and troubleshooting common problems. Whether you are a beginner or an experienced developer, these resources will help you get the most out of your JavaScript tooling.

Exploring JS Tooling: Talks, Workshops, Tutorials and Presentations

Managing the state of a browser-based JS application is tough — but it doesn’t have to. With tips and workarounds from our speakers’ tutorials and courses on JavaScript state management, you’ll find that even the most tedious tasks can be easy if you follow a few simple principles to avoid the most common pitfalls.

State management is a key concept in software development, particularly for JavaScript developers. This page contains talks, workshops, tutorials and presentations to help you understand state management and how it can be used to create powerful web applications. Learn the fundamentals of state management such as React, Redux, MobX and more, as well as best practices for managing state in your own projects. Get tips and tricks from experienced developers on how to use state management to build efficient and maintainable code. With this page, you will have all the resources you need to become an expert in state management.

State Management Talks, Workshops, Tutorials & Presentations for JavaScript Developers

Node.js is a JavaScript runtime environment that allows developers to run JavaScript code outside of a web browser. It uses an event-driven, non-blocking I/O model to handle requests efficiently and is particularly suited for building scalable network applications. Node.js comes with a built-in package manager (npm) and a large ecosystem of libraries and modules that makes it easy to develop server-side applications.

This page provides talks, workshops, tutorials and presentations about the popular server-side JavaScript runtime environment, Node.js. Learn from experienced developers how to set up Node.js, use its features and build powerful applications. Get up to date with the latest trends in web development and find out how to make use of Node.js for your projects.

Node.js Talks, Workshops, Tutorials & Presentations: Everything You Need to Know About Node.js

Code quality is a measure of how well written, organized, and maintainable a piece of code is. It is important for any programming language, but especially so for JavaScript due to its dynamic nature. Good code quality means that the code is easy to read and understand, has good structure and organization, and is easy to modify or extend. It also means that the code is secure, efficient, and performs as expected. In short, it is the practice of writing code that is clean, efficient, and bug-free.

The page contains talks, workshops, tutorials and presentations about code quality. Our content is designed to help JavaScript developers improve their coding skills, understand the importance of code quality, and develop better coding practices. We provide a range of resources to help developers learn how to write clean, efficient code that meets industry standards. Whether youre just starting out or are an experienced coder, our content will help you level-up your coding game.

Improving Code Quality: Talks, Workshops, Tutorials & Presentations for JavaScript Developers

DevTools is a set of web development tools built into the Chrome browser. They allow developers to inspect and debug HTML, CSS, and JavaScript code on any web page. DevTools provides access to the Document Object Model (DOM), allowing developers to view the structure of a page and make changes to it in real-time. It also provides features such as network performance analysis, JavaScript debugging, and memory profiling, which help developers optimize their code.

DevTools Talks, Workshops, Tutorials and Presentations

Discover the power of DevTools with our range of talks, workshops, tutorials and presentations. Our experts will help you understand how to use DevTools to debug, inspect, and improve your code. Learn best practices for debugging, profiling, and optimizing your JavaScript applications. Get up-to-date on the latest trends in DevTools and find out how they can help you become a better developer. Whether youre a beginner or an experienced programmer, we have something for everyone. Come join us and explore the world of DevTools!

DevTools Talks, Workshops, Tutorials & Presentations: Get the Most Out of Your JavaScript Development!

Web development is the process of creating websites, applications and other online services. It involves a combination of coding languages such as HTML, CSS, JavaScript and others to create an interactive user experience. The goal of web development is to create a website or application that is fast, secure, and easy to use. Web developers must understand how to design, build and maintain websites while also considering the user experience and making sure the code is optimized for performance.

The page contains talks, workshops, tutorials and presentations about web development for JavaScript developers. Learn the fundamentals of web development and use JavaScript to create dynamic and interactive websites. Our experts will guide you through the process from the basics of HTML and CSS to more advanced topics such as AJAX, jQuery, and Node.js. Get the skills you need to become a successful web developer and take your career to the next level.

Web Development Talks, Workshops, Tutorials, and Presentations

CSS stands for Cascading Style Sheets. It is a language used to style HTML elements on a web page. CSS is used to control the appearance of text, images, and other content on a web page. It can be used to set the font size, color, background, margins, padding, and more. CSS is an essential part of modern web development, and it is important for JavaScript developers to understand how to use it.

This page is a comprehensive resource for learning about CSS. Here you will find talks, workshops, tutorials, and presentations on the fundamentals of styling webpages with CSS. Our content is designed to help JavaScript developers gain the skills they need to create visually appealing and well-structured websites. We cover topics such as selectors, properties, values, inheritance, and more. With our resources, you can quickly master the basics of CSS and start building great webpages.

CSS Talks, Workshops, Tutorials & Presentations for JavaScript Developers

While ReactJS is one of the most popular frameworks out there, it still has its limits. That’s where React Hooks come to play: they are special functions that expand the abilities of functional components. Discover the following talks and workshops that will take you through React Hooks fundamentals and advanced techniques to ensure you’re always on top of your game.

React Hooks is a powerful feature of React that allows developers to write components with fewer lines of code. On this page, youll find talks, workshops, tutorials and presentations about React Hooks, so you can learn more about this important feature and become a better JavaScript developer. Weve gathered the best resources from experts in the field, so you can quickly get up to speed with React Hooks and start using them in your own projects.

React Hooks: Talks, Workshops, Tutorials and Presentations for JavaScript Developers

Fullstack is a term used to describe a developer who is knowledgeable in every layer of web development. This includes the front-end (client side) code such as HTML, CSS, and JavaScript, as well as the back-end (server side) code such as databases, server-side languages, and APIs. A fullstack developer can develop entire web applications from start to finish, including database design, user interface design, and coding.

Fullstack can be a daunting concept for JavaScript developers, but it doesnt have to be. Our collection of talks, workshops, tutorials, and presentations will help you understand the fundamentals of fullstack development, so you can start building powerful applications quickly and efficiently. With our comprehensive resources, youll learn how to use both backend and frontend technologies to create modern web apps, mobile apps, and more. Whether youre just getting started or looking to take your skills to the next level, our fullstack content will give you the knowledge and confidence you need to succeed.

Fullstack Talks, Workshops, Tutorials and Presentations for JavaScript Developers

Frontend refers to the part of a website or application that users interact with. It is typically built using HTML, CSS and JavaScript to create an interface that allows users to view and interact with content. Frontend developers are responsible for creating the visual elements of a website or application, such as layout, styling, animation, and user interaction. This includes designing how a page looks, how it responds to different events, and how it interacts with the user.

The page contains talks, workshops, tutorials and presentations about frontend and is designed for JavaScript developers looking to improve their knowledge and skills in this area. Here you can find the latest insights, tools and techniques to help you stay up-to-date with the ever-changing frontend landscape. Whether youre a beginner or an experienced developer, youll find something to help you become a better frontend engineer.