Jozi.JS / Online meetups 2020 and 2021

A Whimsical Walkthrough of Wasm Proposals
Duncan Dean (@dunxen)

We'll take a little stroll through what WebAssembly is and why we might want to use it in the browser for the unacquainted. Then we'll focus on recently standardised features of Wasm and more proposals to come. We'll be discovering problems along the way and how these features and proposals can help us overcome them. It'll also become clear that JavaScript and Wasm are friends after all!

Core Web Vitals
Mike Geyser (@mikegeyser)

📢Submit a talk: https://goo.gl/forms/66MrplT1FogDX88Q2​
💛Code of conduct: https://docs.google.com/document/d/1j-OfcTwYejEj-WiQq9F9AcVv2L-Ki81RuhFTjquDJyk/edit?usp=sharing
Meetup: https://www.meetup.com/Jozi-JS/events/276828228/

Debugging Web Apps with Chrome Dev Tools
Ivan Bila (@ivanbila)

Debugging it’s usually what takes the largest chunk of software development(in my experience), by learning the Chrome Dev Tools tool-set we can speed this process up and make it more enjoyable and less painful. furthermore we can audit our code's impact to the browser and user experience.
In this presentation, I’ll talk about dev tools in general but most specifically:
- Elements tab
- Console and console functions
- Network Tab
- Sources Tab
I’ll talk about how to use the sources tab to debug web applications and set breakpoints based on XHR requests DOM nodes events, mouse click events, and more. I’ll also explain the most critical components of the network tab and how to use them to help debug your app. Lastly, I’ll also demo how to use local overrides to speed up testing, the new CSS grid inspector, and how to emulate mobile devices on the browser.

❓Q&A: slido.com - #55106
📢Submit a talk: https://goo.gl/forms/66MrplT1FogDX88Q2
💛Code of conduct: https://docs.google.com/document/d/1j-OfcTwYejEj-WiQq9F9AcVv2L-Ki81RuhFTjquDJyk/edit?usp=sharing
Meetup: https://www.meetup.com/Jozi-JS/events/276044212/

ClojureScript with React, WebSockets and Clojure
Deon Moolman (@ CmdrDats)

A quick demo starting from a basic html/css template, lifting that into a dynamic app that talks to a small backend using websockets.

I will quickly go over some Clojure syntax basics, so that you can know roughly what you're looking at, live code the project and cover some common pitfalls to bear in mind as you would scale the code into a fully functional app.

My aim is to show what your common workflow could look like while developing a ClojureScript app, and to share some of the learnings we have come across while developing multiple apps.


❓Q&A: slido.com - #56111
📢Submit a talk: https://goo.gl/forms/66MrplT1FogDX88Q2
💛Code of conduct: https://docs.google.com/document/d/1j-OfcTwYejEj-WiQq9F9AcVv2L-Ki81RuhFTjquDJyk/edit?usp=sharing
Meetup: https://www.meetup.com/Jozi-JS/events/275680568/

Creating Cross-platform Mobile Apps with Expo (RN)
Sebastião Bruno Kiafuka Fernando (@bruno_kiafuka)

In this talk, I’d like to present Expo CLI, which is a tool that allows developers to create cross-platform apps using expo.
Why expo?
Expo reduces the barrier to entry for new RN Devs and also helps users to quickly prototype their apps to users without having to submit this apps to the store.
I’d also be demoing a small app using expo, presenting also expo web.

How I Leveraged the JAMstack for Progressive Enhancement
Ire Aderinokun (@ireaderinokun)

Services like Puppeteer give us the power of headless browsers, which give us to power to do things like dynamically capture screenshots of web pages. This can be incredibly useful for creating static image fallbacks of content that would otherwise only be accessible with Javascript enabled.

In this talk, I’ll show how I used Puppeteer and Cloudinary to create what I call “live images” of the dynamic embed of CanIUse compatibility tables I created. Together we’ll create a tiny microservice that leverages these technologies and we’ll see how it all fits together to create the final product.

❓Q&A: slido.com - #32872
📢Submit a talk: https://goo.gl/forms/66MrplT1FogDX88Q2
💛Code of conduct: https://docs.google.com/document/d/1j-OfcTwYejEj-WiQq9F9AcVv2L-Ki81RuhFTjquDJyk/edit?usp=sharing
Meetup: https://www.meetup.com/Jozi-JS/events/273089884/

How to map a pandemic
Richard Young (@richardyoung00)

Being the most populated province and a major economic hub, Gauteng has seen roughly a third of all confirmed COVID-19 cases in South Africa. To manage the spread of cases the Gauteng Provincial Government partnered with IBM Research, Wits University and the GCRO to build a web based analytics platform to help answer questions such as where the current hot spots of infection are, where the virus is predicted to spread, and which communities are the most at risk.

