Categories
Guest Post

Recap of our Tech Talks Feb 2021 – Online edition

Another year and we’re off with the first edition of our Tech Talks! As we all suffer from video call overload these days we decided that a shorter format with 3 talks would be better to keep everyone engaged and fresh on a Thursday night.

The talks

  1. Generative Adversarial Networks – the technology behind Deepfakes by Lisa Becker
  2. The Future of CSS: Scroll-linked Animations with CSS @scroll-timeline by Bramus Van Damme
  3. Staying Sane while working from home full time by Janique-ka John

1. Generative Adversarial Networks – the technology behind Deepfakes

About Lisa:
Lisa is currently writing her Master’s thesis at the University of Potsdam as an intern at the company ML6 where she develops an “intelligent illustrator”, a text-guided image-to-image translator with Generative Adversarial Networks. Beside the practical applications in computer vision, she’s also interested in the ethical aspect of machine learning. In her free time, she does various volunteer work, yoga, meditation, explores nature and loves popular science.

Twitter: @LisaGreenspecs

Screenshot of a presentation slide with title: Who knows this person? It features a very realistic picture of a human (feminine) face.

Do you know this person? Probably not, but I bet you wouldn’t immediately think that they don’t exist at all. In fact this is an image generated by a generative adversarial network (GAN). A GAN is a class of machine learning frameworks designed by Ian Goodfellow and his colleagues in 2014.

How do GAN’s work?

Neural networks are based on human brain physiology. Every node in the (simplified) overview below can be seen as a neuron in the brain. There are 3 main parts that forward information to each other: the input layer, the hidden layers and the output layer.  Every arrow represents a calculation or computation taking place.

Screenshot of a presentation slide with title: What are GANs? What is a neural network. It depicts the three layers of a GAN: input, hidden and output. Each is represented by several dots and has arrows pointing from them towards the dots of the next layer.

GAN’s consist of 2 neural networks competing “against each other” who both consist of the 3 main layers.

The first network is the Generator: it creates images and is also known as “the artist”. The second one is the Discriminator: it is the “art critic” as it asks if an image is real or generated.

To make this more concrete: consider this image of a cat.

Screenshot of a presentation slide with title: What are GANs? What is a neural network. It depicts the same three layers as in the previous screenshot but now has an image of a cat at the input layer, different parts of the cat image at the hidden layers, and "is this a cat, yes-no?" question at the output layer.

The discriminator works as follows:

Screenshot of a presentation slide with title: What are GANs? What is a neural network. It depicts the same three layers as in the previous screenshots but now has the word "noise" at the input layer, different parts of the cat image at the hidden layers, and a full image of a cat at the output layer.

The generator does the opposite:

The magic happens when you put both systems together. The generator first makes random images and sends them to the discriminator. The discriminator gets input of real images as well as the images made by the generator. Every time the discriminator makes the right call to distinguish between a real or fake image it gets “rewarded”. The discriminator then tells the generator whether or not they did a good job generating the image. This process gets repeated until the generator gets a realistic result.

Use cases for GAN’s

In science GAN’s are used to tackle challenging image analysis problems in medicine, astronomy and other fields.

GAN’s can be used for artistic purposes e.g: in video games, where levels can be generated better than with other strategies for procedurally generated levels. Or in movies where they can be used instead of CGI to add a different actors’ face to a character. Another fun application are photo and video filters on social media.

Still in its early stages but GAN’s can be used in therapy, where a therapist “impersonates” a deceased person to help with the grief process of a patient.

Issues:

Being able to generate new, realistic looking images also has its fair share of problems.

Unfortunately this negative trend seems to spread to other domains too (eg: tampering with medical imagery) so we don’t know what possible problems could arise in the future.

As it gets easier and easier to use GAN’s we’ll have to consider their impact further, and although they can be used for positive implementations they can also be very harmful when they allow for harassment and misinformation.

2. The Future of CSS: Scroll-linked Animations with CSS @scroll-timeline

About Bramus:
Bram Van Damme is a web developer from Belgium. From the moment he discovered view-source at the age of 14 (way back in 1997), he fell in love with the web and has been tinkering with it ever since.

With his company 3RDS he works as a freelance developer. His current focus is on JavaScript, React and React Native yet his love for CSS will never fade.

Twitter: @bramus

CSS animations have been around for a while now, and more and more options that used to be the domain of JavaScript are slowly but surely becoming a part of the official CSS specifications.

Next up are scroll-linked animations, meaning:

“animations [that] are linked to the scroll offset of a scroll container. As you scroll back and forth the scroll container, you will see the animation timeline advance or rewind as you do so. If you stop scrolling, the animation will also stop.”

