#web apps

Subscribe
Web apps are applications that run on the web and can be accessed through a web browser. They are written using JavaScript, HTML and CSS, allowing them to be accessible from any device with an internet connection. Web apps are often interactive and provide a user interface for users to interact with. They can range from simple one-page websites to complex applications that allow users to perform tasks such as online shopping or banking.
No Seriously: htmx is Pro-JavaScript!
JSNation US 2024JSNation US 2024
29 min
No Seriously: htmx is Pro-JavaScript!
HTMX is a hypermedia-oriented front-end library that enhances HTML as a hypermedia. It generalizes the concept of hypermedia controls in HTML, allowing any element to become a hypermedia control. HTMX provides practical attributes like HX swap and HX indicator. The active search demo showcases the dynamic behavior achievable with HTMX. HTMX allows developers to build web applications without writing a ton of JavaScript. It works well for traditional web apps but may not be suitable for offline functionality or fast interactions. HTMX can be integrated with JSX and various backend stacks, and TypeScript can be used alongside HTMX.
Superwebapps: Rethinking Desktop Applications With Progressive Web Apps
React Summit 2024React Summit 2024
22 min
Superwebapps: Rethinking Desktop Applications With Progressive Web Apps
MDEdit is a tool that converts Markdown into HTML and provides a what-you-get editor. Progressive web apps offer a comparable user experience on both desktop and mobile devices. The Service Worker allows web apps to remain functional even without an internet connection. The Persistent Storage and File Handling APIs enable web apps to store data and access files on the client's device. Project Fugu provides new APIs, including the Font Access API, to bridge the gap between native apps and web applications.
Data Loaders - Elevating Data Fetching in Vue
Vue.js Live 2024Vue.js Live 2024
30 min
Data Loaders - Elevating Data Fetching in Vue
Data loaders provide a solution for complex and repetitive data fetching in Vue.js applications. Using data loaders allows for more independent data fetching and integrates with the navigation cycle. The data loader plug-in adds a navigation guard for data fetching and loading. Lazy loading and caching can be implemented using Pina Colada and Glada loaders. These loaders can improve the performance and speed of data fetching in applications.
Observability Matters: Enhancing Performance of our Node Application with OpenTelemetry
Node Congress 2024Node Congress 2024
7 min
Observability Matters: Enhancing Performance of our Node Application with OpenTelemetry
Yash Rajavarma introduces observability and explains its importance for developers. He discusses how OpenTelemetry can empower Node.js applications by providing easy instrumentation and management of telemetry data. OpenTelemetry simplifies the implementation of observability and is designed to benefit developers.
How not(!) to Build Real-time Apps
Node Congress 2024Node Congress 2024
10 min
How not(!) to Build Real-time Apps
Today's Talk discusses different approaches for implementing real-time updates in server-side applications, including application-level updates and polling. The drawbacks of polling include inefficiency and complexity at scale. Adding extra infrastructure, like messaging systems, can ensure scalability but introduces operational overhead. Prisma Pulse is a system that simplifies change data capture, providing an easy setup for subscribing to database changes and solving scalability issues.
WebAssembly and React: A New Era of High-Performance Web Applications
React Day Berlin 2023React Day Berlin 2023
14 min
WebAssembly and React: A New Era of High-Performance Web Applications
Watch video: WebAssembly and React: A New Era of High-Performance Web Applications
WebAssembly is a binary instruction format for a stack-based virtual machine, enabling deployment of code in languages like Go, Rust, or C++ to run in the browser. It allows for efficient image compression algorithms and whole runtimes like Node.js in the browser. WebAssembly provides a capability-based security layer and eliminates the need to worry about server setup. It is already being used by well-known organizations and platforms, and continues to evolve with upcoming features such as a component model, neural network capabilities, garbage collection, and multithreading. WebAssembly modules can be used in React and as a server tool.
Build a Universal Reactive Data Library with Starbeam
JSNation 2023JSNation 2023
66 min
Build a Universal Reactive Data Library with Starbeam
WorkshopFree
Yehuda Katz
Yehuda Katz
This session will focus on Starbeam's universal building blocks. We'll use Starbeam to build a data library that works in multiple frameworks.We'll write a library that caches and updates data, and supports relationships, sorting and filtering.Rather than fetching data directly, it will work with asynchronously fetched data, including data fetched after initial render. Data fetched and updated through web sockets will also work well.All of these features will be reactive, of course.Imagine you filter your data by its title, and then you update the title of a record to match the filter: any output relying on the filtered data will update to reflect the updated filter.In 90 minutes, you'll build an awesome reactive data library and learn a powerful new tool for building reactive systems. The best part: the library works in any framework, even though you don't think about (or depend on) any framework when you built it.
Table of contents- Storing a Fetched Record in a Cell- Storing multiple records in a reactive Map- Reactive iteration is normal iteration- Reactive filtering is normal filtering- Fetching more records and updating the Map- Reactive sorting is normal sorting (is this getting a bit repetitive?)- Modelling cache invalidation as data- Bonus: reactive relationships
Domain Driven Design with Vue Applications
Vue.js London 2023Vue.js London 2023
14 min
Domain Driven Design with Vue Applications
Top Content
Welcome to this talk on domain-driven design in Vue.js application. Today we are going to look into domain-driven design, its benefits and how it works with Vue.js domain-driven design versus the MVVM model. Vue.js thrives in domain-driven design, a design approach that models software to match a domain. DDD emphasizes understanding business logic and creating a domain that reflects the language and concepts. Integrating DDD in Vue.js offers benefits such as effective modeling of complex business domains, structured code reflecting domain logic, and easier onboarding and ownership.
The Art of Rendering Modes: Go Beyond a Blank Page
Vue.js London 2023Vue.js London 2023
32 min
The Art of Rendering Modes: Go Beyond a Blank Page
Google processes billions of searches per day, but less than 10% of websites get visitors from Google. SEO is user-focused and requires continuous improvement. JavaScript used to be a challenge for search engines, but now they can handle it. Server-side rendering is a solution for the challenges of single-page applications. Good SEO includes HTTPS, mobile friendliness, core web vitals, and handling URL changes. Meta tags and accessibility are important for SEO. Google Search Console provides valuable insights for tracking keyword performance.
Digital Ecology: How Can You Mitigate the Carbon Footprint of Websites?
React Day Berlin 2022React Day Berlin 2022
7 min
Digital Ecology: How Can You Mitigate the Carbon Footprint of Websites?
Today's Talk discusses digital ecology and reducing the carbon footprint of websites. Techniques such as using JavaScript or TypeScript, lighter libraries, and optimizing resources can reduce the carbon footprint by 70%. User data collection is important for sustainability, and the Ecolint tool helps make websites more sustainable. It's an open-source tool that can be downloaded and customized.
Build Web3 apps with React
React Summit 2022React Summit 2022
51 min
Build Web3 apps with React
WorkshopFree
Shain Dholakiya
Shain Dholakiya
The workshop is designed to help Web2 developers start building for Web3 using the Hyperverse. The Hyperverse is an open marketplace of community-built, audited, easy to discover smart modules. Our goal - to make it easy for React developers to build Web3 apps without writing a single line of smart contract code. Think “npm for smart contracts.”
Learn more about the Hyperverse here.
We will go over all the blockchain/crypto basics you need to know to start building on the Hyperverse, so you do not need to have any previous knowledge about the Web3 space. You just need to have React experience.
Web Accessibility in JavaScript Apps
React Summit 2022React Summit 2022
161 min
Web Accessibility in JavaScript Apps
Workshop
Sandrina Pereira
Sandrina Pereira
Often we see JavaScript damaging the accessibility of a website. In this workshop, you’ll learn how to avoid common mistakes and how to use JS in your favor to actually enhance the accessibility of your web apps!
In this workshop we’ll explore multiple real-world examples with accessibility no-nos, and you'll learn how to make them work for people using a mouse or a keyboard. You’ll also learn how screen readers are used, and I'll show you that there's no reason to be afraid of using one!
Join me and let me show you how accessibility doesn't limit your solutions or skills. On the contrary, it will make them more inclusive!
By the end, you will:- Understand WCAG principles and how they're organized- Know common cases where JavaScript is essential to accessibility- Create inclusive links, buttons and toggleble elements- Use live regions for errors and loading states- Integrate accessibility into your team workflow right away- Realize that creating accessible websites isn’t as hard as it sounds ;)
How to Share Code between React Web App and React Native Mobile App in Monorepo
React Summit 2022React Summit 2022
7 min
How to Share Code between React Web App and React Native Mobile App in Monorepo
This presentation focuses on sharing code between React web and React native mobile apps. The speaker demonstrates how to achieve feature parity using a Monorepo with NX. They highlight the importance of sharing non-UI code, such as business logic and state management, through shared libraries. This approach allows the apps to focus on UI code while keeping non-UI code separate. For more details, refer to the speaker's blog post.
The Next Wave of Web Frameworks is BYOJS
JSNation 2022JSNation 2022
23 min
The Next Wave of Web Frameworks is BYOJS
The next wave of web frameworks is BYOJS, covering the history and evolution of building web applications. The evolution of web frameworks and build systems includes popular choices like React, Angular, and Vue, as well as advanced build systems like Webpack and Rollup. The rise of performance measurement tools and the adoption of the Jamstack have led to improved web performance. The Jamstack architecture focuses on pre-rendering pages, decoupling APIs and services, and enhancing pages with JavaScript. Astro, a static site generator with SSR support, promotes the islands architecture and partial hydration.
MIDI in the Browser... Let's Rock the Web!
JSNation 2022JSNation 2022
28 min
MIDI in the Browser... Let's Rock the Web!
MIDI is a versatile communication protocol that extends beyond music and opens up exciting possibilities. The Web MIDI API allows remote access to synths and sound modules from web browsers, enabling various projects like music education systems and web audio-based instruments. Developers can connect and use MIDI devices easily, and the Web MIDI API provides raw MIDI messages without semantics. The WebMidi.js library simplifies working with the Web MIDI API and offers a user-friendly interface for musicians and web developers. MIDI on the web has generated significant interest, with potential for commercial growth and endless possibilities for web developers.
Engaging Ecommerce with the Visual Web
JSNation 2022JSNation 2022
12 min
Engaging Ecommerce with the Visual Web
Images, video, and media are crucial in e-commerce to deliver the best user experience. Nike's acquisition of Artifact Studios and the launch of Nike land on Roblox demonstrate the future of e-commerce in the metaverse. Clear and zoomable images, point-based details, and video are essential for enhancing the user experience. Optimizing media delivery through modern image formats, compression, resizing, and technology can significantly improve conversion rates in e-commerce.
GraphQL for Web and Mobile Apps Made Simple
GraphQL Galaxy 2021GraphQL Galaxy 2021
6 min
GraphQL for Web and Mobile Apps Made Simple
Enhost provides a simple and accessible GraphQL backend for web and mobile apps. They offer a serverless infrastructure, taking care of setup and configuration, allowing developers to focus on app development. Enhost's stack includes a Postgres database, a Hasura-powered GraphQL API, Hasura Auth for authentication, Hasura Storage for file uploads, and support for functions in Node.js and Go. The backend is 100% open-source and includes features like event triggers, a CLI for local development, and GitHub integration. With Enhost, there are no excuses not to use GraphQL and build apps that users will love.
Using Next.JS and Redux for Epic Noscript Web Apps
React Advanced 2021React Advanced 2021
21 min
Using Next.JS and Redux for Epic Noscript Web Apps
This Talk explores developing web applications that work without JavaScript enabled in the browser, while still enjoying the benefits of modern web technologies. The speaker demonstrates converting an existing application to work without JavaScript by wrapping buttons in a form and preventing the default submit event. React helpers are introduced to handle async actions and the speaker shows how to make a counter app work without JavaScript by removing unnecessary callbacks and changing buttons to a button component. The talk also covers adding a form and a surprise feature, and emphasizes that by leveraging forms and an event-based store, applications can seamlessly work with or without JavaScript.
Reusing App State in React Native with Recoil
React Advanced 2021React Advanced 2021
24 min
Reusing App State in React Native with Recoil
Recoil is a minimal and easy-to-learn state management library for React and React Native. It supports distributed and incremental state definition, React suspense, and provides hooks like useRecoilValue and useRecoilState. Recoil can be used in both React and React Native applications, allowing for easy reuse of state configurations. Testing Recoil is straightforward, with the ability to observe state changes and compare snapshots. Overall, Recoil is an experimental but promising alternative to Redux.
Building Modern CMS Driven Web Applications with Strapi the OSS Headless CMS
React Advanced 2021React Advanced 2021
159 min
Building Modern CMS Driven Web Applications with Strapi the OSS Headless CMS
Workshop
Daniel Madalitso Phiri
Daniel Madalitso Phiri
In this workshop, we'll build out a fully functional website and integrated blog with Next.js and Strapi.

