WebDevPro #30: Bubble Sort in CSS, DOM Manipulation with Vanilla JavaScript, JSON Parser, PostgreSQL Encryption, HTML Elements with Go.
Hi,
Welcome to the _webdevpro! Your one stop for all things Web Dev!
We start today’s issue with community discussions on:
In our tutorial, we cover from the book React 18 Design Patterns and Best Practices to help articulate your coding. Don't miss repository of manually curated collection of resources for frontend web developers.
Our relatively new section captures internet jibber-jabber about topics in the web ecosystem:
Today's news includes:
If you liked this installment, fill in our survey below and win a free Packt PDF.
Thanks,
Apurva Kadam
Editor-in-Chief, Packt
Together with SlashData
When do we go back to look for security vulnerabilities in the code that we write? How do you handle those and what security practices do you use when writing code?
Share your thoughts in the Software Supply Chain Security Survey for a chance to win an MX Master 3S, Raspberry Pi 4 Model B 4GB, $5 Udemy gift credits, and many more.
WebDev Community Speak
What is the WebDev industry talking about? Latest Developments? Cool tricks? Tutorials? Cheatsheets? How are Web Developers upskilling? Read about it all here.
24 Best Resources for HTML + CSS + JavaScript - To simplify the web development journey, this article is a curated a list of the 24 best resources specifically tailored for web developers. Covering the core technologies of HTML, CSS, and JavaScript, this guide aims to provide beginners and experts with valuable tools and insights to enhance their web development skills. Explore the resources here.
Simple Screen Recorder in 20 lines of JavaScript - Let's say you're fed up with the state of screen recorders' paywalls and limitations and want to go on coding your own - it turns out you can already have basic functionalities in a few lines of code. We can ask the browser to get the capture video stream for us using the screen capture API, but for security reasons we must ensure a user gesture triggered the capture. Learn more.
17 Essential Tools to Boost Your Productivity - With so many tools available, it's easy to get lost in the sea of options, leading to decision fatigue and inefficiency. This article is a handpicked list of 17 tools to address specific productivity challenges you may face from screen recording, keyboard shortcuts, and clipboard management to working with Regex, terminals, DB entries, APIs, and more. Check them out.
A guide to Auth & Access Control in web apps - This blog post is a guide to quickly get up to speed on how to do access control in web apps. So, if you are new to access control in web apps or have been doing it for some time but want to get a better idea of standard practices, read along!
Hate on Tailwind... I have seen that before! – When React first released the development community had strong opinions toward it. Fast forward to today, React is the dominant framework. It's quite remarkable. But how does all of this relate to Tailwind? What about today? Similar to React's history, Tailwind challenges many of the best practices we used to preach. Some people appreciate the advantages it offers, while others believe that the benefits don't outweigh the drawbacks. Explore the comparison here.
Bubble Sort...in PURE CSS? [No JS] – Want to create a functioning bubble sort algorithm...in pure CSS...and add visualizations? Well, you have come to the right place!
5 Open-Source Repositories for Faster Development in Monolithic Architecture- The monolith vs microservice argument rages on, but there’s no right answer. Architecture should always be driven by the use case, business, and product. If you’re building in a monolith, it helps to use tools that can let you release faster without having to build the functionality yourself. That lets you focus on your core business and application. Here are five open-source repositories for development in monolithic environments.
WebDev Repos
We at WebDevPro highlight Web resources in a week-on-week series. This week we bring you manually curated collection of resources for frontend web developers:
Algorithms: A self-contained step-by-step set of operations to be performed. Algorithms perform calculation, data processing, and/or automated reasoning tasks.
Design Patterns: Best practices that the programmer can use to solve common problems when designing an application or system.
Designs: Ready to use and well documented structures and frameworks for frontend development.
Event-Driven Programming: Event-driven programming is a programming paradigm in which the flow of the program is determined by events such as user actions, sensor outputs, or messages from other programs/threads.
Functional Programming: Functional programming is a programming paradigm, that treats computation as the evaluation of mathematical functions and avoids changing-state and mutable data.
Functional Reactive Programming (FRP): FRP is a programming paradigm for asynchronous dataflow programming using the building blocks of functional programming.
Internet Web Dev Jibber-Jabber
Random curious musings and interesting words about Web Dev on the Internet.
Mastering DOM Manipulation with Vanilla JavaScript - Whether you're developing or using a web component in any framework, you need to work with the DOM at a certain level. Knowing the browser DOM APIs and how to use them is crucial to development. This website covers the APIs, common problems, and provides answers to popular questions.
How Rust can Facilitate New Contributors while Decreasing Vulnerabilities - New contributors can bring a greater risk of introducing vulnerable code. One way to mitigate this is by rewriting components of C or C++ code in Rust— a language designed to apply to the same domains as C and C++, but with greater safety guarantees. This paper seeks to answer whether Rust can help keep new contributors from introducing vulnerabilities.
Building a High-performance JSON Parser - This talk is a case study of designing an efficient Go package. It uses the example of building a high-performance JSON parser.
PostgreSQL Encryption: The Available Options - By default, when you install PostgreSQL, there is no data encryption. The things that are protecting are “perimeter” defenses, like putting the physical equipment running the server in a datacenter, firewalls and strong passwords. It’s a good idea to plan your defenses on the assumption you’re going to get breached sooner or later. This blog covers encryption to protect your data.
Create HTML Elements with Go Code - elem is a lightweight Go library for creating HTML elements programmatically. Utilizing the strong typing features of Go, elem ensures type safety in defining and manipulating HTML elements, minimizing potential runtime errors. It simplifies the generation of HTML views by providing a simple and intuitive way to create elements and set their attributes, properties, and content.
WebDev DIY Tutorial
Handling Events
Events work in a slightly different way across various browsers. React tries to abstract the way events work and give developers a consistent interface to deal with. This is a great feature of React because we can forget about the browsers we are targeting and write event handlers and functions that are vendor-agnostic.
To offer this feature, React introduced the concept of the synthetic event. A synthetic event is an object that wraps the original event object provided by the browser, and it has the same properties, no matter where it is created.
To attach an event listener to a node and get the event object when the event is fired, we can use a simple convention that recalls the way events are attached to the DOM nodes. In fact, we can use the word on plus the camelCased event name (for example, onKeyDown) to define the callback to be fired when the events happen. A popular convention is to name the event handler functions after the event name and prefix them using handle (for example, handleKeyDown).
We have seen this pattern in action in the previous examples, where we were listening to the onChange event of the form fields. Let’s reiterate a basic event listener example to see how we can organize multiple events inside the same component in a nicer way. We are going to implement a simple button, and we start, as usual, by creating a component:
const Button = () => {
}
export default Button
Then we define the event handler:
const handleClick = (syntheticEvent) => {
console.log(syntheticEvent instanceof MouseEvent)
console.log(syntheticEvent.nativeEvent instanceof MouseEvent)
}
As you can see here, we are doing a very simple thing: we just check the type of the event object we receive from React and the type of native event attached to it. We expect the first to return false and the second to return true.
You should never need to access the original native event, but it is good to know you can do it if you need to. Finally, we define the button with the onClick attribute to which we attach our event listener:
return (
<button onClick={handleClick}>Click me!</button>
)
Now, suppose we want to attach a second handler to the button that listens to the double-click event. One solution would be to create a new separate handler and attach it to the button using the on DoubleClick attribute, as follows..read more.
Read the free chapter from 'React 18 Design Patterns and Best Practices' now!
What's Happening in Web Dev?
Your dose of the latest releases, news and happenings in the Web Development industry!
Angular
Announcing Angular.dev - The focus on improving performance and developer experience on the modern web includes a revamp of Angular’s reactivity system, SSR, and dozens of additional features. Later this week, Angular v17 will be released, including deferred views, built-in control flow, view transitions API support, SSR enhancements and more.
Laravel
Laravel Forums Package: Waterhole - Waterhole is a Laravel powered forum or discussion platform that hosts online communities for brands, creators, and teams. It's built with Laravel v10 and MySQL 8, so Laravel developers will feel at home configuring and customizing the application.
Spring
SSL hot reload in Spring Boot 3.2.0 - In Spring Boot 3.2.0, now has added ability for embedded web servers to hot-reload SSL certificates and keys. That means you can rotate your SSL trust material without restarting your application.
Spring Boot 3.2.0-RC2 available now - Spring Boot 3.2.0-RC2 has been released and is now available. This release includes 69 enhancements, documentation improvements, dependency upgrades, and bug fixes.
Web.Dev
Compression Streams are now supported on all browsers - The Compression Streams API is for compressing and decompressing streams of data using the gzip or deflate (or deflate-raw) formats. Using the built-in compression of the Compression Streams API, JavaScript applications do not need to include a compression library, making the download size of the application smaller. This useful API is now supported across all browsers.
See you next week!