This also includes scroll-triggered animations or

“animations that are triggered when scrolling past a certain position.  Once triggered, these animations start and finish on their own,  independent of whether you keep scrolling or not.”

This is very useful as CSS animations now only run on page load, which is not an ideal situation for many use cases.

! Fair warning: all of this is still under development so expect changes to hit the specifications before browsers will ship this in the future. The information below will only work in Chromium browsers with the #experimental-web-platform-features flag enabled.

How to define a scroll timeline

The markup is fairly straightforward: you define your animation keyframes, you set up a scroll timeline and apply this to the element where the animation should play.

/* adapted from from https://www.bram.us/2021/02/23/the-future-of-css-scroll-linked-animations-part-1/ */
/* (1) Define Keyframes */
@keyframes animation-frames {
    from {
        transform: scaleX(0);
    }
    to {
        transform: scaleX(1);
    }
}

/* (2) Define a ScrollTimeline */
@scroll-timeline animation-timeline {
    time-range: 1s;
}

/* (3) Attach the Animation + set the ScrollTimeline as the driver for the Animation */
#animated-element {
    animation: 1s linear forwards animation-frames;
    animation-timeline: animation-timeline;
}

The keyframes define the animation itself, while the scroll timeline determines how the animation will play.

@scroll-timeline takes 4 descriptors:

There are a lot more possibilities but I highly recommend reading Bramus’s articles on scroll linked animations because he explains the concept thoroughly and in detail:

The future of CSS animations looks very good and I can’t wait to start using scroll linked animations in web projects!

3. Staying Sane while working from home full time

About Janique-Ka

Janique-ka is a software engineer at MEDIAGENIX and founder of the Women in Tech Caribbean community.

Twitter: @JaniquekaJohn

The Women in Tech Caribbean community website

Read our Member Spotlight Interview with Janique-Ka

To conclude the night Janique-Ka, who was a speaker at our 1 year anniversary meetup back in 2018, who now brings an equally inspiring and practical talk about the mental challenges of working from home.

Screenshot of a presentation slide with title: Staying sane while working from home full time. It has a pretty orange-red background color and sketched drawings of items you'd find on your work desk are scattered across the image.

Tip 0. Find a destressor

Find something to help you unwind and detach from work, even if it’s a bit strange. So no, you don’t have to pick up meditation, sometimes coloring books work just as well. It can really be anything that lets you take your mind off your job.

Tip 1. Physically separate spaces

I think most of us working from home have felt the temptation to just open your phone or laptop in bed and get started. This is generally a bad idea as it lets your work interfere with your non-work space.

Instead it’s better to keep your work space separate from your private space. It signals to your brain that you’re about to do something else, it helps with focus and to detach after the day is done. If you don’t have enough space in your house you can get the same result by using an object or action to signal the start or end of your workday. For example; you can turn on a lamp when you begin working and turn it off once your work is done, or you can go outside, walk around the block and then come back to start or end your day.

Tip 2. Block lunch in your calendar

Don’t eat at your desk, instead take lunch as time away from work to give your brain a rest, while also making sure you actually eat! You may have heard this before so consider this the sign you’ve been waiting for to implement this into your routine.

Additionally it prevents people from scheduling meetings over your break. With the pandemic the hours we spend in meetings have further increased and often people feel pressured to “prove” that they’re working hard when on screen. So making sure you take the time to break up your day with a lunch period becomes even more necessary for your well being.

Tip 3. Don’t try to fit a square peg into a round hole

Regardless of your comfort level with working from home, you should keep in mind that the current situation is just not the same as before. Accept that new routines and habits are a part of your life, and don’t be afraid to act like the situation we are in.  Adapt to the needs of the moment,  there’s no need to feel guilty over it.

Tip 4. Listen to your own body

Oftentimes, you know when enough is enough. If that means taking a nap then you should.

Janique-Ka’s mom would say “Work never dies” , meaning that we – as human beings- have a limited time to spend whereas there will always be more work to be done. Don’t be afraid to prioritize your mental and physical health.

The most important takeaway is that you should experiment with what works for you. I think this is always good to keep in mind but with the worries of the pandemic still looming in the background it’s something we should all take to heart for 2021.


If you enjoyed reading this, feel free to share this with your network ❤️

Avatar

By Eva

I'm Eva, a freelance web designer and front-end developer from Antwerp. Before I started focusing on design & code I studied philosophy and film studies, laying the foundation for why I like to combine both abstract and visual thinking. Outside of work I make illustrations and enjoy (web)comics, animation and gaming.
she/they ✨