✅ Uniting Web and Native Apps With 4 Unknown JavaScript APIs

A look at some ‘under-the-radar' web features, such as the Screen Orientation API and Device Orientation API, and how they can be used to create user friendly, robust PWAs.

Link to the article

#js #api

✅ Releases

Qwik 1.6 – Qwik 2 is coming soon, though.
A raft of Node.js Security Releases are due on July 8.
ESLint 9.6 - This release adds some new features and fixes several bugs found in the previous release.
PrimeVue 4.0 - Brand New Theming API, Tailwind CSS Integration, Enhanced UI Component Suite, Optimized Tree-Shaking, MonoRepo for add-ons
Bun 1.1.18 - This release fixes 55 bugs, Support for npmrc, etc.

#releases #js #frontend

✅ Using the CSS cap Unit

A look at how Ahmad solved a spacing design problem with the CSS cap unit.

Link to the article

#css

✅ Securing the Front-End: Defending Against XSS Attacks in Vue.js

As front-end developers, we create visually appealing and interactive interfaces for our applications. However, we also need to prioritize the security of our applications. One of the most significant security threats is Cross-site scripting (XSS) attacks, which can allow attackers to insert malicious scripts into our applications.

Link to the article

#vue #security #xss #frontend #js

✅ How to Redirect in Nuxt (Every Single Way)

Discover all the ways to implement redirects in Nuxt with this comprehensive guide. Learn about server-side, universal, and client-side redirects, along with their pros and cons. Check out the full demo app showcasing each method to see practical examples in action.

Link to the article

#vue #nuxt #router #js #frontend #ssr

✅ Enhancing The New York Times' Web Performance with React 18

Late last year, the team at The New York Times set out to take full advantage of React 18 on its flagship news site. This is an interesting case study looking at the challenges faced in upgrading and the significant benefits they managed to take advantage of.

Link to the article

#react #js #frontend

✅ The React Native Team Says 'Use a Framework'

Using frameworks, such as Expo, is now the recommended approach when creating new React Native apps. As Nicola explains: “you’re either using a framework or you’re building your own framework.”

Link to the article

#react #reactnative #js #frontend

✅ How to Annul Promises in JavaScript

You can 'cancel' XHR and fetch requests, but can you cancel regular promises? Currently, no, but Zachary looks into doing the next best thing: telling a promise the game's up, and discarding/ignoring its eventual results.

Link to the article

#js #frontend

✅ Pure CSS Circular Text (Without Requiring a Monospace Font)

How to create circular text (animated too if you want) with just pure CSS. A nice decorative element.

Link to the article

#css #frontend

✅ Web Performance Guide

A helpful collection of over 20 plain language guides, covering things such as working with the different core web vitals, optimization techniques, critical CSS, metrics, user monitoring, and more. You’re bound to find some worthwhile advice here.

Link to the article

#js #frontend #css #html #performance

✅ Layout and Reading Order

This talk gets into the nitty gritty of layout options with CSS (think grid, subgrid, gap etc) — with a particular focus on the proposed, new CSS masonry method, what it aims to fix and the prototyping currently underway in Chrome. A good overview of where we are, and where things are heading in terms of laying out our pages

Link to the video

#frontend #css #video

✅ How to use container queries now

Makes pragmatic recommendations on how we can use container queries now (whilst still supporting older browsers).

Link to the article

#css #frontend #google

✅ CSS 'Surprise Manga Lines'

When a manga or anime character is surprised, lines often focus on and highlight their face. This post looks at how to create a similar effect with HTML and CSS.

Link to the article

#css #frontend #html

✅ Checkboxes: Design Guidelines

When to use them, what alternative input fields to consider, and usability guidelines to keep in mind.

Link to the article

#css #html #design #frontend

✅ 'Blazing Fast' Websites with Speculation Rules

A look at how to pre-render pages on your site. There’s a demo included to so you can get a feel for how it works.

Link to the article

#frontend #performance #render #engine

✅ 👩‍💻 The simplicity of using Vue’s reactivity system outside of Vue

Vue’s reactivity can be imported and used in JS outside of a Vue app, like in Node directly.

Link to the article

#vue #js #node #reactivity #ref #frontend
#article

✅ 👩‍💻 Vue Tip: Destructure in v-for

We are a big fan of ES6 destructuring and recently discovered that you can use it in v-for.

First, let's take a look at a v-for without using ES6 destructuring:

<div v-for="article in articles" :key="article.id">
  <h2>{{ article.title }}</h2>
</div>

articles is a list of article JavaScript objects and has the type Article[]:

interface Article {
  title: string
  id: string
}

We can use ES6 destructuring which results in a cleaner template code:

<div v-for="{id, title} in articles" :key="id">
  <h2>{{ title }}</h2>
</div>

#vue #js #frontend #destructuring
#tip