• KarlsruheJS 🌐 Worldwide: 🗝 Auth with Next.js // 🎨 Chakra UI

    Friends,
    after the disastrous last minute cancellation last time we are back with a certified banger of an event this time.

    We have two talks for you!

    Slot one: Next.js Auth by Xiaoru "Leo" Li

    Xiaoru is somewhat of a KarlsruheJS veteran. He has given a few talks at our events and they were always a hit.
    This time he will show us how to do authentication with Next.js.
    That's one of the few things missing in Next.js in order to build an app with user accounts.

    Slot two: A talk about Chakra UI by Segun Adebayo

    Chakra UI is a React UI framework and design system implementation that has been gaining steam over the last months. Segun Adebayo is the creator of Chakra Ui and will give us the rundown!

    See you then!

    ---

    Join the KarlsruheJS chat on Discord: https://discord.gg/2mgMFsw

    3
  • KarlsruheJS in Quarantine Special: 🚀 Scaling JavaScript & 🔬 Micro-Animations

    Hey JavaScript lovers in quarantine,

    please join us for our first ever KarlsruheJS in Quarantine Special!
    This meetup will be held completely online and virtual via GoToWebinar.
    This way you can enjoy the talks and link up with the KarlsruheJS community completely from the comfort of you own quarantine!

    Get your Quarantinis ready (it's a Martini, just enjoyed in quarantine) and please register here:

    https://attendee.gotowebinar.com/register/6319203792733629196?source=Meetup

    We also set up a brand new KarlsruheJS Slack channel!

    Join here: https://karlsruhejs-slack.herokuapp.com/

    👋see you soon!

    ---

    AGENDA

    19:00: Intro by Kahlil Lechelt

    19:15: 🚀 SCALING JAVASCRIPT DEVELOPMENT by Johannes Reuter (http://twitter.com/johannes_reuter)

    The Javascript stack of web software development (Node.js, Webpack, Angular/React) works well for tons of small to medium sized projects.
    But when scaling to bigger projects with 7 digit numbers of lines of code and hundreds of active contributors, it’s quite likely to run into issues. This talk goes through several lessons learned in scaling the Kibana code base (https://github.com/elastic/kibana) to its current size regarding to architecture, tooling and operations.

    19:45: Quick break to get yourself some drinks, go to the bathroom and socialize in the chat!

    20:00: 🔬 MICRO-ANIMATIONS WITH REACT SPRING by Emma Bostian (http://twitter.com/emmabostian)

    How many times have you thought to yourself, "I really wish I knew how to add animations to my web app" but had no idea where to start? In this talk we’ll dive into micro-animations (what are they, why should you care) and learn how to build them with React Spring.

    ---

    This quarantine special edition of KarlsruheJS is supported by GoToWebinar by LogMeIn (http://gotowebinar.com)

  • 🕺Svelte & 💡Photon.js

    EXXETA AG

    AGENDA

    19:00: INTRO by KarlsruheJS team

    19:15: YOU ALREADY KNOW SVELTE by Xiaoru Li (http://twitter.com/hexrcs)

    Having heard of Svelte, but too busy to try it out yourself? Well, if you've worked with a UI framework like React or Vue before, picking up Svelte should be fairly easy. You'll feel like you already know Svelte!

    This talk is a practical introduction to Svelte. We will first take a quick look at why Svelte is so different than all the other major players on the market, and how it takes a different approach to building UIs. We will then dive into all the essential concepts that you will need to start building your own Svelte project. You will learn the basics of reactivity and how your existing knowledge can be easily transferred over to Svelte-land.

    19:45: 🍕& 🍻

    20:30: DATABASES: THE ELEPHANT IN THE NODE.JS ROOM by Tom Houle (http://twitter.com/_tomhoule)

    Node.js/TypeScript developers have various options when it comes to accessing databases in their applications, each with their own benefits and drawbacks:

    - Writing plain SQL provides precise control over your database operations. However, mastering SQL takes takes a lot and writing as well as maintaining SQL strings in an application is time-consuming and error-prone.

    - Query builders like knex.js are a low-level abstractions on top of SQL. They help developers save time by allowing them to build up SQL queries programmatically. Developers still need to have a deep knowledge of SQL for efficiently working with their databases.

    - Traditional ORMs like Sequelize and TypeORM are higher-lever abstractions that provide an object-oriented mapping layer from classes to tables. They are typically based on "fat models" that not only implement behaviours for storage and retrieval, but also bussines logic.

    - Photon.js is a type-safe database client that's auto-generated and customized for your application. It features a powerful data access API that's designed with the needs of application developers in mind.

    In this talk, we'll provide an overview of these different data access methods and explain the tradeoffs for each approach.

    21:00: Hangout

    ---

    This installment of KarlsruheJS is hosted an sponsored by our friends at EXXETA (http://exxeta.com)

    4
  • KarlsruheJS September 2019

    ETECTURE GmbH

    NEW MEETUP 🎉

    Call for speakers 📣, send us your abstract to [masked] or contact us on Twitter (http://twitter.com/karlsruhejs).

    AGENDA

    19:00: Intro by KarlsruheJS Team

    19:15: Managing application state with statecharts by Mikey Stengel (https://twitter.com/codingdive)

    ABSTRACT
    Is your app growing in complexity and you write tons of conditional logic that is hard to read, write and maintain?

    In the past, many state management tools have been introduced to deal with a set of problems while always creating some problems on their own. We can address many, if not all the issues by using statecharts instead.

    By introducing you to statecharts, you'll learn how to model your application state in a way that reduces the number of bugs, makes refactoring easier and turns testing into a blissful experience.
    Among other things, you'll see how to turn the statecharts in your code from a JSON representation into an actual graph that visualizes all the possible application states and state transitions. On top of being able to spot bugs more easily, the visualized graph can also be a valuable asset when communicating with designers or other non technical people in your project.

    19:45: 🍻 & 🍕

    20:30: A (terrible) introduction to Next.js by Kahlil Lechelt (http://twitter.com/kahliltweets)

    You (indirectly) asked for it, you got it! In this talk we'll cover what Next.js is, why Next.js is and how it works.

    21:00 - 22:00: Hangout

    ---

    This meetup is sponsored and hosted by our friends at ETECTURE (https://www.etecture.de)

    1
  • KarlsruheJS July 2019: bonkers time zones & CLI tools with Ink

    Dear friends of JavaScript things, Once again we have two really cool talks for you! See the agenda below!

    AGENDA

    19:00: Intro

    19:15: A Day Has Only 24±1 Hours by Miroslav Šedivý (http://twitter.com/eumiro)

    On the last Sunday of October you may get “one more hour of sleep” but also may spend much more time debugging code dealing with the timezones, daylight saving time shifts and datetime stuff in general. Invention of the geographers in the 19th century, time zones became a true victim of short-sighted political decisions during the 20th and 21st centuries. And it is still our duty to keep track of this whole fiddling with our clocks. We'll look at a few pitfalls you may encounter when working with datetimes. We'll discover the tzdata library and explain why it contains over 500 individual timezones, with a slight focus on Germany and surrounding countries. We'll also find the reason why it gets updated so often and why even that won't solve all your problems. Two centuries of propaganda and chaos in less than forty minutes. Maybe that will make you want to avoid time zones in your code altogether!

    19:45: 🍻 & 🍕

    20:30: Delightful Command-Line Interfaces with Node and Ink by Xiaoru "Leo" Li (http://twitter.com/hexrcs)

    Text based CLI tools are wonderful. They are fast, lightweight, and universally accessible. Best of all - building them in modern JavaScript is a delightful experience.

    After a quick overview of the history of CLI tools and how they really work, you will be introduced to the Node.js ecosystem for building CLI tools. We will then take a deeper look at Ink v2 - a super awesome library that allows us to use React and Flexbox to create complex, dynamic, and interactive command-line interfaces.

    21:00 - 22:00: chill

    ---

    This meetup is sponsored and hosted by our friends at solute gmbh (https://www.solute.de/ger/)

    4
  • JS & UX Rooftop BBQ Hangout

    LogMeIn Germany GmbH

    Hey there, we are teaming up with the UX Quick & Dirty Meetup Karlsruhe (https://www.meetup.com/de-DE/UX-Quick-and-Dirty/) to give you the JS & UX Rooftop BBQ Hangout!

    NO TALKS, JUST BBQ, DRINKS & NETWORKING.

    We believe that UX designers and JavaScript developers have a lot in common and should talk to each other. That's why we put this little rooftop gathering together.

    Beware we have very limited space and you should take your RSVP very seriously for this event. Please be a good Meetup.com citizen and update your RSVP if you can't come so that people from the waiting list can attend the event.

    1
  • KarlsruheJS May 2019: 🕸 Web Components, 🔥 Lit Element & ⚠️ Unstable React

    19:00: WELCOME & INTRO

    19:15: WEB COMPONENTS & LIT ELEMENT by Walter Laurito (https://www.linkedin.com/in/walter-laurito-951565144/)

    The presentation deals with the use of web components in your own projects. First, there will be an introduction to native web components demonstrated by a prepared real-world programming example. Afterwards, the benefits and drawbacks of web components are highlighted. A solution to how to solve some problems of a native approach is shown by using LitElement and LitHtml. Finally, there is a comparison to common tools like React and Angular and how web components can be simply integrated into projects using those.

    19:45: 🍕& 🍻

    20:30: UNSTABLE REACT: EXPERIMENTING WITH UPCOMING REACT FEATURES by Josef Roth (http://twitter.com/jsfroth)

    React is evolving rapidly right now. New features promise to change the way how we write and architect our applications. The already-released Hooks are the first step in this process. But if you have a look into Reacts codebase you will find some unstable APIs too. I have played around a little bit with them and want to share my experiences with you and provide an outlook what might be coming later this year.

    21:00: Hangout 💛

    --

    This event is sponsored and hosted by our friends at ETECTURE (http://etecture.de)

    3
  • KarlsruheJS April 2019: ⚛️ Syncing Redux & 🛠 C++ to Web with WebAssembly

    👋😎

    This time we'll be hearing about ⚛️ syncing Redux & porting C++ apps to the web with 🛠 WebAssembly.

    19:00: Intro

    19:15: Synced Redux by Johannes Reuter

    ABSTRACT

    Redux is a popular solution for handling state in client side web applications. But it falls short in providing solutions for syncing this application state across other devices and servers. In this talk I present an approach to tackle this problem - including perks like elegant conflict resolution, data migration and end-to-end encryption.

    19:45: 🍕& 🍻

    20:30: WebAssembly: Embedded native Code inside the Webbrowser – C++ goes Web by Martina Kraus

    ABSTRACT

    Porting an old C++ desktop app to a single page application without rewriting business logic?
    That's possible with web assembly. Further running native embedded Code inside the browser comes without a performance penalty. This enables the developer to create also compute heavy tasks like video and image rendering. After small examples, aiming to show the compiler toolchain, Martina will deep dive into the question: How to port existing C++ Application to web assembly?

    21:00: Hangout

    ---

    Code of conduct: https://github.com/karlsruhejs/code-of-conduct

    ---
    This meetup is sponsored and hosted by our friends at dmTECH (https://www.dmtech.de)

    4