React Advanced

React Advanced 2024

Hi there. I want to talk about content editable websites and the importance of understanding the content model of a web page. Separating the content from its presentation is the key thought behind this talk. But if we're looking at the content itself, we're actually focusing on what those things are, not what they happen to be rendered into. The outcome of this talk is to break the cycle of content management systems being used to house data for what it looks like. Instead, we should focus on explicit curation versus content-driven experiences, moving away from explicitly curated experiences towards content-driven experiences. Let's put this into practice and build a website. Components aren't bad, but we need to think about the props that go into them. The problem arises when the content structure is modified to match the appearance instead of prioritizing the content itself. Let's correct these mistakes and prioritize the content over the components. Modeling the content structure instead of specific components allows for flexibility and a better content editing experience. Prioritizing content over components ensures a more relatable authoring experience and longer-lasting designs. Start thinking about content early and have conversations before diving into design and development.

For developers and designers, components are unique, flexible units to compose complete layouts. For content creators, they can trap reusable data into single-use decorations.

Prioritise Content Over Components

Simeon Griggs

React Summit

React Summit 2024

Welcome to the workshop! Today we'll be diving into AG Grid and React, covering features such as column definition, row data and sorting, cell rendering and customization, cell editing, and styling AG Grid. We'll also explore value getters, value formatters, cell renderers, and custom cell editors. AG Grid supports infinite row rendering and integrates seamlessly with Firebase for real-time data streaming. With themes and extensive customization options, AG Grid provides functionality and scalability for handling large datasets.

Does your React app need to efficiently display lots (and lots) of data in a grid? Do your users want to be able to search, sort, filter, and edit data? AG Grid is the best JavaScript grid in the world and is packed with features, highly performant, and extensible. In this workshop, you’ll learn how to get started with AG Grid, how we can enable sorting and filtering of data in the grid, cell rendering, and more. You will walk away from this free 3-hour workshop equipped with the knowledge for implementing AG Grid into your React application.

Build a Powerful Datagrid With AG Grid

Brian Love

Vue.js Live Conference

Vue.js Live 2024

Composables are the Swiss Army knife of every Vue.js developer, helping build more extensible, adaptable, controllable, and trustful applications. They replace mixins and can be used everywhere, connecting different parts of the system and sharing common state. Composables are versatile, allowing for local or global use, and can be applied in both the domain layer and UI. They provide adaptability, controllability, easy testing, and eliminate the need to test the environment. Consider using Vue use for a library of composables and start building your own collection.

<div>Composables (composition functions) are stateful/stateless functions that can leverage Vue's reactivity API, decoupling it from components. </div><div>This shift in perspective opens the possibility for tackling common scenarios in a new and creative way.</div>

The Swiss Army Knife of Every Vue Developer

Juan Andrés Núñez Charro

Node Congress

Node Congress 2024

Fabien Vauchel is a software developer passionate about web scraping and the creator of Scrapoxy, a proxy aggregator. Isabella, a student, used web scraping to gather data for her trip tool. The talk discusses various techniques for web scraping, including using language models and proxies to bypass website protections. The speaker also introduces ScrapOxy, a super proxy aggregator, and explains how to integrate it into web scraping projects. The use of Playwright, a headless browser, is highlighted for handling fingerprint errors. Ultimately, the talk emphasizes the importance of adjusting time zones to successfully complete web scraping requests.

Unlock the potential of web scraping with this session! 1/ Building Web Scrapers - The Art Unveiled2/ Proxy and Browser Farms Adventure3/ Scrapoxy Orchestration - Elevate Your Scalability4/ Protection Measures DisclosedThis concise session will immerse you in the world of web scraping.#WebScraping #Proxy #ReverseEngineering 🕵️‍♂️

Mastering Web Scraping with Scrapoxy: Unleash Your Data Extraction Wizardry!

Fabien Vauchelles

React Summit US

React Summit US 2023

The speaker works on the Atlas Device SDKs, which allows testing code across multiple platforms and has support for multiple programming languages. They also built Mocha Remote CLI, a tool for running tests on Node.js and in a browser. The speaker mentions the popularity of Jest and the alternative Vitest for running tests on platforms like Android and iOS.