The platform has been used internally by the Provincial Government for a while, but was recently released to the public at https://gpcoronavirus.co.za. In this talk I will take you through the technologies we used to build the platform, some of the challenges we had to overcome, and how to get started with mapping out geo-spacial datasets in the browser.

Deno: Is it just Node, but alphabetically?
Gergana Young (@gerybbg)

Node.js was the first, and for a long time the only, runtime that allowed us to run JavaScript outside the browser. Its popularity is massive, and there are tons of systems running it in production. However, even its creator, Ryan Dahl, has been heard talking about the bad parts. This is why he started a new project, Deno.

Deno is a new JavaScript (and TypeScript) runtime for the server built in Rust. It is still very new, with version 1.0 only having been released in May 2020. It is meant as an alternative to Node, and was built to avoid a lot of Node's pitfalls. Although having some disadvantages of its own, the creators are working on ironing out the kinks and making it suitable to run in production.

Join me for this, code heavy, talk where I will start off by taking you through the advantages and disadvantages of Deno. I will then show you how to get set up, and we will go through an example of creating a RestAPI in Deno.

❓Q&A: slido.com - #11285
📢Submit a talk: https://goo.gl/forms/66MrplT1FogDX88Q2
💛Code of conduct: https://docs.google.com/document/d/1j-OfcTwYejEj-WiQq9F9AcVv2L-Ki81RuhFTjquDJyk/edit?usp=sharing
Meetup: https://www.meetup.com/Jozi-JS/events/273637015/

Art of War - Privacy by Design
Fadzayi Chiwandire (@fadzayic)

As Sun-Tzu highlighted, "If you know the enemy and if you know yourself, you need not fear the result of a hundred battles. If you know yourself but not the enemy, for every victory gained, you will also suffer a defeat. If you know neither the enemy nor yourself, you will succumb in every battle."
As an Organisation, Programmer, Designer, how well do you know yourself and the products you build? How well do you understand the threats your products face and how effective the security and protection measures you have put in place to safeguard your software are?
Privacy by Design ensures that good privacy practices are built into an organisation's decision-making, as well as the design and structure of products, processes, and services. The idea is to bake security and privacy measures into the code of any product from the early stages of development.
Today, organisations see cybersecurity as the responsibility of the IT department and privacy as the responsibility of the Legal Department. Applying Privacy by Design means, having a cross-functional team of Legal, Design, and IT experts working together to make sure the products the organisation is building meet all the security and privacy requirements. This helps companies shift from the fire-fighting approach to a more proactive approval, thus improving their digital resilience.

Build better websites with Eleventy
Mike Geyser (@mikegeyser)

We have lost the art of building websites. Don't get me wrong, we build for the World Wide Web all of the time. We build Apps and Components and Services and Content Management Systems, but we seldom just build websites. A surprisingly large amount of what we build can (and probably should) just be HTML, CSS and a (small) sprinkling of JavaScript. We have this stigma against building static pages, which is largely unfounded. Well, enter Eleventy, the static site generator that we deserve.

Join me as I show you how to build simple, easy, engaging websites using Eleventy. We'll look at the basic premise of the tool, as well how to customise it to suit your needs. By the end of this talk you will have a newfound respect for static websites, and be armed with everything you need to build better websites.

❓Q&A: slido.com - #18273
📢Submit a talk: https://goo.gl/forms/66MrplT1FogDX88Q2
💛Code of conduct: https://docs.google.com/document/d/1j-OfcTwYejEj-WiQq9F9AcVv2L-Ki81RuhFTjquDJyk/edit?usp=sharing
Meetup: https://www.meetup.com/Jozi-JS/events/272821704/

The FUNdamentals to the basics of Angular to help you get started with Angular Material
Craig Stroberg (@ CraigStroberg)

Have you ever wanted to create an Angular Material website or you have been tasked to maintain one and you want to have fun whilst doing so?

We will get you through some of the basics of Angular going through some of the key concepts found in Angular that Material leverages. We will along the way explore components of Angular Material and how to make use of their documentation.

Building web apps in plain JavaScript
Toby Kurien (@tobykurien)

This talk, aimed towards beginners, walks through creating a modern web app using plain HTML, CSS, and JavaScript. The idea is to aim for simplicity, and to understand how modern browsers work (we will make use of Web Components too) , while learning a minimum set of tools and concepts that will allow you to build production-ready apps. We won't be using any frameworks, so no prior knowledge is needed, other than basic HTML and JavaScript.

❓Q&A: slido.com - #11530
📢Submit a talk: https://goo.gl/forms/66MrplT1FogDX88Q2
💛Code of conduct: https://docs.google.com/document/d/1j-OfcTwYejEj-WiQq9F9AcVv2L-Ki81RuhFTjquDJyk/edit?usp=sharing
Meetup: https://www.meetup.com/Jozi-JS/events/271620720/

