WebDevPro #12: Light/dark Mode Theme Toggle in JavaScript, OpenAI Image Generation API, MongoDB Cheat Sheet and React Libraries
Hi,
Welcome to the _webdevpro! Today's edition covers web development community discussions on light/dark mode theme toggle in JavaScript, OpenAI Image Generation API , MongoDB Cheat Sheet and React Libraries. We bring you the latest in Web Dev, with releases from Laravel, Node.js, and Spring to help you keep up to date!
Working on understanding state in React? Our React with TypeScript tutorial can help! Don't miss our repository of curated tools to help you boost your web development.
We have listened to the _webdevpro readership and we think this is something you have been searching for. If you liked this installment in our new series, fill in our survey below and win a free Packt credit. We're committed to bringing our readers exactly what they want, so help us make the right choices.
Take the feedback survey and get free credit!
Thanks,
Apurva Kadam
Editor-in-Chief, Packt
Web Developer Community Insights
The best light/dark mode theme toggle in JavaScript – In this blogpost, you will learn how to build The Ultimate Theme Toggle™️ for your website using JavaScript, CSS custom properties, local storage, and system settings. No framework required! Read more.
OpenAI Image Generation API with Laravel 10 and VueJS - OpenAI's Image API offers incredible opportunities to harness the power of artificial intelligence and machine learning for image-related tasks. In this tutorial, we'll explore how to integrate OpenAI's Image API into a Laravel application, enabling you to unlock exciting image-based functionalities. Explore now!
A Guide to Coding Standards to Improve Code Quality - Coding standards are a set of guidelines and conventions that developers follow when writing code. These standards ensure that the code is readable, maintainable, and consistent across a project or organization. This will not only elevate the performance of the code but also make it more readable by other developers on the team. This blog investigates some coding standards that you should integrate into your programming. Get started.
A-Z: MongoDB Cheat Sheet - MongoDB is a document database with the scalability and flexibility that you want with the querying and indexing that you need. This cheatsheet is a collection of Definitions, MongoDB Shell Commands, and References that help quickly pick up MongoDB. Learn now!
5 React Libraries to Level Up your Projects in 2023 - In this article you'll look at 5 libraries that can positively impact your React development experience by addressing some of the most common pain points in React development such as data fetching, styling, accessibility and state management. Read about the React libraries now!
JavaScript localStorage: The complete guide - In this article, you will learn about localStorage and its methods and how you can use localStorage to save data and access it, deleted it and modify it. Read the full tutorial here.
Web Development Motivation
"Web development is not just about writing code; it's about crafting immersive digital experiences that captivate, inform, and connect people across the globe."
- Steve Jobs, Co-founder of Apple Inc.
Food for Thought...
In this insightful quote by the visionary Steve Jobs, we recognize the transformative nature of web development. It goes beyond mere coding and emphasizes the importance of creating meaningful and engaging experiences for users worldwide. Web development has the power to bridge distances, share knowledge, and foster connections in ways never imagined before.
WebDev Resources
Get to the finish line faster. Here are some Task automation and asset delivery resources for your next project:
Automated Testing: Automated software testing is a process in which software tools execute pre-scripted tests on a software application before it is released into production.
Build Tools: Toolkits and their ecosystems, that help you automate painful and repeated tasks.
CSS Tools: Tools for analysis, pre and post processing of CSS files.
Code Editors: Text editor programs designed specifically for editing source code of a website.
Documentation: Writing, generating, publishing and consuming documentation for web deliverables.
Fonts for Programmers: Programmers need special fonts, which help align the code and distinguish between characters, that look alike.
React Web Development Tutorial
Using basic TypeScript types
In this section, we’ll start by understanding how TypeScript types can be declared and how they are inferred from assigned values. We will then learn the basic types commonly used in TypeScript that aren’t available in JavaScript and understand helpful use cases.
Using type annotations
TypeScript type annotations enable variables to be declared with specific types. These allow the TypeScript compiler to check that the code adheres to these types. In short, type annotations allow TypeScript to catch bugs where our code uses the wrong type much earlier than we would if we were writing our code in JavaScript.
Open the TypeScript Playground at https://www.typescriptlang.org/play and carry out the following steps to explore type annotations:
Remove any existing code in the left-hand pane and enter the following variable declaration:
let unitPrice: number;The type annotation comes after the variable declaration. It starts with a colon followed by the type we want to assign to the variable. In this case, unitPrice is going to be a number type. Remember that number is a type in JavaScript, which means that it is available for us to use in TypeScript too.
The transpiled JavaScript appears on the right-hand side as follows:
let unitPrice;However, notice that the type annotation has disappeared. This is because type annotations don’t exist in JavaScript. ...read more.
What's Happening in Web Dev?
Laravel
Lemon Squeezy for Laravel 1.0 is Here - The Lemon Squeezy for Laravel package has reached v1.0 this week! This package is designed to easily integrate your Laravel application with Lemon Squeezy, a SaaS application for payments, tax, and subscriptions for software companies.
Node.js
Node v20.3.1 (Current) - The following CVEs are fixed in this release: CVE-2023-30581: mainModule.__proto__ Bypass Experimental Policy Mechanism (High), CVE-2023-30584: Path Traversal Bypass in Experimental Permission Model (High), and many more!
Spring
Spring Boot 2.7.13 available now - Spring Boot 2.7.13 has been released and is now available from Maven Central. This release includes 26 bug fixes, documentation improvements, and dependency upgrades. Thanks to all those who have contributed with issue reports and pull requests.
Spring Security 6.1.1, 6.0.4, 5.8.4, 5.7.9, 5.6.11 Released - Spring Security 6.1.1, 6.0.4, 5.8.4, 5.7.9, and 5.6.11 are available now. The releases are mostly composed of bug fixes, dependency upgrades, and documentation improvements.