Search results for "Daniel Rios Pavia":

Daniel Rios Pavia
Daniel Rios Pavia
Freelancer, Germany
Shopify Engineer, working on frontend and open source. Originally rails dev.
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 Conference 2022React Advanced Conference 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.
Patterns for Large Scale Vue.js Applications
Vue.js London 2023Vue.js London 2023
24 min
Patterns for Large Scale Vue.js Applications
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.
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.
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 Conference 2023React Advanced Conference 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 Conference 2023React Advanced Conference 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.
Taming Language Models through TypeScript
TypeScript Congress 2023TypeScript Congress 2023
26 min
Taming Language Models through TypeScript
TypeChat is an open-source library that uses TypeScript types to guide and validate responses from language models. It allows for the creation of complex responses and provides a way to repair errors in the model. TypeChat programs enable better flow of data and the ability to refer to individual steps. The math example demonstrates the use of a program translator and metaprogramming techniques for type safety. Language models trained on both code and prose perform well in this context.
MDX in React-Native!?
React Advanced Conference 2021React Advanced Conference 2021
21 min
MDX in React-Native!?
Top Content
This Talk is about the development of MDX, a combination of Markdown and JSX, by a freelance full stack JavaScript developer. MDX is a powerful technology that allows for the creation of interactive content within blog posts and supports React components. The speaker developed RnMDX, a proper and polished MDX library for React Native, which can be dropped into any React Native app. RnMDX provides solutions for common issues with Markdown content in React Native and allows for the rendering of MDX content into native views. Bringing MDX into native apps is now easier, and it can be used for various purposes, such as serving the app layout from a CMS or creating interactive online magazines or blogs.
Using Next.JS and Redux for Epic Noscript Web Apps
React Advanced Conference 2021React Advanced Conference 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.