Wednesday, 21 February

00:34

A primer to creating timeline based animations without knowing
JavaScript

Introduction

The GreenSock Animation Platform (GSAP for short) is a powerful
JavaScript library that enables front-end developers and designers
to create robust timeline based animations. This allows for precise
control for more involved animation sequences rather than the
sometimes constraining keyframe and animation properties that
CSS offers.

The best part about this library is that its lightweight and
easy to use.

With GSAP, you can start creating engaging animations with
little to no knowledge of JavaScript.

This guide will show how to set up and use GSAPs TweenMax
feature and also dive into a bit of Club GreenSocks DrawSVG plugin.
Each of the examples below has a corresponding CodePen link so you
can follow along in another tab.

Getting Started

Before coding, we first need to add the GSAP library to our HTML
file. To do this, you will need to grab the CDN link to the
TweenMax library. You can find links to TweenMax and other GSAP
CDNs here.

Note: CDN stands for Content Delivery Network.
This means that instead of hosting the JavaScript files on your
site, an outside source like CloudFlare can host them
for you.

Once you have the CDN link, insert it in a <script> tag at
the bottom of your HTML file like so:

Thats all you need to get started! If youre using an online
development environment like CodePen, you can install GSAP by
editing the Pen Settings.

Click
the gear icon next to the JS text editor and search for TweenMax to
install it in CodePen

Understanding Tweens

Tweens are the basic animation functions from within GSAP. To
animate any HTML object, we must call the object, define the
properties that we are going to animate, the duration of the
animation, the animations easing, and any other parameters like
delay timing.

For example, if we were to change a red rectangles color to
black while also moving it down and to the right, the Tween would
look like this in JavaScript:

00:28

Dealing with asynchronous non-blocking processing has always
been the norm in the JavaScript world, and now is becoming very
popular in many other contexts. The benefits are clear: an
efficient use of resources. But the benefits come at a cost: a
non-trivial increase in complexity.

Over time, vendors and the open source community have tried to
find ways to reduce such complexity without compromising the
benefits.

Asynchronous processing started with callbacks, then came
Promise and Future, async and await. Recently another kid has come
to townReactiveX with its
various language implementationsbringing the developers a new
powerful tool, the Observable.

In this article, we want to show how Observables implemented by
RxJs (the JavaScript
embodiment of ReactiveX) can simplify code to be executed with
Node.js, the popular server-side JavaScript non-blocking
environment.

A simple use caseRead, Transform, Write, and Log

To make our reasoning concrete, lets start from a simple use
case. Lets assume we need to read the files contained in
Source Dir, transform their content and write the
new transformed files in a Target Dir,
while keeping a log of the files we have created.

ReadTransformWriteLog

Synchronous implementation

The synchronous implementation of this use case is pretty
straightforward. In a sort of pseudo code representation, we could
think of something like:

read the names of the files of Source Dir for each file name read the file transform the content write the new file in Target Dir log the name of the new file end forconsole.log('I am done')

There is nothing special to comment here. We can just say that
we are sure of the sequence of execution of each line and that we
are sure that things will happen as described by the following flow
of events. Each circle corresponds to the completion of an I/O
operation.

The
sequence of events in a synchronous world

What happens in an asynchronous non-blocking environment
like Node.js

Node.js is an asynchronous non-blocking execution environment
for JavaScript. Non-blocking means that Node.js does not wait for
I/O or Network operations to complete before moving to the
execution of the next line of code.

Processing one file

Reading and writing files are I/O operations where Node.js shows
its non-blocking nature. If a Node.js progra...

Tuesday, 20 February

20:55

I asked myself this question when I started learning how to
build single page apps (SPA) to include rich interaction on my
apps. SPA has the ability to re-render different parts of the UI
without requiring server round-trip.

This is achieved by separating the different data, which
represent the state of the application, from the presentation of
these data.

The view layer renders a representation of
these data to the UI. A view can be made up of different
components. As an example, consider an online store with a product
listing page. The page could contain components that represent the
different products and their prices, a visual count of the total
items in the cart, and a component to suggest similar products to
the purchased items.

The model layer contains data to be rendered by
the view layer. Each component in the view are independent of each
other, each rendering a predictable set of UI elements for the
given data, but multiple components can share the same data. When
there is a change in the model, the view re-renders and updates the
component affected by the model update.

