Clean Layout Architecture for Vue Applications

Layouts are an essential pattern to reduce code repetition and create maintainable and professional-looking applications. Nuxt provides this out of the box. In this article, a recommended way to implementing layouts in your Vue.js application is introduced outlining its benefits. - https://fadamakis.com/clean-layout-architecture-for-vue-applications-a738201a2a1e

#vue

React Libraries for 2023

The React ecosystem is so large that there's often a problem of being spoiled for choice, so opinionated guides to different solutions tend to do well, like this annual list from Robin Wieruch. Fingers crossed we get a 2024 edition soon? - https://www.robinwieruch.de/react-libraries/

#react

Using CSS Houdini To Extend Styling and Layout Capabilities

Emmanuel Odioko explores CSS Houdini’s definition, functionality, and use cases. - https://blog.logrocket.com/css-houdini-extend-styling-layout-capabilities

#css

Thirteen Figma-to-React Converters Ranked - https://www.youtube.com/watch?v=XTdjxxyYMCE

#react

MikroORM 6: The Polished, Flexible ORM

After over a year in development, MikroORM 6 is stable. It’s a TypeScript-based ORM, based around Data Mapper, Unit of Work and Identity Map patterns, with support for MongoDB, MySQL, Postgres, and SQLite. v6 adds strict partial loading, cursor-based pagination, reworked support for raw SQL fragments, an all-new Getting Started guide, plus many other DX-focused improvements. - https://mikro-orm.io/blog/mikro-orm-6-released

#nodejs

6 Ways to Speed Up Your Vue.js Application

In this article discover the steps you can follow to make sure your Vue application is working as fast as possible. With these steps, you’ll know exactly what to fix and won’t have to guess anything. - https://betterprogramming.pub/6-ways-to-speed-up-your-vue-js-application-2673a6f1cde4

#vue

Practical DDD in TypeScript: Value Object

This is why we can consider the Value Object pattern as the biggest code quality changer from Domain-Driven… - https://javascript.plainenglish.io/practical-ddd-in-typescript-value-object-b76bcd2d9283

#typescript

15 common Angular development interview questions and solutions

Angular is a popular open-source application-design framework and development platform. Google initially… - https://grokkingtechinterview.com/15-common-angular-development-interview-questions-and-solutions-634118970259

#angular

Rethinking React Best Practices

From a late 2023 perspective, it's clear 'React' has evolved from being a library to representing a broader ecosystem of ideas and frameworks, so best practices have changed too. The shift towards a hybrid client-server approach is explored here, along with how Relay and Server Components can address scaling challenges. - https://frontendmastery.com/posts/rethinking-react-best-practices/

#react

A Practical Introduction to Scroll-Driven Animations with CSS scroll() and view()

Adam Argyle shows how you can add scroll animations that toggle shadows on navbars, reveal images, add scrollytelling, link up carousel elements, and much more using only CSS - https://tympanus.net/codrops/2024/01/17/a-practical-introduction-to-scroll-driven-animations-with-css-scroll-and-view

#css

Managing User Permissions in a VueJS App

In authenticated frontend apps, we often want to change what’s visible to the user depending on their assigned role. This article will explore how to implement user roles and permissions in a Vue.js application. - https://medium.com/js-dojo/managing-user-permissions-in-a-vuejs-app-b82f3042e3d1

#vue

Creating a Todo API using NestJS and CQRS Pattern

This is a software architecture pattern that separates read (query) operations from update (command)… - https://engcfraposo.medium.com/creating-a-todo-api-using-nestjs-and-cqrs-pattern-8dd27dec9182

#nodejs

Stop Over-Engineering your Medium Size Front-End Application

Writing maintainable code without falling into the trap of over-engineering has become increasingly uncommon… - https://fadamakis.com/stop-over-engineering-your-medium-size-front-end-application-b3f8313c464b

#frontend

Using TypeScript with React

People were starting to comment that the official React docs didn't provide any information on using React with TypeScript, so earlier this year Mark Erikson filed an issue, and, thanks to Orta Therox, these docs appeared. - https://react.dev/learn/typescript

#react

5 CSS Snippets Every Front-End Developer Should Know in 2024

Adam Argyle explains that every front-end developer should know how :has() works, the how and why of a subgrid, how to nest with built-in CSS syntax, how to let the browser balance headline text wrapping, and how to use container query units. - https://web.dev/articles/5-css-snippets-every-front-end-developer-should-know-in-2024

#css

A simple and clean architecture for your Angular projects

Conceptually, this architecture could be applied to any frontend framework. Since I have more knowledge of… - https://medium.com/@navez.jerome/a-simple-and-clean-architecture-for-your-angular-projects-f1a68040c09a

#angular

What is ng-template, and when to use it?

As an Angular developer, you might have encountered ng-template when using the *ngIf syntax with an else…  -https://blog.angulartraining.com/what-is-ng-template-and-when-to-use-it-f875b46aa078

#angular

Composables vs. Renderless Components in Vue 3

Renderless components in React are components that do not render any UI elements. They are typically used to manage data, state, or side effects. This article looks into the concepts of Renderless components but in Vue.js. - https://medium.com/@moein.mirkiani/composables-vs-renderless-components-in-vue-3-1e7386d8182

#vue

npm in Review: A Retrospective in Numbers

From Socket comes a look at the past year from the perspective of the npm registry, focused largely on statistics (2.5 million live packages!), including download numbers, popular packages, as well as some ‘quirky facts’ like the package with the most maintainers - https://socket.dev/blog/2023-npm-retrospective

#nodejs

How to use a Custom Easing Function with the Web Animations API (WAAPI)

Bramus Van Damme shows how to use custom easing functions with the Web Animations API. - https://www.bram.us/2024/01/12/waapi-custom-easing-function

#css