Running tests on Node.js is common practice for app and library developers. But when your library is integrating more deeply with the platform, operating system or JS engine, you need to run tests “on device” increases. The Realm JS team at MongoDB is faced with this challenge, as we’re maintaining a React Native library with native modules. In this talk I’ll share the “mocha-remote” package which we’ve built to help us run tests “on device” while getting reporting and remaining in control from the comfort of our terminals.

How Realm by MongoDB is Testing Native Modules “on device”

Kræn Hansen

AG Grid is a powerful JavaScript grid used in various applications. It can handle millions of rows of data and supports Excel-like functionality. The most important construct in AG Grid is the column definition, which instructs AG Grid on how to represent properties in the data set. AG Grid provides sorting and filtering options, as well as the ability to customize cell rendering and editing. Styling cells and rows in AG Grid can be done using cell styles, cell classes, or cell class rules. AG Grid also offers customization options with CSS variables, SAS rules, and module system for bundle size control.

Does your React app need to efficiently display lots (and lots) of data in a grid? Do your users want to be able to search, sort, filter, and edit data? AG Grid is the best JavaScript grid in the world and is packed with features, highly performant, and extensible. In this workshop, you’ll learn how to get started with AG Grid, how we can enable sorting and filtering of data in the grid, cell rendering, and more. You will walk away from this free 3-hour workshop equipped with the knowledge for implementing AG Grid into your React application. We all know that rolling our own grid solution is not easy, and let's be honest, is not something that we should be working on. We are focused on building a product and driving forward innovation. In this workshop, you'll see just how easy it is to get started with AG Grid. Prerequisites: Basic React and JavaScript Workshop level: Beginner

Build a powerful DataGrid in few hours with Ag Grid

Mike Ryan

TS Congress

TypeScript Congress 2023

Today's Workshop focused on setting up a Vue TypeScript project and integrating it with Rollbar for error monitoring. Participants learned how to modify code to be TypeScript compliant, connect Rollbar plugin and test components, and add additional data to the payload. The Workshop also covered customizing the payload, configuring Rollbar, and using the transform function to modify the payload. Overall, participants gained insights into handling errors, capturing telemetry data, and integrating Rollbar with other tools.

During this session you will learn how to create a new Rollbar account and integrate the Rollbar SDK with your application to monitor errors in real-time and respond and fix those errors. We will also cover how to customize payload data sent to Rollbar to extend your monitoring capabilities. Agenda:- Create a Rollbar Account (Free Account)- Integrate your application with the Rollbar SDK- Send handled and unhandled errors to Rollbar- Add Custom payload data to your configuration.

Live Coding Workshop to Setup Rollbar Error Monitoring

Nico Krüger

JS Nation

JSNation 2023

Apache Kafka is a distributed, scalable, and high-throughput event streaming platform that plays a key role in event-driven architecture. It allows for the division of monolithic applications into independent microservices for scalability and maintainability. Producers and consumers are the key components in Kafka, allowing for a decoupled system. Kafka's replication and persistent storage capabilities set it apart from alternatives like Redis and RabbitMQ. Kafka provides easy access to real-time data and simplifies real-time data handling.

You’re curious about what Apache Kafka does and how it works, but between the terminology and explanations that seem to start at a complex level, it's been difficult to embark. This session is different. We'll talk about what Kafka is, what it does and how it works in simple terms with easy to understand and funny examples that you can share later at a dinner table with your family. This session is for curious minds, who might have never worked with distributed streaming systems before, or are beginners to event streaming applications. But let simplicity not deceive you - by the end of the session you’ll be equipped to create your own Apache Kafka event stream!

Apache Kafka Simply Explained With TypeScript Examples

Olena Kutsenko

GraphQL Galaxy

GraphQL Galaxy 2022

Welcome to the talk! As developers, we manage and understand the data that the world runs on. Each individual schema in your infrastructure defines your data in the context of its own domain. The Prisma schema is used to generate migrations and create a mapping between the database and API, enabling type-safe interactions. The GraphQL schema allows clients to safely query the database via the API. By using Prisma and GraphQL Code Generator, you can achieve an end-to-end type-safe environment.