The power of Adobe XD + Photoshop in Website design and Mockup
Thabiso Magwaza (@ njinji_t)

This talk will be about how a mockup tool such as Adobe XD coupled with Photoshop can be a powerful addition to one's web development workflow. I've found that developing a website becomes orders of magnitudes easier when a design and mockup of the site already exists. Adobe XD is easy to use and is extremly powerful espcially when coupled with adobe photoshop. In this talk, I'll demonstrate Adobe XD by building a quick mockup of a website's landing page to show the audience how quick and easy it is to get it done.

Google App Engine - How, What, Why and Why not
Sheena O'Connell

Deployment to GAE is pretty easy and there are lots of tutorials out there, but personally I've found them slightly opaque. I mean, it's easy enough to follow along, but what does it all mean? In this demonstration I will attempt to make GAE seem less magical and also give a little run down of some features I like, eg how you can manage multiple versions of multiple services, how error reporting works, a few shortcomings and a few comparisons to other google cloud products.

❓Q&A: slido.com - #47272
📢Submit a talk: https://goo.gl/forms/66MrplT1FogDX88Q2
💛Code of conduct: https://docs.google.com/document/d/1j-OfcTwYejEj-WiQq9F9AcVv2L-Ki81RuhFTjquDJyk/edit?usp=sharing
Meetup: https://www.meetup.com/Jozi-JS/events/270878644/

Adding an Immersive Reader to your website/app
Rory Preddy (@rorypreddy)

Just a few years ago, the Immersive Reader was a bold idea in a Microsoft Hackathon focused on using the latest science and research around reading while using inclusive design principles to empower people of all abilities. Today, with Microsoft Office, more than 1 billion people every month are using it for free, improving their reading and writing comprehension. But there is more - You can integrate with the Immersive Reader as an Azure Cognitive Service! This means that any app can easily integrate Immersive Reader to make it easier to read text. Join me as we show how easy it is to add Immersive reader to your JavaScript based web app making it exponentially more accessible.

Your JavaScript app in the Cloud
Gergana Young (@gerybbg)

So, you've written this amazing web app. It is really something to be proud of, and you want to show it off to the world. Where do you start, how do you get it off your computer and into the hands of millions of people. Don't worry, I will show you the way.

All you'll need is a little bit of YAML, your favorite browser, and the application you are deploying and you are ready to go. Using Microsoft Azure, GitHub and Azure pipelines we will take an application built entirely in JavaScript and put it in the cloud. We will make sure that this process is fully automated and that every time there is a push to the master branch our application runs through all of the necessary checks and updates automagically.

❓Q&A: https://www.sli.do with event code: 27768
📢Submit a talk: https://goo.gl/forms/66MrplT1FogDX88Q2
💛Code of conduct: https://docs.google.com/document/d/1j-OfcTwYejEj-WiQq9F9AcVv2L-Ki81RuhFTjquDJyk/edit?usp=sharing
Meetup: https://www.meetup.com/Jozi-JS/events/270213599/

Using Elasticsearch as a data store
Ryan Kotzen (@eXigentCoder)

In the past you may have used Elasticsearch to store your log messages with the good intentions of being able to search through them and help you debug issues but have you ever considered using Elasticsearch as your primary datastore? You may have heard that Elasticsearch can greatly speed up your full text searches and auto-completion in your website, but have you managed to set it up yet?
Come join us as we explore the amazing product that is Elasticsearch and show you how this can be done, and all in JavaScript of course!

How to Lighthouse
Mike Geyser (@mikegeyser)

Performance is a feature. It is arguably the most important feature of modern web experiences, but at times it can be a dark art. Complex build tools, confusing profilers and an abundance of metrics make it seem like one has to be a true web wizard to understand it all. It shouldn’t be hard and luckily isn’t - provided you use the right tools. Built directly into Chrome, the Lighthouse audit reports drive away from the darkness and shine a spotlight on the opportunities available to you, making it easy to improve.

This talk will provide a detailed walkthrough of optimising performance using the Lighthouse audit report. By way of a challenging application, we will identify and implement performance optimisations. We will make small, measurable changes to improving our web application, taking one easy step at a time.

❓Q&A: https://www.sli.do with event code: 86592
📄Feedback form: https://bit.ly/jozijs
📢Submit a talk: https://goo.gl/forms/66MrplT1FogDX88Q2
💛Code of conduct: https://docs.google.com/document/d/1j-OfcTwYejEj-WiQq9F9AcVv2L-Ki81RuhFTjquDJyk/edit?usp=sharing
Meetup: https://www.meetup.com/Jozi-JS/events/269597572/