Topics
react
🧪 Gaining Confidence in React App through Testing
Have you ever felt that writing tests are merely a ritual to increase the code coverage without gaining any significant value from them? Do you think that your tests don't make you confident enough with your codes? Let's hear what I've got to say about them! Whether you're an experienced developer in testing or never write any test code, I believe you would gain something from this talk.
📱 Nuances of React Native
Having not delivered production code in React Native previously before joining my current company, there were many times things were different in React Native and React. In this short pointed bullet points, I will quickly run through nuances of React Native when setting foot from React.
🤕 Battle Stories: Portals
This is not a fairytale talk. This talk is about a real life situation where I solved a particular problem with Portals.
⚒ Adding React DevTools to Your Swiss Army Tools of Coding with React
[React DevTools](https://github.com/facebook/react/tree/master/packages/react-devtools) [v4](https://github.com/facebook/react/blob/master/packages/react-devtools/CHANGELOG.md#400-august-15-2019) and the `<Profiler />` profiler are released (unmarked as unstable) recently. Let's check out how to use them to debug and profile our React app, as well as to learn more about React.
👥 Are React and CSS Friends?
I normally don't like such controversial name. But this is exactly what this talk about. The point is not to create another Twitter war but to propose some thoughts and see we think they make sense or not.
🍱 5 things you need to know about react-cache
`react-cache` is pretty exciting, let's share this excitement
👞 Dancing with React Hooks
React Hooks is THE hot thing now. More and more people can teach you how to use React Hooks, how they work, what the rules are and why. What did you first use React Hooks to make? For me, it was to let someone dance. Join me in your black suit and dress as i introduce to you my Tiny Dancer, and how Hooks made me revisit an important concept in Javascript.
🏅 Hooks: All About Render
When hooks were introduced in React, much ado was made about how they afforded a cleaner, more shareable way to manage state. In this talk I focus on the _other_ consequence - rethinking a components lifecycle in functional components. I’ll explore what it means for things to “participate in the data flow” and how other built in hooks guide us towards this new way of thinking.
css
🤕 Battle Stories: Portals
This is not a fairytale talk. This talk is about a real life situation where I solved a particular problem with Portals.
👥 Are React and CSS Friends?
I normally don't like such controversial name. But this is exactly what this talk about. The point is not to create another Twitter war but to propose some thoughts and see we think they make sense or not.
jamstack
🌊 Adding Codewaves into gatsby blog
Recently Mr. [Rodrigo Pombo](https://github.com/pomber) had published a post on his blog on [Building our own React](https://pomb.us/build-your-own-react/) which caught many eyes especially in terms of how he presented the post to audience. All this made possible by his own Gatsby based theme called [Gatsby Waves](https://github.com/pomber/gatsby-waves). During this talk I'll show on how we can use this theme in our blog and make our blog more prettier. resources --- - video https://engineers.sg/video/adding-codewaves-into-gatsby-blog--3826
🌏 Navigating i18n in SEA with Gatsby
[Ninja Van](https://www.ninjavan.co) has established its presence in six countries across South East Asia for the past few years. Recently we revamped our website using [Gatsby](https://www.gatsbyjs.org/) to enable us to customize its components in React. This talk is a story about my ups and downs in getting i18n works properly at our website to serve those countries in [two](https://www.ninjavan.co) [different](https://www.ninjaxpress.co) domains. resources --- - video https://engineers.sg/v/3827 - slides https://i18n-gatsby.netlify.com/ - slides repository https://github.com/zainfathoni/i18n-gatsby - blog post https://www.zainfathoni.com/talk/react-knowledgeable-meetup-5
💸 (Ec)static Commerce
In this hands-on ⚡️talk we'll explore how we can use Gatsby themes to spin up a simple storefront using [Stripe Checkout](https://stripe.com/payments/checkout), and we'll look behind the scenes of the [Gatsby Swag Store](https://store.gatsbyjs.org/) to see how we can take our static commerce page to the next level with the [Shopify GraphQL API](https://shopify.github.io/js-buy-sdk/). resources --- - video https://engineers.sg/v/3828
🍯 Deconstructing the JAM
Everyone is talking about JAMstack, but what actually is it? In this talk I deconstruct the J-A-M and demystify its not-so-secret recipe. resources --- - [Slides](https://docs.google.com/presentation/d/1gr294EhEn-Gmwyc6mvoujWfJhGqMvHs7Y8BpLzZcIn8) - [Video](https://youtu.be/3uv9RLBM-80)
🐈 Intro to Netlify for React Developers
Intro to Netlify with demos of advanced features with RK's site. resources --- - video https://engineers.sg/v/3830
🔐 Gatsby w/ authentication... and hooks
Gatsby can manage authentication pretty well, but how do we take it to the next level with everyone's favourite React API - Hooks! I'll be detailing how to integrate authentication with Swizec's awesome [`useAuth`](https://github.com/Swizec/useAuth) library.
💄 Build a Gatsby Theme and publish
I'd like to speak about **Build a Gatsby theme and publish**. Here's a little more background and motivation about the talk: Gatsby is an open source framework based on React and GraphQL which lets developers to build fast websites. Very recently Gatsby announced theme support which makes the life even more easier because all our default configuration, design, share functionalities will be abstracted out from our side and can be used as an installable package. I'm going to show on how to build a simple gatsby theme quickly and publish to npm registry. Also, I'll be showing on how to use the package from the npm and build a quick simple website.
🦖 How Modern Static Site Generators Work
I'd like to talk about the architecture of modern SSGs (static site generators) and how they work. Jekyll, Hexo, and Hugo are few of the earliest static site generators to have been invented and they have been used to build a significant number of websites in history. More recently, modern SSGs such as Gatsby, Next, Docusaurus and VuePress have emerged. These SSGs are an improvement over traditional SSGs - the initial render is HTML but sequent navigations utilize HTML `pushState()` and client-side rendering. Such hybrid rendering approaches provide an awesome user experience of a fast initial load (low TTI) and fast subsequent navigations. This talk goes into the inner mechanisms behind how modern SSGs are built and their architecture. *Spoiler alert - they're really similar!* We will also see how Docusaurus is an example of such a modern SSG framework that can be used for building fast and performant websites.
💨 Build and deploy a blog under 10 minutes with JAMstack
I'd like to speak about **Build and deploy a blog under 10 minutes with JAMStack**. Here's a little more background and motivation about the talk: JAMstack is hot now which enables anyone to build the websites with quick turnaround. During this talk, I'll show a quick demo on building a simple blog site and deploy it in netlify using Gatsby (React, GraphQL and markdowns).
react native
📱 Nuances of React Native
Having not delivered production code in React Native previously before joining my current company, there were many times things were different in React Native and React. In this short pointed bullet points, I will quickly run through nuances of React Native when setting foot from React.
graphql
💸 (Ec)static Commerce
In this hands-on ⚡️talk we'll explore how we can use Gatsby themes to spin up a simple storefront using [Stripe Checkout](https://stripe.com/payments/checkout), and we'll look behind the scenes of the [Gatsby Swag Store](https://store.gatsbyjs.org/) to see how we can take our static commerce page to the next level with the [Shopify GraphQL API](https://shopify.github.io/js-buy-sdk/). resources --- - video https://engineers.sg/v/3828
⚡️ Incredible usage of GraphQL's schema ✡️
GraphQL is a query language for your API. There are a lot of benefits gained if you using it. For my point of view, the best benefit of GraphQL is not that we can reduce number of requests or prevent overfetching. The best feature of GraphQL is schema which allows developers, tools to work together seamlessly. I will show my usage of schema including Apollo plugin for your vscode, Type generate from your schema, automatic reviewing schema changes using GraphQL Inspector
testing
🧪 Gaining Confidence in React App through Testing
Have you ever felt that writing tests are merely a ritual to increase the code coverage without gaining any significant value from them? Do you think that your tests don't make you confident enough with your codes? Let's hear what I've got to say about them! Whether you're an experienced developer in testing or never write any test code, I believe you would gain something from this talk.
web api
🕹 Yet Another Reason to Buy A Switch (that Has Joy-Cons)
This talk is about [turning a Nintendo Switch's Joy-Con 🕹 into a clicker](https://aworkinprogress.dev/joy-con-clicker/), which is non-trivial effort because you need to poll keypress events by yourself using the Gamepad API. In this concise version of the talk, instead of technical details, I'll talk about what I learned by building this feature and toying with the gamepad API - overview / motivation of the project - polling key presses using a game loop As I understand, this is marginally related with JAMstack. And if the stage is full I'm happy to give this talk in the following event. resources --- - talk script + slides https://uuei.io/talks/yet-another-reason-to-buy-a-switch-that-has-joy-cons/ - video https://engineers.sg/v/3825