View this email in your browser

Welcome to issue #2! We’re looking forward to our next livestream in a few days, this time it’s about pattern matching with Typescript, including some sweet goodies, so be sure to RSVP asap :)

Other than that, for this issue we collected some handy resources on SVGs related to the “icon hell” event im March, check out the video as well.

Enjoy the beginning of spring!

Your organisation team
Jan, Katarzyna, Josue

Thu, 29th April 2021

Bringing Pattern Matching To Typescript

With the emergence and wide adoption of libraries such as React, Redux or XState, in the last few years the frontend ecosystem has shifted from an imperative to a declarative programming model. Now that we have realised how much easier it is to reason about declarative code and how many bugs are ruled out by embracing this paradigm, there is simply no going back.

Yet, Javascript and TypeScript weren’t designed for this paradigm, and these languages are lacking a very important piece of the puzzle: declarative code branching.

This talk will demonstrate how we can write conditional logic that is easy to read and maintain using ts-pattern, a Pattern Matching library for TypeScript.

Speaker

Gabriel is a data visualisation software engineer @ Datadog passionate about application architecture, programming language design and colouring pixels.

Sponsor

Datadog is a SaaS-based monitoring and security platform for infrastructure, applications, logs, and more. Through its fully unified platform, Datadog delivers complete visibility into the performance of modern applications.

Goodie: Free Datadog Trial + Cup Cakes

Datadog offers a free trial to all participants. You can test Datadog in your own environment and discover 400+ integrations with popular technologies, metrics, distributed tracing, and log management, that provide complete, end-to-end visibility in one unified platform.

Among all participants who RVSP and provide their email address for the trial access, we raffle 5 boxes with 9 tasty cup cakes delivered to your doorstep.

Thu, 20th May 2021

Automating Service Workers With Workbox

Speaker: Maxim Salnikov

Details tba soon, save the date!

Tue, 4th May 2021

Progressive Web Apps - Was geht da offline?

Was sind eigentlich diese Progressive Web Apps von denen alle reden? Und wie genau funktioniert das mit den Service Workern und dem Offline Modus? In diesem Talk zeigt Jan euch anhand eines praktischen Beispiels wie man mit Vue, Workbox und IndexedDB eine moderne PWA baut - bzw. wann man die Finger davon lassen sollte.

clickbar. fullstack talks

How about a talk from you?

Our community-hub is the ideal platform for YOU to talk about your frontend passion. Wanna learn to speak in front of a crowd or improve your speaking skills? We support you!

Which topics do you wanna hear?

We would love to know what kind of topic we could prepare for you next time. What are you passionate about? What do you want to learn? Tell us and we will take care of cool speakers for you. Thanks!

A hell of an icon

Using well known game avatars, Hendrik showed why using icon fonts could put you a bit more into icon hell when you want to have maximum flexibility in terms of positioning and theming. He demonstrated how SVGs combined with subtle animations give you a lot more creative options in combination with your text font and reduce visual noise in your user interface.

Thanks for this session, Hendrik! And please checkout the list of SVG resources below to dig in deep into vector graphics on the web.

Here could be your company promotion space

To further expand our community activities we need sponsoring partners. There are many company options - like this prominent space in the newsletter … and we have more plans.

SVG

• Getting Started with SVG Guide on MDN

• Cool video explaining SVG and how it differs from other image formats

• practical overview of how you can use SVGs incl. some tips and tricks

• Problems of SVG and possible solutions

• Louis and Cassie Evans publish the viewBox newsletter where they talk about a different aspect of SVG every month

• SVG Path Visualizer: Learn what all the letters and numbers in an SVG path are actually saying and get more comfortable with the path syntax

• Video: Interactive web animation with SVG

• “A complete guide to SVG generators — for everything from SVG shapes and cropping tools to SVG filters, color matrix mixers and SVG to JSX generators”

• Tutorial about generative blob SVGs

• Icon libraries: https://www.svgrepo.com/ + https://css.gg/

• (DE) SVGs in HTML einfügen: Vor- und Nachteile

• Understanding Clip Path in CSS

• Talk about SVG accessibility

• How to use SVG patterns (old, but still valid!)

• Creating Patterns With SVG Filters

• Stop Using Icon Fonts

• SVG: The Good, the Bad and the Ugly

• A web app to generate unique SVG shapes, backgrounds, and patterns

Mixed

• Say Hello To CSS Container Queries

• Container Queries are actually coming

• “Core concepts that enable a proper understanding of CSS. Whether you are a beginner or have been wrangling front-ends for years, you will find something here that will make your life much easier.”: How to understand CSS

• (DE) GraphQL in 2021 by the workingdraft folks

• Deep dive into the innards of Git: Git From The Inside Out

• Curated list of Web Security materials and resources

• Resources and lightweight libraries to help you solve a problem without a large overhead or third-party dependencies: Vanilla JavaScript Code Snippets

Do you know more interesting resources?

Shout out to VueJS enthusiasts in Rheinmain: vuejsfrankfurt.de searching for a successor to continue running the meetup. Please reach out to Alex if you're interested!

Already 2 years ago Sebastian Golasch talked about exciting possibilities with the new Web USB API and which crazy things are possible when you actually can talk to your hardware via the browser. We think an update on the latest IoT ideas from him would be cool, what do you think? Also checkout his talk about WebRTC!

Frontend RheinMain is a community-hub for frontend devs and friends in RheinMain. Our misson is to push knowledge transfer and connect webworkers by running meetups and livestreams and supporting related initiatives. We enable developers connect with other webworkers, to learn new stuff and get inspired by latest developments in the frontend field.