Not a long time ago I discovered type-challenges for myself. Today I’ll show not only the implementation of Get, but also some common issues with the implementation, improvements and its usage in production.

Basic implementation

As I said, there’s a repo on GitHub: type-challenges. The current challenge is located in the “hard” category.

Here we work only with objects (as the solution doesn’t require accessing arrays and tuples) and also we always can access object keys as they are defined in test cases.

So what should we start then from?

Getting keys

Imagine we solve the same challenge in JavaScript:


UI for TV series in Chrome

Joyn (previously 7TV) is German “Netflix” which has films, TV series and live TV.

Did you hear anything about code obfuscation? Let’s have a look at Joyn video player and how they use that in production.

Scripts and modules

Let’s open any TV series and see what scripts are in Network panel of DevTools. There are scripts which are loaded from static.t1p-vod-playout-prod.aws.route71.net


I’ve discovered Udemy as a service around 5–6 years ago. Below you can read what I found interesting having a look at the player during several hours.

WebVTT

The Web Video Text Tracks Format, or WebVTT, is a specification to mark up external text track resources and put them to <track> elements.

There is an implementation for Node.js and browsers which is called vtt.js (versions by VideoJS and Mozilla).

It turns out Udemy uses VideoJS version 0.12.4 (28 Apr 2017) as a fallback value. The version for me was 0.12.6 (13 Feb 2018).

VTT-files look like that:


Developing video player in Yandex, I’m not always limited to what we do but also wondering what technologies and techniques are used in other companies. As I like England I investigated the player of BBC, well-known quite a big company. Unfortunately I haven’t used it before, but maybe this is why I’m going to tell you how it’s working.

Watch the content from non-UK

iPlayer is working only in the UK. After going to The Graham Norton Show you’ll see this:


Today I had an hour of my free time to learn how Amazon Prime Video Player is working. I’ll show you my small investigation of what I found.

Where is the main script

Playing and pausing is the core functionality of the player. Therefore it’s easy to get where the main script is situated by doing the following:

  1. Pause the player


What’s a transducer?

Transducer is a function which changes behaviour of a reducer without knowing the structure and without creating intermediate structures


Logo is designed by Phil Murphy

What’s nanoutils?

🌊 Tiniest FP-friendly JavaScript utils library

It was created after Lodash and Ramda but the challenge was to have each method less than 1KB.

The basic ideas of nanoutils:

  1. Functional programming is awesome 🔥
  2. No dependencies ❌
  3. No ES6 features ❌
  4. Efficient ⚡🚀
  5. Light 🎈

Awesome size 📦

Size is important as download time depends on it


Introduction

One Saturday afternoon I started researching top 20 of @WTA players' site structure, its performance and tried to come up with something better (image loading, adaptive layout, etc)

And it turned out most of websites use Wordpress?!

I researched analogues and found more appropriate CMS for myself and it was Netlify CMS. I found netlify-cms-react-starter of Jinksi on GitHub, forked it and started to change it

Usability

As for me, very configurable and easy way to understand as a frontend developer. …


One day some designers provide you with beautiful mock-ups 🌠 and … custom macOS-like scrollbars which look like:

But maybe on the left, smaller or bigger, with different indents dependent on whether it’s mobile 📱, desktop 🖥️ or TV screen 📺 Asking more?

But the reality is… a customisation of scrollbars remains same since the end of 90s. If my dad was programming, he would make fun of me all day while I found the solution to make everything universal and stable. It’s 2020 and it’s still a PITA.

Native support

✅ Webkit and Blink

::-webkit-scrollbar {}
::-webkit-scrollbar-button {}
::-webkit-scrollbar-track {}
::-webkit-scrollbar-track-piece {}
::-webkit-scrollbar-thumb {}
::-webkit-scrollbar-corner {}
::-webkit-resizer {}…


Probably you also forgot to replace your old mail with the new one. Or commited and pushed the code from your working laptop. It’s totally fine, you’re not alone.

Here are the steps to fix your problem.

  1. Get the repo:
git clone --bare https://github.com/repo.git

2. Create a script file:

touch .sh

3. Fill the file with the content:

#!/bin/shgit filter-branch --env-filter '
OLD_EMAIL="your-old-email@example.com"
CORRECT_NAME="Your Correct Github username, i.e. BerAlIv"
CORRECT_EMAIL="your-correct-email@example.com"
if [ "$GIT_COMMITTER_EMAIL" = "$OLD_EMAIL" ]
then
export GIT_COMMITTER_NAME="$CORRECT_NAME"
export GIT_COMMITTER_EMAIL="$CORRECT_EMAIL"
fi
if [ "$GIT_AUTHOR_EMAIL" = "$OLD_EMAIL" ]
then
export GIT_AUTHOR_NAME="$CORRECT_NAME"
export GIT_AUTHOR_EMAIL="$CORRECT_EMAIL"
fi
' --tag-name-filter cat -- --branches --tags

You can also change conditions to:

if…

Alexey Berezin

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store