Documenting my #100DaysOfReadingAnArticle Challenge Tweets Preferably using daily.dev
- Twitter: @sexy_gravy
- Day 01
- Day 02
- Day 03
- Day 04
- Day 05
- Day 06
- Day 07
- Day 08
- Day 09
- Day 10
- Day 11
- Day 12
- Day 13
- Day 14
- Day 15
- Day 16
- Day 17
- Day 18
- Day 19
- Day 20
- Resources
- Devcards
These articles are all from Hashnode
- Undertstand the basics
- Think before you write
- Be consistent
- Separate concerns
- Don't use magic numbers
- Don't reinvent the wheel
- Use fewer dependencies
- Use self-explanatory names
- Don't over engineer
- Avoid duplication or redundancy
- Refractor if necessary
- Don't make assumptions
- Take advantage of immutability
- Introduce environment variables
- Get in the zone
-
Profiling your React app and searching for bottlenecks
- Understanding how React updates its UI
- Measuring performance with React DevTools
- React performance optimization technizues
- Keeping component state local where necessary
- Memoizing React components to prevent unecessary re-renders
- Code-splitting in React using dynamic import()
- Virtualize Long Lists
- Lazy loading images in React
- Multiple Chunk Files
- Non React specific optimizations
- Serve everything from a CDN
- Use CSS Animations instead of JS Animations
- Move from CSS-in-JS
- SSR
- Optimizing NPM Dependencies
- Analyzing and Optimizing your Webpack Bundle Bloat
- Other considerations
- by Paul Lorenz
- Frontend development trends The time when a front-end web developer only needed to know HTML, CSS, and JavaScript is long gone. So, the way to keep pace with a rapidly changing environment is to watch the latest front-end technologies.
-
Why JavaScript rocks?
- It’s an object-based and dynamic language used both on the client side and the server side.
- It’s supported by many browsers, such as Safari, Chrome, Firefox, and Internet Explorer.
- Interactivity is excellent because JavaScript is a language that gives the web page its structure and style.
- Many libraries and frameworks are available.
-
Jamstack
- In the JAMstack definition (which appeared in 2015), JAM stands for JavaScript, API, and Markup, but now "Jamstack" is widely used. This is how Mathias Biilmann, the CEO and co-founder of Netlify, defines the term: "It’s a web development infrastructure based on client-side JavaScript, reusable APIs, and prebuilt Markup."
-
Mobile-first Approach in Web Development
- Focus on vertical orientation rather than landscape one, and on functions done with a touchscreen.
- Set up meta viewport tags to help browsers change how pages are scaled.
- Use different layout methods, e.g. Grid, Multi-Column, or Flexbox, to make layouts fit the viewport.
- Use CSS queries to change the size of things based on what the devices can do.
-
Headless Architecture for Content Management
-
by Chameera Dulanga
-
What is Dolt? Dolt is an SQL-based database that allows you to maintain your database like a Git repository.
-
Features of Dolt
- Versioning system similar to Git.
- Works with standard SQL connectors.
- Comes with a powerful CLI.
- Allows exploring the complete history of your data.
- Instant rollback to any commit.
- DoltHub provides a web-based UI to collaborate on Dolt databases.
- DoltLab allows the creation of self-hosted DoltHubs.
- Built-in backup and monitoring.
- Make money through DoltHub data bounties
** Note: I really enjoyed reading this one! This is your sign to lighten up and take a break! **
- by Dayvster
How does the use hook work?
- Similary to await it simply unwraps the value of a promise, meaning that any async behaviour can be wrapped in a use hook now and react will natively handle the promise for us.
Others:
The blog post mentions and links to many valuable concepts that you can explore further as you see fit. It has three sections:
- Generic Advice — Important context and motivation for the technical advice
- Technical Advice — The main course
- Recommended Reading — Links to high-quality books and blogs that are great for getting started
This course provides an introduction to the intellectual enterprises of computer science and the art of programming. This course teaches students how to think algorithmically and solve problems efficiently.
Topics include abstraction, algorithms, data structures, encapsulation, resource management, security, software engineering, and web programming. Languages include C, Python, and SQL plus HTML, CSS, and JavaScript.
Link to the Youtube Videdo - 25-hour watch
Loved reading this article. VSCode is definitely my favorite IDE and I enjoy a lot of the extensions. Mostly because they make life easier for me.
Here are some examples of stuff VS Code has added in recent months:
- Improved autoscroll behaviour – This improves the editor's behaviour when you click and drag to select a long piece of text that spans multiple screens.
- Explorer rename selection improvements – This allows you to use the F2 key to cycle through three different types of file renames: file name only, entire selection, and file extension only.
- Editor sticky scroll – This improves the editor UI to show scope during scrolling. For example, you can immediately see which class, namespace, function, constructor, etc. you're in within your document.
- Toggle between Light and Dark themes – This allows you to use a single command to switch between your preferred dark and light themes.
- How fast is Turbopack?
Turbopack is built on a new incremental architecture for the fastest possible development experience. On large applications, it shows updates 10x faster than Vite and 700x faster than Webpack. On even larger applications, the difference is greater—often 20x faster than Vite.
Turbopack only bundles the minimum assets required in development, so startup time is extremely fast. On an application with 3,000 modules, Turbopack takes 1.8 seconds to boot up, while Vite takes 11.4 seconds.
Next.js 13 lays the foundations to be dynamic without limits:
- app/ Directory (beta): Easier, faster, less client JS.
- Layouts
- React Server Components
- Streaming
- Turbopack (alpha): Up to 700x faster Rust-based Webpack replacement.
- New next/image (stable): Faster with native browser lazy loading.
- New @next/font (beta): Automatic self-hosted fonts with zero layout shift.
- Improved next/link: Simplified API with automatic .
- Conclusion
The event loop, the delegation, and the asynchronous processing mechanism are Node.js's secret ingredients to process thousands of connections, read/write gigantic files, handling timers while working on other parts of our code.
In the article, we saw the vital role of Libuv and its ability to handle numerous potentially long-running tasks. At the same time, we went through the event loop and its role as a bridge/connector between callbacks of asynchronous operations in the I/O event queue and the call stack. In the following articles, we will explore in greater detail how timers, I/O, promises, and ticks are handled by the different phases of the event loop.
-
The machine learning project workflow starts with the business problem statement and defining the constraints. Then it is followed by data collection and data preparation. Then modeling part, and finally, the deployment and putting the model into production. These steps will be discussed in the context of ranking the LinkedIn feed.
-
Relevant Topic: (Strategies for Keeping the LinkedIn Feed Relevant)[https://engineering.linkedin.com/blog/2017/03/strategies-for-keeping-the-linkedin-feed-relevant]
[Building a Music Player in React}(https://dev.to/documatic/building-a-music-player-in-react-2aa4)
- I totally love this article and would want to give this project a go!
Contents of this Article
Here is a shortlist of some of the concepts in JavaScript that you will need to understand to be able to use React effectively. These include:
- You don't need to learn class components
- Do yourself a favor and learn React Query: You can install React Query through the npm package @tanstack/react-query.
- You don't need to learn Redux
- Some of these newer, "lighter" state management libraries include:
- Zustand
- Jotai
- Recoil
- Don't necessarily reach for create react appn instead you can use:
- Vite
- Next.js
MERN is a full-stack JavaScript solution that consists of four frameworks: MongoDB, ExpressJS, ReactJS, and NodeJS. These frameworks are used to develop scalable, secure, and high-performance web applications:
- MongoDB is a NoSQL database that stores data in a JSON-like format called BSON.
- ExpressJS is a web application framework for building backend services and RESTful APIs.
- ReactJS is a frontend framework for designing the user interface and handling navigation between screens.
- NodeJS is a JavaScript backend environment for building backend services and static web interfaces.
- MERN offers advantages such as a high delivery speed, customizable technologies, and the ability to code full-stack applications using only one programming language (JavaScript or TypeScript).
This article lists 7 tips for improving productivity with Git. The tips cover features of Git such as removing remote-deleted branches on fetch, merging and rebasing without checking out the target branch, triggering the CI/CD pipeline with a blank commit, viewing a file in another branch, checking out the previously used branch, searching in Git and showing the commit log as a graph. Each tip provides an example of how to use the feature and includes a link to relevant documentation.
This article is a list of 70 hand-picked web-based tools that are useful for web development. These tools are all open source and generate pure CSS without the need for JavaScript or any external libraries. The tools are divided into categories such as property generators, animations, backgrounds, color tools, typography, loaders, layouts and informative. The tools include Neumorphism, which generates Soft-UI CSS styles using inset shadows, Fancy Border Radius, which generates cool shaped objects with border-radius, Glassmorphism, which builds semi-transparent, blurred glass-like backgrounds, Animista, which is a CSS animation playground and generator, and Hero Patterns, which finds and customizes simple pure-CSS patterned backgrounds.
Airtest is a tool that uses AI to generate unit tests for various programming languages including C#, C++, Go, Java, JavaScript, PHP, Python, R Lang, Ruby, and Swift. It allows users to paste a block of code, select their desired language and testing framework, then generates the unit tests automatically.
- What is unit test and why is it important?
A unit test is a type of software testing where individual units or components of a software application are tested in isolation from the rest of the application. The goal of a unit test is to validate that each unit of the software performs as intended. Unit tests are typically written by developers as they write the code, and are run automatically as part of a continuous integration process.
Unit testing is important because it helps to catch bugs early in the development process, when they are less expensive to fix. It also improves the overall quality of the codebase by ensuring that individual units are working correctly. Additionally, unit tests serve as living documentation for the code and make it easier for other developers to understand and maintain the codebase. Finally, unit tests make it much easier to refactor code with confidence, knowing that if any regressions are introduced, the tests will catch them.
The Conventional Commits Pattern is a simple convention for writing git commit messages that helps maintain consistency and clarity in a project's commit history. The pattern consists of a mandatory type (feat, test, refactor, style, fix, chore, docs, build, perf, ci, or revert) that indicates the nature of the change, an optional scope that provides context to the change, and a subject that states the change in imperative form. The scope must be separated from other scopes with a "/".
- How to design better APIs
- Introducing the New React DevTools
- Test Driven Development
- Hacktoberfest: Contributing to React project
Apparently, I have a few DevCards. Depends on which gadget I use to read the article! 🤭