In a world run by data, we as developers have turned to schemas to help describe and organize that data. But what happens when you have a ton of schemas to keep track of? In this talk you will learn the role of all the different schemas in a GraphQL API.

Schemas Everywhere: Understanding GraphQL, Databases & Prisma

Sabin Adams

This Talk is about real-time data updates for Neo4j using GraphQL subscriptions. The Neo4j GraphQL library provides automatic schema generation, read queries, mutations, and resolvers. It handles subscriptions using WebSockets and is completely agnostic. The library also has built-in support for events and relationships, allowing for real-time updates and easy scaling. The Talk concludes with details about subscriptions using AMQP and a showcase of Neo4j GraphQL subscriptions in a project called neo place.

Join Thomas from the GraphQL Team at Neo4j as he talks about one of the newest features of the Neo4j GraphQL Library: GraphQL Subscriptions. Using this new feature, GraphQL API consumers can listen to data changes in real-time, which happen in Neo4j via the GraphQL Library. Following a high-level overview of the Neo4j GraphQL Library, he will demonstrate the new Subscriptions feature.

Real-Time Data Updates for Neo4j Using GraphQL Subscriptions

Thomas Wiss

JSNation 2022

The Workshop introduces AG Grid and covers topics such as setting up row data and column definitions, enabling sorting, configuring grid features and user interaction, accessing the grid API, and adding styling. It also explores custom cell renderers, filters, and enterprise features like charting, grid options, and sidebar functionalities. The Workshop concludes with discussions on advanced grid features, aggregation, customizing the context menu, and accessing and updating data in the grid.

Get started with AG Grid Angular Data Grid with a hands-on tutorial from the core team that will take you through the steps of creating your first grid, including how to configure the grid with simple properties and custom components. AG Grid community edition is completely free to use in commercial applications, so you’ll learn a powerful tool that you can immediately add to your projects. You’ll also discover how to load data into the grid and different ways to add custom rendering to the grid. By the end of the workshop, you will have created and customized an AG Grid Angular Data Grid. Contents:- getting started and installing AG Grid- configuring sorting, filtering, pagination- loading data into the grid- the grid API- add your own components to the Grid for rendering and editing- capabilities of the free community edition of AG Grid

Get started with AG Grid Angular Data Grid

Stephen Cooper

React Summit 2022

Haushal, a Developer Advocate at Contentful, discusses content modeling and its importance in providing a great user experience. He uses his Cookbook web app as an example to explain how he structures and organizes content. The overall content model emphasizes reusability and considerations for content governance and platform selection. Content modeling is an iterative process, and Haushal provides resources for further learning and development.

In today's world, it's no surprise that "Content is King". It helps in telling a story and helping you reach out to more people. Most of the time, developers aren't the ones managing this content. Hence, modeling content efficiently becomes crucial. Doing it well makes the content delivery process smooth for the team. But how does one go on with modeling content? What are the things that one should take care of? I'll answer such questions in this talk, and share my approach to content modeling as a React developer.

Content Modeling for React Developers

Harshil Agrawal

Every bug and feature can be a potential flaw or entry point for bad actors. React Native projects have many dependencies that can be exploited. It's important to understand your app's native code and follow security guidelines. Analyzing and modifying code can alter an application's behavior. Repackaging and modifying compiled code is relatively easy. App update vulnerabilities can be demonstrated by redirecting URLs. Code reviews and automated tooling are important for accountability. There are resources available to learn about basic security precautions for React Native.

Ever wondered how hackers can compromise your app and your app data? In this talk you will see how to infiltrate your own app with different techniques like decompiling, sniffing, etc.. By the end of the talk, you'll walk away a little bit scared but more prepared with some great practices to infiltrate your own app and the knowledge to battle them.

Infiltrate Your Own React Native App

Wouter van den Broek

Functional programming is a beautiful paradigm that allows us to understand programs and how entities behave and interact. It has nice characteristics like predictability, which makes testing and debugging easier. We explore how functional programming handles side effects and generative art. We learn about drawing patterns and grids with recursive functions, handling state in functional programming, and creating fashion using functional programming techniques. We also discuss handling randomness in functional programming and how to introduce organic variation and randomness to art while maintaining predictability.

