Search results for "Daniel Rios Pavia":

Daniel Rios Pavia
Daniel Rios Pavia
Personio, Spain
Daniel is a Lead Frontend Engineer in Design Systems at Personio based in Madrid, Spain. Previously he was a core maintainer of Shopify's Hydrogen framework and had his own company yellowme.mx for seven years. Outside of work, He is into electronic music, guitars and tennis.
Create a Visually Editable Next.js Website Using React Bricks, With Blog and E-commerce
React Summit 2023React Summit 2023
139 min
Create a Visually Editable Next.js Website Using React Bricks, With Blog and E-commerce
Top Content
WorkshopFree
Matteo Frana
Matteo Frana
- React Bricks: why we built it, what it is and how it works- Create a free account- Create a new project with Next.js and Tailwind- Explore the directory structure- Anatomy of a Brick- Create a new Brick (Text-Image)- Add a title and description with RichText visual editing- Add an Image with visual editing- Add Sidebar controls to edit props (padding and image side)- Nesting Bricks using the Repeater component- Create an Image gallery brick- Publish on Netlify or Vercel- Page Types and Custom fields- Access Page meta values- Internationalization- How to reuse content across pages: Stories and Embeds- How to create an E-commerce with Products’ data from an external database and landing pages created visually in React Bricks- Advanced enterprise features: flexible permissions, locked structure, custom visual components
Powering your CI/CD with GitHub Actions
DevOps.js Conf 2022DevOps.js Conf 2022
155 min
Powering your CI/CD with GitHub Actions
Workshop
David Rubio Vidal
David Rubio Vidal
You will get knowledge about GitHub Actions concepts, like:- The concept of repository secrets.- How to group steps in jobs with a given purpose.- Jobs dependencies and order of execution: running jobs in sequence and in parallel, and the concept of matrix.- How to split logic of Git events into different workflow files (on branch push, on master/main push, on tag, on deploy).- To respect the concept of DRY (Don't Repeat Yourself), we will also explore the use of common actions, both within the same repo and from an external repo.
TresJS, a declarative way of creating 3D scenes from Vue components
Vue.js London 2023Vue.js London 2023
27 min
TresJS, a declarative way of creating 3D scenes from Vue components
The speaker discovered 3D with 3GS and was inspired to create a 3D ecosystem for the Vue community using Troy.js. The process of setting up a 3D scene and objects in Tress was explained, along with creating and configuring 3D objects. The talk also covered animating objects with Tress and the 'Cientos' package, as well as the future of Tress.js and its compatibility with older versions of Three. The speaker expressed gratitude to sponsors and contributors and highlighted the potential for product customization with Tress.js.
Federated Microfrontends at Scale
React Summit 2023React Summit 2023
31 min
Federated Microfrontends at Scale
Top Content
Watch video: Federated Microfrontends at Scale
This Talk discusses the transition from a PHP monolith to a federated micro-frontend setup at Personio. They implemented orchestration and federation using Next.js as a module host and router. The use of federated modules and the integration library allowed for a single runtime while building and deploying independently. The Talk also highlights the importance of early adopters and the challenges of building an internal open source system.
A Nerdy Guide to the Web Trending Concepts
React Day Berlin 2023React Day Berlin 2023
10 min
A Nerdy Guide to the Web Trending Concepts
Watch video: A Nerdy Guide to the Web Trending Concepts
Going to conferences can be overwhelming, so the speaker created a guide to trending web concepts using comic book characters. The chosen topic is resumability, and the story of Tony Stark is used to explain it. Resumability allows for immediate interactivity on a web page and is achieved through serialization and execution of code. The speaker challenges the audience to propose topics for future guides.
Build a Product Page with Shopify’s Hydrogen Framework
React Advanced 2022React Advanced 2022
81 min
Build a Product Page with Shopify’s Hydrogen Framework
WorkshopFree
David Witt
David Witt
Get hands on with Hydrogen, a React-based framework for building headless storefronts. Hydrogen is built for Shopify commerce with all the features you need for a production-ready storefront. It provides a quick start, build-fast environment so you can focus on the fun stuff - building unique commerce experiences. In this workshop we’ll scaffold a new storefront and rapidly build a product page. We’ll cover how to get started, file-based routing, fetching data from the Storefront API, Hydrogen’s built-in components and how to apply styling with Tailwind.You will know:- Get started with the hello-world template on StackBlitz- File-based routing to create a /products/example route- Dynamic routing /products/:handle- Hit the Storefront API with GraphQL- Move the query into the Hydrogen app- Update the query to fetch a product by handle- Display title, price, image & description.- Tailwind styling- Variant picker and buy now button- Bonus if there’s time: Collections page
Prerequisites: - A Chromium-based browser (StackBlitz)- Ideally experience with React. A general web development background would be fine.
SolidStart: The Shape of Frameworks to Come
JSNation US 2024JSNation US 2024
21 min
SolidStart: The Shape of Frameworks to Come
Hello, JS Nation. I'm here to tell you about some interesting stuff I've been working on using SolidJS. SolidJS introduced fine-grain reactivity and signals six years ago, while other frameworks are now recognizing the value and incorporating similar concepts. Recently, server-side rendering and meta frameworks have gained attention, and SolidJS also has its own meta framework called Solid Start. In this talk, I'll discuss Solid Start and its role in shaping future frameworks. A meta-framework is important because it enables faster time to production, improved code quality, and other benefits. Solid Start is a non-opinionated way to start applications, allowing developers to choose their own path. It took three years to develop, going through two beta phases and major API rewrites. Solid Start is powered by Solid Router, Seroval, Solid, and Vinci. The application allows users to catch Pokemons, and the code uses Solid Router and File Routing for lazy loading components. Preloading data for components helps optimize fetching by eliminating network waterfalls. SOLIDSTART gives you the freedom to choose your path and is the shape of frameworks to come.
Patterns for Large Scale Vue.js Applications
Vue.js London 2023Vue.js London 2023
24 min
Patterns for Large Scale Vue.js Applications
Top Content
In this Talk, Daniel Kelly discusses patterns for large-scale Vue.js app development, emphasizing the importance of following standards and using officially recommended tooling. He highlights the Vue.js style guide as a valuable resource for styling standards and suggests using TypeScript and Nuxt 3 to enhance development capabilities. He also mentions the benefits of having a naming convention for routes and the concept of wrapping third-party dependencies for flexibility. Additionally, he mentions the app-icon component for a generic icon solution and the advantages of interacting with backends via an SDK.
Panel Discussion: What's the big next step for Vue/Nuxt?
Vue.js Live 2024Vue.js Live 2024
43 min
Panel Discussion: What's the big next step for Vue/Nuxt?
Eduardo San Martin Morote
Maya Shavin
Konstantin BIFERT
Daniel Roe
Alexander Lichter
5 authors
We're focusing on performance improvements, both in build and development time. Additionally, we're exploring the use of WASM for deploying binaries into production. WASM is great for performance. Data loader is also important. The target audience for the podcast is Vue developers, including middle to senior developers. The podcast aims to provide new and advanced topics, including features, examples, use cases, and inspiring stories. Podcasts are complex without screen sharing, but videos can provide more in-depth content. Nuxt will be interesting to see. VaporMode in Vue enables performance through built-time transforms. The merging of Wiz and Angular brings core primitives and resumable components. Nuxt community is focusing on performance. The Vue router has an open issue with many routes. Legacy issues with ESM and TypeScript cause pain for maintainers and consumers. Node and the required ESM are exciting. Accessing Cloudflare primitives in development. Micro frontends have a shell with multiple frontends and require a general store. Web components have shown promise, but there are pain points. Mitosis and ReactiveView are alternative solutions. Web components are the best way to adhere to browser standards, but they may have limitations. Nuxt has seen successes despite the limitations of web components. Nuxt 3 has invisible improvements and a good developer experience. The migration from Nuxt 2 to 3 had communication challenges. The Talk will resume after a short break.
From Hip-Hop to Code
React Day Berlin 2024React Day Berlin 2024
26 min
From Hip-Hop to Code
Today, Elisabeth Oliveira shares her journey from being a hip-hop artist to becoming a design engineer. She highlights her experiences as an artist, including collaborations with Nike and Cristiano Ronaldo, but also the challenges of exploitation and cyberbullying. Transitioning into coding, she faced setbacks but found success as a coder in Dublin. She discusses her project, Cassette Tape, which automates illustrations and won the React Amsterdam award. Elisabeth also demonstrates her SVG audio player and performs a karaoke version of her song. She encourages combining passions with code and emphasizes the importance of open source. She concludes with insights on reconciling with hip-hop and starting projects. Overall, she shares her experiences in bridging the music and tech worlds.
Building a Better Hammer - The Story of Nuxt 4
Vue.js Live 2024Vue.js Live 2024
28 min
Building a Better Hammer - The Story of Nuxt 4
Nuxt is a framework for building web apps using Vue and Nitro, driven by a vibrant open source community. Nuxt 4 aims to make the framework more usable and extensible, while focusing on collaboration rather than competition. The modules ecosystem and pluggable architecture enhance Nuxt's functionality and customization options. Nuxt prioritizes user choice and aims for stability and reliability. Nuxt 4 introduces thoughtful breaking changes and is eagerly anticipated by the community.
React Remixed
Remix Conf Europe 2022Remix Conf Europe 2022
19 min
React Remixed
Remix is a full stack web framework that focuses on the user interface and works back to web standards. It eliminates render and fetch waterfalls in web applications, resulting in improved performance. Remix leverages the foundations of the web and combines them with features like HTTP caching and dynamic server rendering. It allows for progressive enhancement and speeds up the user experience. Remix is a powerful tool for web development with great potential for the future.
The Journey of CodeSandbox Projects
React Summit 2022React Summit 2022
32 min
The Journey of CodeSandbox Projects
Code Sandbox is an online code editor that allows for easy sharing of code. It started as a side project and evolved into a company with significant growth. Code Sandbox Projects integrates Git and allows for contributions back to the original sandbox. Code Sandbox uses a micro VM for fast collaboration and hibernation. The future of Code Sandbox includes improved performance and integration of a faster bundler.
AI-Powered E2E UI Testing: Faster Creation, Easier Maintenance
JSNation US 2024JSNation US 2024
10 min
AI-Powered E2E UI Testing: Faster Creation, Easier Maintenance
Hello, everyone. Today we are going to explore AI-powered end-to-end testing. Unlike unit tests, UI testing has a huge layer of obstructions between the source code and the rendered UI. The source code includes HTML, CSS, and TypeScript, which are transpiled into JavaScript and bundled with tools like Webpack. AI can generate tests effectively for standard websites or blogs, but it may struggle with niche applications behind strict authorization or on-premise tools. AI-powered end-to-end testing for complex scenarios requires our guidance. We use meaningful data test IDs and follow the page objects model pattern. Additionally, we rely on useful tools like the end-to-end test helper in-browser extension and the continue IDE extension. Now, let's proceed to the demo, where we will create tests for the Pokemon application, including the ability to filter by name or type. We will navigate to the Pokemon details page and use our extension to manage settings and prompts. Additionally, we will create the details page object together and generate the test file. The Pokemon details page has 105 elements. We can view the elements for debugging purposes, including page object name, Pokemon details page, and system message. We will copy the page object and save it to a file. We need to make it exportable. Then, we will use the extension to create an end-to-end test and pass the context. I will use all the open files, including the page objects and the test case itself. I will send them to EI along with the predefined prompt. There is a system message and additional information we need to be aware of. The test runs successfully, and that concludes this part.
Pixels, Promises, and Panic: Horror Stories of Production Nightmares
C3 Dev Festival 2024C3 Dev Festival 2024
28 min
Pixels, Promises, and Panic: Horror Stories of Production Nightmares
The Talk covers the importance of preventing and dealing with bugs in software development, with the speaker sharing their experiences and solutions. They discuss the impact of bugs on user experience and revenue, the importance of stress testing and implementing alerts, and the surprising impact of CSS. The speaker also emphasizes the importance of simplicity, monitoring, and refactoring, as well as the need to address security threats and learn from failure. They provide tips for writing postmortems and highlight common mistakes to avoid, especially for junior developers.
Making Magic: Building a TypeScript-First Framework
TypeScript Congress 2023TypeScript Congress 2023
31 min
Making Magic: Building a TypeScript-First Framework
Top Content
Daniel Rowe discusses building a TypeScript-first framework at TypeScript Congress and shares his involvement in various projects. Nuxt is a progressive framework built on Vue.js, aiming to reduce friction and distraction for developers. It leverages TypeScript for inference and aims to be the source of truth for projects. Nuxt provides type safety and extensibility through integration with TypeScript. Migrating to TypeScript offers long-term maintenance benefits and can uncover hidden bugs. Nuxt focuses on improving existing tools and finds inspiration in frameworks like TRPC.
Say No To Complexity With AlpineJS
JSNation Live 2020JSNation Live 2020
33 min
Say No To Complexity With AlpineJS
Alpine.js is a lightweight framework for creating JavaScript behavior directly in markup. It has 13 directives and 6 magic properties, making it like Tailwind for JavaScript. The upcoming version of Alpine will focus on performance and optimization. It sits between jQuery and Vue, offering reactivity without compilation. Alpine.js is robust and resilient for DOM manipulation, and works well with Laravel for localization and internationalization.
All You Need Is a Contract…
React Advanced 2023React Advanced 2023
29 min
All You Need Is a Contract…
Watch video: All You Need Is a Contract…
The speaker discusses the challenges of server state and test maintenance, and how they found solutions using React Query and Mock Service Worker. They emphasize the benefits of defining contracts for faster development and stress reduction. The speaker also highlights the advantages of using Mock Service Worker over mock servers and explains how it allows for easy customization and test overrides. They mention the upcoming release of V2 of MS-Double and encourage the audience to stay updated.
Harnessing the Power of Messagechannel and Broadcastchannel
React Advanced 2023React Advanced 2023
11 min
Harnessing the Power of Messagechannel and Broadcastchannel
Watch video: Harnessing the Power of Messagechannel and Broadcastchannel
This talk explores hidden web APIs for communicating between iframes and web workers. It discusses the disadvantages of a naive messaging approach and introduces the message channel API as a solution. The speaker also presents a library called message-channel-shake that simplifies message channel implementation. The talk covers various technologies like React, broadcast channel, and transferable objects.