Table of contents:
- An introduction to Headless CMS and supported architectures
- Getting up and Running with Strapi and Next.js
- Integrating Blog functionality into a Next.js app
- Deploying your Next.js and Strapi Apps Bonus
- Implementing content previews with Next.js

Prerequisites:Basic React Knowledge Basic knowledge of Node.js and npm Basic Web Concepts.


What Does The Angular Say? 🦊
JSNation Live 2020JSNation Live 2020
8 min
What Does The Angular Say? 🦊
Today's Talk is about using Angular, Web Audio API, and ToneJS to create custom sounds and instruments in a web application. The speaker demonstrates how to create an audio context, connect sources, and add filters to modify the sounds. They explore different elements in the ToneJS library, such as synthesizers, parts, noise, and audio tracks, to enhance the user experience. The Talk also showcases instruments that play cat and dog samples according to the pitch. Overall, it highlights the possibilities of using these technologies to create unique and interactive audio experiences in web applications.
From Code to Scale! Build a Static Web App in Minutes
JSNation Live 2020JSNation Live 2020
31 min
From Code to Scale! Build a Static Web App in Minutes
The Talk discusses the development of web applications and the challenges involved, such as code management, CI/CD, routing, security, and scalability. It explores the use of Azure Static Web Apps for building and deploying static web apps with features like authorization, authentication, and serverless technology. The process of creating a static web app on Azure Portal is demonstrated, along with resource creation, deployment, and custom domain setup. The Talk also covers API deployment, authentication, authorization, and role-based access control. Azure Static Web Apps is highlighted as a globally distributed solution for building web apps.