Functional Programming (FP), a paradigm in which programs are made up of pure, stateless functions, is adored by many programmers for how easy it makes it to predict, test, and debug the behavior of the code we write. Although FP has an unfortunate reputation as an ivory-tower domain full of obscure jargon comprehensible only to those with PhDs in category theory, the core concepts are straightforward ideas all of us can understand, and even have fun learning! In this talk, we’ll create generative SVG art as a way to explore fundamental FP concepts such as recursion and function composition, and tackle the practical challenges of FP in the real world, such as dealing with the tricky parts like side effects and randomness which don’t fit into the safe, sterile world of pure functions. By the end of the talk we’ll not only have the key concepts &amp; techniques we need to start writing our own functional programs, we’ll have some pretty functional art to look at too!

The Art of Functional Programming

Anjana Vakil

GraphQL Galaxy 2021

Today's workshop is about building a serverless GraphQL API using StepZen. It covers the code-first and schema-first approaches, connecting multiple data sources, merging data from different endpoints, and using StepZen's sequences to combine data. The workshop also highlights the importance of understanding StepZen and GraphQL for building scalable GraphQL servers.

Want to get started with building a GraphQL server but have no idea where to begin? Every (frontend) developer asks for a GraphQL API but often lacks the backend knowledge to create a performant one. There are many different flavours in creating the perfect GraphQL server, ranging from schema-first to code-first or even auto-generated solutions. In this interactive workshop, you will learn about building a serverless GraphQL API using StepZen. With StepZen, you can create a GraphQL for any data source (SQL, NoSQL &amp; REST) and even other GraphQL APIs within minutes. And even handle more complicated use cases such as authentication and deployment. Using little code, you'll get to combine different data sources in one fully performant API that you can use in your applications from day one. Table of contents: - What is StepZen? - Connecting to a data source (SQL, NoSQL &amp; REST) - Using custom directives - Handle sequence flows - Deployment <a href="https://www.froala.com/wysiwyg-editor?pb=1"> </a>

Building a Serverless GraphQL API For Any Datasource With StepZen

Roy Derks

Node Congress 2021

This Talk discusses the safe handling of dynamic data with TypeScript using JSON Schema and TypeBox. Fastify, a web framework, allows developers to validate incoming data using JSON schema, providing type safety and error handling. TypeBox is a powerful library that allows developers to define JSON schemas and derive static types in TypeScript. The combination of JSON schema, TypeBox, and Fastify provides powerful tools for type safety and validation of dynamic data.

TypeScript makes JavaScript safer adding static type definitions. Static definitions are wonderful; they prevent developers from making trivial mistakes ensuring every assignment and invocation is done correctly. A variable typed as a string cannot be assigned a number, and a function expecting three arguments cannot be called with only two. These definitions only exist at build time though; the code that is eventually executed is just JavaScript. But what about the response from an API request? In this talk Ethan Arrowood, Software Engineer 2 @ Microsoft, he will cover various solutions for safely typing dynamic data in TypeScript applications. This talk features popular technologies such as Fastify, JSON Schema, Node.js, and more! <a href="https://www.froala.com/wysiwyg-editor?pb=1"> </a>

Safely Handling Dynamic Data with TypeScript

Ethan Arrowood

JSNation Live

JSNation Live 2021

This workshop covers the process of making a D3 visualization with real data. It explores drawing elements using D3 and SVG, generating data-driven elements, and building a scatter plot. It also covers useful D3 functions for scale setup, debugging D3 visualizations, and creating dynamic chart components. The workshop emphasizes the importance of object constancy, interactivity, and tooltips in data visualization. It also mentions the potential of D3, different rendering technologies, and the use of the brush tool for data selection.

D3.js is a powerful JavaScript library for building data visualizations, but anyone who has tried to use it quickly finds out that it goes deeper picking your favorite chart type. This workshop is designed to give you a hands-on introduction to the essential concepts and techniques for creating custom data visualizations with d3.js. By the end of this workshop you will have made an interactive and animated visualization on a realistic dataset that you can easily swap out with your own. <a href="https://www.froala.com/wysiwyg-editor?pb=1"> </a>

#data