The Problem

The application state can be stored in random objects in-memory.
Its also possible to keep some state in the DOM.

But having the state scattered around can easily lead to
unmanageable code. It gets hard to debug. If multiple views or
components share similar data, its possible to have that data
stored in a different memory location, and the view components will
not be in sync with each other.

With a separation of views from models, data gets passed from
the model to the view. If there are changes based on user
interactions, this will update the model and this model update
could possibly trigger an update to another model and also update
another view component which can also trigger an update to
a model.

One of the known issues with this unpredictable flow of data was
the notification bug on Facebook. When youre logged in to Facebook,
you see a notification for new messages. When you read it, the
notification clears. After some interactions on the site, the
notification comes up again, then you check and there are no new
messages and the notification clears. When you interact more with
the app, the notification comes back again and this goes on in
a cycle.

The Aim

It is easy to add complexity to the code if the state isnt
managed properly. Therefore, it is better to have one place where
the data lives, particularly when the same data has to be shown in
multiple places in the view. With a haphazard flow of data, it
becomes hard to reason about state changes and predict the possible
outcome of a state change.

The solution: Unidirectional data flow and single source
of trut...

06:04

What Music Can Teach Us About How We Share Code

Is
that a Cello-playing ape?

Not that long ago, many of us were carrying a suspicious-looking
suitcase in the back of our cars, or had one hidden under our beds.
Some of us had Ikea-made towers with multiple storage spaces
standing proud in our living rooms. In both cases, this was the
result of our impressive music CD-Roms collection. Today, chances
are they are nostalgically stored in our garage.

After a short reign, music CD-Roms were replaced by iTunes and
YouTube, with MP3 players in between. This revolution happened
mainly because of 5 major disadvantages CDs had from
day one:

They were cumbersome to use, carry and handle.

They took too much effort to purchase/create.

They were very hard to change and modify. Nobody really wanted
to burn a new CD whenever a new Bieber song came out (dont
judge me).

They forced us to carry a bunch of songs we dont listen to and
zap through them just to listen to a single song we really wanted
to listen to.

Who remembered which songs were on which CD? 90% of my burned
CDs contained the same 10 songs anyways.

Surprisingly, this isnt all that different from the way we share
code today, between projects and between people. Lets
see how.

How on earth is that like sharing code?

I
usually just like to listen to my light-saber swooshing back
and forth

Modularity has always been the holy grail of software
development, and the key to better reusability, maintainability and
testability.

Every day, more of the applications we build are designed with
greater modularity through smaller components of code. Reusable
functionalities, UI and Web components (such as React, Vue and
Angular), Node.js modules, GraphQL APIs and even serverless
functions are our building blocks.

Now lets be honestwho knows exactly which reusable components
were written in their codebase, organizes them, and shares them
between their projects at scale? I know I didnt. Then, I started
asking myself why not.

Let me show you. Here is a React movie
application hosted on GitHub. As you can see, it contains a
total of 49 files and 14 directories. One of these directories is
the components sub-directory. Inside that sub-directory there are 8
reusable React components (such as hero and navigation).

src

App.js

App.scss

App.test.js

components

hero

hero-button

item

list-toggle

logo

...

05:03

Setting the scene

Im a sixteen-year-old teen, and this is the story of how
I went from noobie to becoming aGoogle Code-In(GCI)winner.Google
Code-inis an international contestto introduce pre-university students (ages 1317) to open
source software development.

There are cool prizes as you advance through the competition:
digital certificates, t-shirts, hoodies, and finally the Grand
Prize Trip to Google HQ. This years edition had over 3500 students
from 78 countries who completed 16468 tasks.

No story is complete without a flashback. Bear with me, as I
bring you back in time. The good parts of the story grow more
meaningful when you understand whats going on backstage :)

Spoiler: The lessons learned were more valuable than the actual
prize. So stick around until the end.

$journey[0] = Day 0 Zero D;

486 days ago (16 months
but fancier)

I was in 10th grade back then. I didnt know how to program. All
I knew about the subject from school was that HTML was a
programming language. Pseudo-code? Nah, never heard of it. Python
was the name of a reptile back then. Now I know its actually
a beast.

