| title | date | author | category | tags | layout | preview | metaIMG | ||
|---|---|---|---|---|---|---|---|---|---|
Recap of our Tech Talks Feb 2021 - Online edition |
2021-03-16 |
evab |
techtalks |
|
article |
Code is one of those things in life, where you don't know how useful it is until you get really proficient at it. |
womendotcodebe-techtalks-recap-feb2021.jpg |
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.
{% image {src: "./blog/guest-blogs/images/techtalks-lisa.png", alt: "Lisa Becker", widths: [300]} %}
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 Read our Spotlight Interview with Lisa
{% image {src: "./blog/guest-blogs/images/lisa1.png", alt: "Slide showing a picture of a person generated by a GAN", widths: [300, 600, 1000]} %}
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.
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.
{% image {src: "./blog/guest-blogs/images/lisa2.png", alt: "a visual representation of a GAN neural network", widths: [300, 600, 1000] } %}
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.
{% image {src: "./blog/guest-blogs/images/lisa3.png", alt: "A visual representation of how a cat picture passes through that neural network, layer per layer ", widths: [300, 600, 1000] } %}
The discriminator works as follows:
- input layer: pixel values, for every dot of the image.
- hidden layers: will try to figure out the structure of the image. It looks at these structures to determine if they are part of “a cat”: does it have pointy ears, almond shaped eyes, etc?
- output layer: gives you the probability of the image being a cat y/n.
{% image {src: "./blog/guest-blogs/images/lisa4.png", alt: "a render of the cat picture after it has passed through the neural network", widths: [300, 600, 1000] } %}
The generator does the opposite:
- input layer: “Noise” – these are random sample values so the end result will be variable.
- hidden layers: will look at what is needed for the structure of a cat and will translate this into pixel values.
- output layer: an image of a cat (hopefully).
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.
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.
Being able to generate new, realistic looking images also has its fair share of problems.
-
Racial bias: as these GAN get trained by predominantly white people it can create an implicit bias. E.g: low res images of people of color get “rebuilt” as high res images of white people.
{% image {src: "./blog/guest-blogs/images/lisa5.png", alt: "profile pictures passed through GAN which rendered a completely different person as outcome", widths: [300, 600, 1000] } %}
-
Fake identities: social media has seen an increase in bots that pretend to be real people to spread (political) propaganda.
-
Identity theft: deepfakes, or fake images of real people are probably the best known issue with GAN’s. Social media and other platforms experience difficulties banning the practice of deepfakes because these images are becoming increasingly hard to distinguish from real ones. It’s estimated about 96% of all deepfakes are porn but not just of the rich and famous, revenge porn often targets regular people too. It can also be used as targeted harassment against anyone with a public profile such as journalists, politicians and others.
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.
{% image {src: "./blog/guest-blogs/images/techtalks-bram.png", alt: "Bram Van Damme", widths: [300]} %}
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.
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:
- time-range: how long the animation takes
- source: targets the element to which to apply the scroll container. This makes it possible to fire animations based on when their container element is in view!
- orientation: how the scroll should behave, either vertical – the default, or horizontal. Yes finally full CSS way of letting your page or container scroll horizontally without any JavaScript or CSS hacks!
- scroll-offsets: takes a start and end value. Here you can determine where in the container your animation should begin to run and where it should end.
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: Scroll-Linked Animations with @scroll-timeline (part1)
- The Future of CSS: Scroll-Linked Animations with @scroll-timeline (part2)
The future of CSS animations looks very good and I can’t wait to start using scroll linked animations in web projects!
{% image {src: "./blog/guest-blogs/images/techtalks-janique-ka.png", alt: "Janique-ka John", widths: [300]} %}
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.
{% image {src: "./blog/guest-blogs/images/janique-ka-1.png", alt: "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.", widths: [300, 600, 1000]} %}
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.
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.
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.
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.
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.