satansdeer

import React from "react";
import Button from "@material-ui/core/Button";
import Snackbar from "@material-ui/core/Snackbar";
import IconButton from "@material-ui/core/IconButton";
import CloseIcon from "@material-ui/icons/Close";
import worker from './TimerWorker/worker';
import WebWorker from './TimerWorker/workerSetup';

function TimerButton() {
  const workerRef = React.useRef()

satansdeer

const config = {
  typeDirs: [
    { type: "pdf", directory: "documents" },
    { type: "png", directory: "images" },
    { type: "mp3", directory: "music" },
  ],
};

type Config = typeof config;
type TypeDirs = Config["typeDirs"];

satansdeer

interface FullOfFields {
  x: number;
  y: string;
  z: () => void;
}

type FullOfFieldsX = FullOfFields["x"]

interface Example extends Pick<FullOfFields, "x" | "y"> {
  foo: string

satansdeer

Create Columns and Cards. How to Define React Components

Now that we have our styles ready we can begin working on actual components for our cards and columns.

In this section I'm not going to explain how React components work. If you need to pick this knowledge up - refer to React documentation. Make sure you know what are props, what is state and how do lifecycle events work.

Now let's see what is different when you define React components in Typescript.

How to Define Class Components? When you define a class compoenent - you need to provide types for it's props and state. You do it by using special triangle brackets syntax:

satansdeer

interface ICard {
  id: string
  text: string
}

interface IColumn {
  id: string
  text: string
  cards: ICard[]
}

satansdeer

import React from "react";
import ReactDOM from "react-dom";
import "./index.css";
import App from "./App";
import * as serviceWorker from "./serviceWorker";
import { BrowserRouter } from "react-router-dom";
import { createStore, combineReducers } from "redux";
import { Provider } from "react-redux";
import { reducer as form } from "redux-form";
import { profileReducer as profile } from "./profile/reducer";

satansdeer

Javascript 2019 - ES10 New Features

It is 2019, and there is a bunch of new features that got approved by the TC49 consortium and soon will become part of ES10 standard.

My name is Maksim and let's check them out.

One thing before we move to the code examples: watch this video till the end, because I'll show you how to always well informed and up to date about new Javascript features.

satansdeer

# Using Ancient Technologies To Localize Modern Apps

People often stop me on the streets to ask one question. Maksim, what makes you so happy
about localization workflow you have at Mojang?

Today I will tell you how localization is usually being done, or at least how I've seen it being done. 
What kind of solution did we come up in mojang, and why am I more happy about it than previous ones.

As you could aldeady notice this talk is going to be very opinionated and experience based so if at any point
you'll disagree - feel free to discuss it with me after the talk, i'll be more than happy.

satansdeer

What is doctype in HTML documents? And why do you have to specify the doctype?

If you open any webpage, and look at it's source code, you'll always see a little thingy just before the opening html tag. So what is it, and what does it do?

This string is a document type declaration, and it's important to note that it's not an html tag itself, but it's an instruction for the browser on what version of HTML is used on this page.

Good news, modern web developers don't have to know any doctypes other than doctype html, because since the html5 it's the only doctype you should set for your webpages.

Before html5, there were several others that had more complex syntax. You had to specify the link to the actual doctype declaration. For example like in this html4.01 strict. We specify the link to the doctype on w3.org website

satansdeer

type Omit<T, K extends keyof T> = Pick<T, Exclude<keyof T, K>>;

function testGenerics<
  P extends { stays: string; getsRemoved: string },
  R = Omit<P, "getsRemoved">,
>(argumentP: P, argumentR: R) {
  return null;
}

testGenerics({ stays: "foo", getsRemoved: "bar", test: 1 }, {}); // Why doesn't it complain about missign "stays" attribute?