One fateful day though, everything changed. While flipping
through a (borrowed) textbook, I came upon a flyer. It was about
the schools robotics club. Quite a shabby-looking thing, with
Comic Sans splattered everywhere. The designer in me
writhed in pain, but me being me, I decided to give it a shot. That
moment was my launch into the wonderful world of programming.

The first thing we learnt was visual programming with Scratch.
We used it to tinker with robotics kits like Hummingbird and Finch. As someone with no prior
knowledge of code, I found Scratch convenient. The fact that we
used it for practical purposes concretized my opinion.

Through
Scratch, we made our monstrous creation pour a glass of water. It
was one year later that Id realise that Python would have been a
better start.

$journey[1] = $events["Infotech", "GCI" ];

439 days ago

December was quickly approaching. Our robotics club wanted to
take part in the annual tech exhibition (...

04:50

A few weeks back I joined the #100DaysOfCode
challenge with the aim of coding, learning and shipping more. I
totally recommend you checking it out, as its an awesome community
of like-minded and super friendly coders.

I'm a Software Engineer that never finishes side projects! To
fix my inability to focus &amp; cement my coding knowledge, I
plan to complete the #100DaysOfCode challenge. Aim: Attain the
@freeCodeCamp Frontend
Development Certificate &amp; build a number of side
projects!

The community will bring you probably the most favorites,
retweets and new connections youve probably ever had on Twitter.
But showing your love back to your fellow coders takes away
precious coding time. So I did something about it.

I built a Bot to automatically favorite all #100DaysOfCode
tweets so that I could spend more time on coding.

Building and hosting a Twitter bot.

Today Ill be showing you how to build and host a Twitter bot.
Its super simple, and if you get stuck just reach out to me on TwitterI dont
bite.

Step #1: Setup a Twitter application

03:55

Consistency was never my strong suit. When I was younger, I
remember kids my age keeping diaries or journals. My mom even got
in the phase where she bought me a journal in the hope that I
would write.

What was the point? I thought. Sure, it would be nice to look
back to see what 9 year old me thought about life, but the main
issue was that I was scared of making mistakes in my writing. I was
scared that my writing would become a fabrication of events I had
experienced with every fiber of my body in a moment
of time.

My writing wasnt authentic. I wouldnt be able to convey my
thoughts in an eloquent way. I hated the way I sounded. I never
considered myself a writer so why start? These were some of the
thoughts that ran in my young mind for a long time.

It wasnt until my junior year of college when I experienced an
event which changed the trajectory of my growing design career: My
interview experience with Microsoft.

At that time, I had developed this facade where I thought I was
a great designer, and that the pace at which I was learning was
totally fine. I didnt think of pushing myself to learn further, as
I would probably do that once I started working. I was already in a
good place in that I was getting all these interviews! That was
validation enoughor so I thought.

When I found out that I got rejected from Microsoft, I was hurt.
I didnt know how to handle the rejection. I had worked so hard, and
I thought I did great. Anyone who has gotten rejected knows how
soul-sucking and bone-crushing the feeling is.

It wasnt until this moment that I realized the way I was putting
myself down was toxic, and I hated the fact I was making myself
feel useless. I knew I had a lot more growing to do if I wanted to
do big things and if I wanted to handle rejection
in a way that encouraged action.

And action it was. I started reflecting on my experience to see
where I could improve and put my feelings aside. I wanted to come
to terms with rejection, but I wanted to do it in a way that would
give insight to my interview experience for people interested in
tech and preparing for interviews.

This is when I started writing about my
Microsoft Onsite Interview Experience for the whole world to
read. It was a way to reconcile the bitterness of rejection, so I
could look back on my experience and improve from it
moving forward.

As a result of writing about my experience, I was surprised to
receive lots of encouragement and gratitude for sharing my story. I
also found that when I was writing, I enjoyed the process of it
all. I loved crafting a story, reflectin...

I thought that was an interesting feature. I mean, lets face
itthere are only two types of people in the world: those who like
to zoom in on images and those who wont admit it. So I opened a
project that I had to test it out and sure enough, it works as
advertised.

My next thought was to see if it worked on SVG images. Because I
like to zoom in on SVG and watch it not degrade. At this point in
my life, that is an enjoyable and fulfilling activity.

It turns out that VS Code does not provide a visual preview for
SVG files from within the editor. Which makes sense. SVG is markup
and VS Code treats SVG files like XML, which is only text. You
would need XSLT to
render it into something you could view. I just triggered
a bunch of you, and for that, I apologize.

Here is a great joke about XML to soothe your anxiety:

XML is like violence: If it isnt working, you arent
using enough of it

- Unknown

This got me wondering, if VS Code treats SVG like XML, what
extensions are available to help me work with SVG in VS Code? It
turns out that there are quite a few, and some work better than
others. Here are a few of my favorite extensions for working with
SVG in VS Code.

SVG

Thats right. This person was first to the game and got the
coveted SVG name all to themselves. Like the person who registered
the Twitter name Burke. What the heck, Sam! You havent tweeted
in.YOUVE NEVER TWEETED!

Sam,
if youre reading thistweet at me and lets talk. Seriously. You dont
even wa...

02:31

The idea behind Word2Vec is pretty simple. Were making an
assumption that the meaning of a word can be inferred by
the company it keeps. This is analogous to the saying,
show me your friends, and Ill tell who you are.

If you have two words that have very similar neighbors (meaning:
the context in which its used is about the same), then these words
are probably quite similar in meaning or are at least related. For
example, the words shocked, appalled, and
astonished are usually used in a similar context.

Using this underlying assumption, you can use Word2Vec to
surface similar concepts, find unrelated concepts, compute
similarity between two words, and more!

Down to business

In this tutorial, you will learn how to use the Gensim
implementation of Word2Vec and actually get it to work. Ive long
heard complaints about poor performance in general, but it really
is a combination of two things: (1) your input
data and (2) your parameter settings.

Note that the training algorithms in the Gensim package were
actually ported from the original Word2Vec implementation by
Google and extended with additional functionality.

Dataset

Our next task is finding a really good dataset. The secret to
getting Word2Vec really working for you is to have lots and lots of
text data in the relevant domain. For example, if your goal is to
build a sentiment lexicon, then using a dataset from the medical
domain or even Wikipedia may not be effective. So, choose your
dataset wisely.

For this tutorial, I am going to use data from the OpinRank
dataset from some of my Ph.D
work. This dataset has full user reviews of cars and hotels. I
have specifically gathered all of the hotel reviews into one big
file which is about 97 MB compressed and
229 MB uncompressed. We will use the compressed
file for this tutorial. Each line in this file represents a
hotel review.

Now, lets take a closer look at this data below by printing the
first line.

01:19

During my internship at Intuit last summer, I was part of a
hackathon team that created a conversational UI experience. We
interviewed a few people who had experience in this field, and I
had the opportunity to interview Angela Nguyen. Angela is a
UX designer at Amazon, working on the Alexa Team. You can view her
work here.

What is your process for designing conversational user
interfaces?

It depends on the conversation. I work mostly with shopping
questions, because I am on shopping team.

My process always starts with the customer and what their
needs are.

For example, if they are trying to buy paper towels, then the
first thing I do is think about the AIs response. Is it going to
return paper towels based on having already purchased it or the
present situation? Where are they making this order, or are they
able to make an order via credit card? It depends on the criteria
of this person, because every person asking the same question can
result in the AI answering a different way.

Every situation is different for every person.

Lets say a given person always buys paper towels, and maybe its
the same towels. I like to create a tree of answers (mind mapping).
It starts with that one question, depending on the circumstance of
this person. This person bought this towel many times, so Alexa
might respond with: Do you want to buy paper towels again? If you
never bought a towel, the AI might recommend a brand.

How do you design a UI designed for voice or
chatbots?

There are headless devices, voice products that dont have a face
or UI. This is completely voice UX. Then there are face devices
which have a screen, kind of like Siri.

When designing for products with a face, it is good to consider
the question, Do you want to show the same graphics as the voice is
saying? If a voice says, I have paper towels that are $10 and
delivered in 2 hours, will it have the image, price, etc or just
the image? It is just good to consider if a person is viewing
something.

Can we simplify the graphics
or voices?

A good example of this is YouTube. If you ever watch a video and
you land on the page, the video starts playing, but you can still
scroll down to the videos while watching the main one.

While your brain is comprehending the audio, your eyes are
taking in other information. The human brain can multi-task, so
when we hear audio and are given visuals, they dont have to match.
You can be listening and looking at comments at the same...

Monday, 19 February

23:25

If youve written a blog post about math, wed love to have you
join us!

Posts must be relevant to students or teachers of school-level
mathematics (that is, anything from preschool up to first-year
calculus). Old posts are welcome, as long as they havent been
published in recent editions of this carnival.

Dont procrastinate: The deadline for entries is this
Friday, February 23. The carnival will be posted next
week at Give Me a
Sine blog.

Have you noticed a new math blogger on your block that youd like
to introduce to the rest of us? Feel free to submit another
bloggers post in addition to your own. Beginning bloggers are often
shy about sharing, but like all of us, they love finding new
readers.

Would You Like to Host the Carnival?

Help! I cant keep the carnival going on my own.

Hosting the blog carnival can be a lot of work, but its fun to
meet new bloggers through their submissions. And theres a
side-benefit: The carnival usually brings a nice little spike in
traffic to your blog.

If this campaign to protect youth services has proved one
thing, it is that when you organise around a demand which is
achievable, have an argument which is strong enough and you pursue
that argument with enough persistence and a great enough diversity
of tactics, you can achieve concrete success. These were the key
elements which won the youth service campaign; saving the service
was realistically achievable, the arguments were solid and we
simply did not leave the council alone, pursuing every possible
avenue available to us, from getting out onto the streets to
legally challenging the consultation process. By following this
formula we believe that we can be successful in fighting off the
cuts again next year, but we...

If youre reading this youve probably discovered that React
Router doesnt come with a solution for animated transitions out of
the box. That ties into React Routers philosophy. It gives you
routing primitives that you can build on and trusts that you can
figure out the rest.

Because every app has different needs, this approach is
typically the safest. The downside of this is that itll take some
extra work to get the exact functionality you want. The tool well
be using alongside React Router in this article is the React
Transition Group.

React Transition Group is an animation library that gives us a
way to perform animations when a React component enters or leaves
the DOM. When paired with React Router, this is exactly what
we want.

Because theres a lot going on in this article, theres going to
be some setup we need to take before we ever even start talking
about animations. Feel free to skip ahead if youd like.

First, lets walk through the type of app were going to be
building.

Animations aside, the goal is to make it so the user can go to
/hsl/:h/:s/:l or /rgb/:r/:g/:b and see the associated HSL or RGB color for
those specific values.

Example with an RGB color

Example with an HSL color

To do this, well rely heavily on React Router URL Parameters. If
youre not familiar with those, I recommend reading this
post before continuing.

By looking at the images above, we know were going to need a few
different things before we even start looking at animated
transitions:

05:38

If you have ever wandered into a department store or other
clothing store, then you can understand how CSS selectors apply
their styles.

If you are a beginner to CSS, you have probably seen plenty of
scenarios already where CSS styling rules
conflict. You think that you just added a new style to an
element, but after refreshing the browser many times you realize
that the style is not being applied for some reason.

Heres an example. Lets say that you have a general rule that all
paragraph tags should have a line-height of 140%,
like this.

p{ line-height:140%; }

But, you also want to create a subtitle class that will have a
line-height of 120%, which will usually apply to paragraph
elements.

.subtitle{ line-height:120%; }

So, which one will apply when you assign it like so?

<p class="subtitle"> This is a subtitle</p>

The answer is the subtitle class styling, but I want to
find a better way to explain the rules behind this logic. You dont
want to open the Inspector every time you are unsure which styling
is more specific..

Heres a scenario to help: imagine you are a salesperson in a
department store or other clothing store. You get paid based on how
many pieces of clothing you sell over the course of the day, so you
need to spend your time with the best customers if you want to make
the most money.

The customers that look most likely to buy get
precedence. The customers that come in with a
specific idea of what they want are more likely to buy.

CSS operates in a similar way. It will give precedence to the
most specific styles, which will override less-specific styles. The
most common ways to add style are:

Element level (p tag)

Class level (.subtitle)

ID

In-line styling

Here is how to tell which of the selectors above are most
specific. In each case, the customer is looking for a tailored
suit, and you must sell as much clothing as possible.

Element SelectorsOnly Having a Vague Idea

Have you ever wandered into a department store with only a vague
thought, like I need a suit for an event next week.?

From personal experience, I can tell you that this is a great
way to get stuck in the store for hours, trying on random suits.
Anyway, these types of customers will take the longest time to find
something they like. They will need to talk to a few people and try
on multiple suits. Their mental image of what they want looks
like this:

Yeah, they have no idea what they want. They still need to pick
a style, find thei...

05:19

How scientists edit genomes with the help of computers

CRISPR (pronounced crisper) is part of a bacterial immune system
evolved to remember and remove invading viral DNA.

Its name is short for Clustered Regularly Interspaced Short
Palindromic Repeats. But despite its mouthful of an acronym and
complex biological origins, its engineering application is
straightforward. To get started, there is only one protein you need
to understandCas9.

Cas9 searches for a specified DNA sequence and cuts it by
breaking both strands of the DNA molecule. This protein is useful
to researchers because they can program it to target any DNA
sequence. A sgRNA (single guide RNA) molecule determines the
sequence that Cas9 binds to. RNA is a biological molecule similar
to DNA, that can bind to proteins and DNA.

sgRNAs are short sequences with a constant region and variable
region. The constant region attaches the sgRNA to the Cas9 protein.
The variable region causes Cas9 to bind to the DNA sequence that
complements it (see the diagram below).

The
Cas9 protein bound to the DNA when the PAM sequence is on the
forward (top) strand. The bold sequence is the target sequence, the
green sequence is the sgRNA, and the three blue characters are the
PAM. The triangles show where Cas9 will cut the DNA.

Making sgRNA is cheap and fast. This allows researchers to
quickly set up a Cas9 experiment that cuts any DNA sequence. Well,
not actually any sequence. There is a small constraint:
the target sequence must be flanked by the correct PAM (protospacer
adjacent motif)a short sequence of DNA.

Luckily, the motif NGG occurs roughly once every 42 basepairs in
the human genome. This mean that researchers can find a target site
near almost every sequence of interest.

Depending on the experimental set up, these cuts in the DNA can
either cause a random change or a precise
change to the DNA sequence (more on this later).

Before jumping into writing this program, I recommend studying
the Cas9 diagram below.

The
Cas9 protein bound to a DNA sequence when the PAM sequence is on
the reverse (bottom) strand.

Note that DNA and RNA have a directionality based on their
chemical structure. One end of the molecule is referred to as the
5` (five-prime) end, and the...

05:02

Security vulnerabilities can be boring to learn. But you still
need to learn them, unless you want some hacker to delete all your
production databases. To make it a bit more entertaining, I tried
to explain 3 major vulnerabilities in terms of every day life. So
without further delay lets begin.

Man-in-the-middle attack

When you open a website you are connecting to a server. You can
imagine this connection like a river and the data (for example
Tweets in Twitter) are messages in bottles that float down
the river.

If Alex (the server) wants to send you a dinner invitation he
has to put it in a bottle and send it down the stream. But what if
John (the attacker) takes the bottle out of the river and changes
the message into an insult, then puts it back in the river? You
will have no way of recognizing that the message you received hadnt
been sent by the Alex!

This is called a Man-in-the-middle attack.

To solve this you and Alex can decide that you will write your
messages reversing the order of the characters. For example,
secret message becomes
egassem terces.

John doesnt know the method you used to
generate the secret code, so he cant understand what the message
says nor change whats written on it without you noticing.

This is what the HTTPS protocol does, just with
a fancier method.

DoS and DDoS

Another way you can see a server is like your homes Inbox. You
receive mail, read them and reply.

What if John starts to write you a ton of mail? You wouldnt be
able to respond to Alexs dinner invitation in time, because you
would be too busy replying to all the other Spam messages sent
by John.

This is called a Denial-of-service attack, DoS
in short.

A way to mitigate this is reading the sender on top of the mail
before opening it. If its John then dont bother opening the mail.
This way you dont need to reply to John and can focus on handling
serious stuff, like Alexs dinner invitation.

This is IP Blacklisting in a nutshell, only
with digital sender internet protocol addresses.

Unfortunately John convinced a lot of other evil people to send
you Spam mails. So now you cant simply discard Johns mails, because
there are lots of people writing you.

This is a Distributed Denial of Service (DDoS)
and its very hard to deal with.

One way to handle this is to receive mail only from Alex. Its
unfortunate that your other friends wont be able to write you,
because you will discard their emails too. But desperate times call
for desperate measures. But gradually, you can increase the number
of legitimate people youd like to receive mail from.