Google Tech Student's Day: як потрапити на роботу до Google?

Ми раді повідомити, що 30 березня 2020 року Google проводить в Києві Google Tech Student’s Day. Цей захід призначений для студентів з інформатики та суміжних областей, які незабаром закінчують освіту та бажають працювати в 2020 році в Google .

Учасникам заходу пропонують насичений день. Заплановані технічні бесіди, спілкування з інженерами Google, семінар з підготовки до інтерв'ю та інше. Це буде чудовою можливістю дізнатися більше про інженерію в Google!

Захід відбудеться у просторі Перемога.

If you are interested in attending, please fill out this form of RSVP below by March 18th. Please note that space is limited. Google will confirm participants the week before the event.

#events

Цікавий проект: MS Paint у браузері за допомогою JS.

Проект ностальгічний на двох рівнях. По-перше, застосунок детально відтворює інтерфейс та можливості MS Paint часів Windows 95/98. По-друге, реалізація спирається на jQuery та не використовує бандлери (перший коміт у репозиторії датовано 2014 роком).

Завантаження даних у React після Suspense

Розробники на React мабуть чули про Suspense та SuspenseList - API для асинхронних операцій, над яким зараз працює Facebook. Suspense знає статус завантажень, які виконують компоненти-нащадки, та розуміє, коли необхідно показати лоадер замість компонентів. SuspenseList надає можливість координувати декілька процесів завантажень. Це як conditional rendering, aле вже у бібліотеці та набагато розумніший. Якщо ви не знайомі з API, дуже радимо ознайомитись, оскільки це сьогодення розробки на React.

Наразі в екосистемі React існує багато підходів до роботи із завантаження даних. У Redux це відбувається у middleware. Розробники, які використовують MobX або свій менеджер стану, мають свої сервіси, які пов‘язані з роботою з серверним API. А якщо необхідно відмінити запит? А що робити із даними, що більше не потрібні - garbage collection? Як зробити пагінацію? Питань дуже багато. Загалом, в усіх усе різне та керування цим зоопарком відбувається також у різний спосіб. І так, ви можете самостійно тримати десь стан процесів завантаження та керувати ними. Проте навіщо, якщо є можливість довірити це готовим інструментам?

Презентація Suspense та пов‘язана з цим активність команди React розпочали черговий етап переосмислення того, як вирішувати такі проблеми. Коли та скільки лоадерів побачить користувач, як завантажити код та дані одночасно - render-as-you-fetch? Як у цілому у зручний спосіб завантажити дані? Зручніше, ніж за допомогою величезної кількістї boilerplate-коду від Redux, Як наслідок цього процесу, відбувається уніфікація підходів, пов’язаних з цими операціями в еко-системі.

Однією з особливостей API Suspense є потреба у бібліотеці, яка візьме на себе завантаження ресурсів та повідомить у необхідному для Suspense форматі про те, що щось відбувається. І дуже гарний приклад такої бібліотеки це React Query , версія 1.0.0 якої вийшла нещодавно. Вона вміє кешувати та перезавантажувати ресурси, має функціональність для garbage collection, вміє відміняти запити, підтримує оптимістичні оновлення та т.і.

Також, якщо цікаво, пропонуємо звернути увагу на бібліотеку, зроблену Олексієм Распоповим - react-warehouse. Вона менше, простіше, проте досить гарно передає концепції нового світу фечінгу даних.

Загалом, нарешті в еко-системі React зрозуміли необхідність уніфікованих абстракцій для роботи з серверними API.

Якщо у вас є вільний вечір, пропонуємо вам зробити пет-проект з використанням Concurrent Mode та React-Query - це не завадить :)

#react

​​Себастьян Маккензі, творець Yarn та Babel та член команди React Native у Facebook, працював над інструментом "все в одному" для розробки на JavaScript та TypeScript.

Проект Rome було оприлюднено 26 лютого 2020 року.

Rome - це повноцінний інструмент для JavaScript, розроблений з нуля. Він компілює та бандлить проекти JavaScript, підсвітлює підказки та перевірки типу, виконує тести, а також може форматувати код.

На даний момент це все ще експерементальний інструмент, що знаходиться в активному розвитку. Автор запрошує всіх не байдужих та зацікавлених долучитися до розробки проекту, роботи вистачає всім)

Вам траплялося переглянути товар онлайн, а потім скрізь бачити його рекламу? Як Фейсбук дізнався про те, що ви шукаєте нові черевики чи придивлялися до рюкзаків?

Одним з можливих пояснень є використання техніки tracking pixel, про яку ви можете дізнатися докладніше зі статті Джулії Еванс.

Хочемо привернути вашу увагу до особистого сайту Ендрю Ванг-Хойера, розробника з Dropbox. На сайті Ендрю розмістив кілька цікавих власних проектів, побудованих за допомогою веб-технологій. Нижче проекти, які ми рекомендуємо переглянути у першу чергу.

Обов'язково зазирніть у розділ з величезною кількістю анімацій, побудованих виключно на SVG + CSS. Той момент, коли: “А що, так можна було?” :)

Також радимо переглянути порівняно простий та атмосферний Tumbler - гарний приклад проекту, у якому поєднана емуляція фізики та WebAudio.

Нам дуже сподобалася часткова реалізація мови Entropy, особливістю якої є те, що усі дані розпадаються, судячи з усього у наслідок ентропії, під час запуску програми - кожне значення дещо змінюється щоразу, коли воно використовується, стаючи менш точним.

Нарешті Chaos Game - генератор фракталів у браузері, який обчислює порядок генерації зображення за методом гри хаоса.

Загалом, це чудовий приклад особистої сторінки, на якій можна зупинитись на деякий час, з купою цікавих прикладів та особливою атмосферою.

Вийшла нова мажорна версія популярного бандлера Rollup - 2.0.0.

З цікавого:
- додано chokidar, що має вирішити проблеми з watch mode

- бандлер оптимальніше генеруватиме чанки. Досягли цього завядку тому, що Rollup перевірятиме наявність сайд-ефектів у модулі та якщо такі відсутні - не буде додавати чанк у бандл. Приклад можна побачати у цьому PR;

TypeScript: створення підтипів за допомогою інших типів.

Як вам ідея існування функції, яка цілком зроблена на типах та існує задля того, щоб створювати інші типи? Мабуть, вам такі вже зустрічалися - Shape, Pick та т.і.
Наводимо невеличкий допис про те, як створювати такі типи.

#TypeScript

Цього разу незвичайний формат контенту: документальний фільм. На ютуб-каналі Honeypot виходять відео про історію технологій. Це розповіді від першої особи: говорять автори, співавтори та популяризатори.

Рекомендуємо почати з випуску про VueJS. Автор фреймворку Еван Ю розповідає про роботу у дослідницькій лабораторії Google, про проблеми, які він намагався вирішити за допомогою власної бібліотеки, про перші роки популярності Vue та про рішення покинути фултайм-роботу та присвятити себе підтримці фреймворку. На нашу думку, цей фільм сподобається тим, хто хоче дізнатися, як працює світ opensource за лаштунками, хто і чому відповідає на питання на StackOverflow, як створити щось значне у світі opensource, як зібрати спільноту навколо своєї ідеї.

Також на каналі є фільми про EmberJS, GraphQL, Elixir.

#video

CSS Speech-1 CR Spec: А ви знали, що за допомогою CSS можливо впливати на те, як screen reader буде читати ваш сайт?

h1, h2, h3, h4, h5, h6 {
  voice-family: paul;
  voice-stress: moderate;
  cue-before: url(../audio/ping.wav);
}

https://twitter.com/argyleink/status/1237042957603102722

Імутабельність у JS: на першу стадію переведено пропозіцию щодо додання Record та Tuple у JS.

Ця пропозиція описує два нових типи даних - Record та Tuple. Обидва гарантують глибоку імутабельність та працюють із точним порівнянням:

#{ a: #{ b: 123 }} === #{ a: #{ b: 123 }} // true

Підтримуються computed keys, spread operator та т.і. Мають гарну сумісність з TypeScript та Flow.

Серед обмежень є таке: обидві колекції можуть містити лише інші типи даних мови. Тобто: створити Record з Record не вийде :)

Загалом виглядає як гарна часткова заміна ImmutableJS та іншим подібним бібліотекам.

#JavaScript #frontend

Мобільний клієнт для GitHub вийшов з бети.

Досить вдало зроблений UI/UX дозволяє:

- робити код-ревью PR, а саме передивлятись код та залишати коментарі
- переглядати статуси перевірки PR, наприклад, від Travis CI
- обрати декілька улюблених репозиторіїв
- отримувати push-повідомлення про важливі події

Нажаль, наразі відсутня можливість створювати PR та відкривати issue за попередньо створеними шаблонами, тільки порожні.

Проте, у будь-якому разі, це дуже гарний інструмент який ми наполегливо рекомендуємо.

https://github.com/mobile

Терміново необхідні волонтери для розробки проекту допомоги лікарням для боротьби з епідемією короновірусу та її наслідками в Україні .

TLDR: є OSS проект HospitalRun (https://github.com/hospitalrun-ua/Hospital-Dashboard) написаний на JavaScript та React який необхідно кастомізувати для потреб лікарів та додати візуальну мапу.

Пишіть, @Tomkamk хто хоче долучитись.

Проблема

Є запити з регіонів, але коли якась організація каже, що готова його закрити, вона не знає чи актуальна ця потреба, або ж була вже закрита.

Візуальна мапа

- Кожна мед установа має можливість позначити потреби, які в неї є - обрати зі списку з 32 речей, які мають бути у лікарні для боротьби з коронавірусом.
- Мапа має в онлайні змінюватись - виконані потреби зникають з мапи

Додаткові потреби
- Мають бути постачальники у вигляді переліку
- Контроль: донор має мати чітке уявлення про лікарню, як довезти та т.і.
- Особистий кабінет ( є реалізований)
- Єдиний портал - людина, що має займатись цим і відслідковувати - додати функціонал для цього

Продовжуючи тему об’єднання навколо боротьби із коронавірусом, пропонуємо подивитись на приклади з допису Open collaboration on COVID-19 у блозі GitHub.

Так, там є посилання на один відкритий датасет який є одним з найбільш цитованих. Дані збираються з китайської системи DXY та звіряються з даними WHO. Журналісти та епідеміологи використовують його як джерело даних стосовно спалахів вірусу.

Є приклад інтерактивної карти - Novel Coronavirus Infection Map з візуалізацією розповсюдження вірусу.

На останнє, є посилання на Low-Cost Open-Source Ventilator - інструкцію зі збирання дешевого респіратора, який може стати у пригоді, якщо запас звичайних респираторів закінчиться. Але будемо вважати, що інструкція не знадобиться :)

Також, якщо вам необхідна допомога GitHub у вашому проекті, ви можете до них звернутись - covid19requests@github.com.

Шукаються розробники, які б хотіли допомогти розвитку Immutable.js

Якщо у вас є час та бажання, це чудова можливість зробити OSS краще - https://twitter.com/leeb/status/1242485118536527873

Дуже крута підбірка курсів на які було дуже важко потрапити. Зараз вони доступні онлайн

Fold.It - Solve Puzzles For Science

Команда StackOverflow випускає цікавий подкаст про технології. Минулого тижня вийшов епізод, з якого ми дізналися про Fold.it - гру, розроблену вченими Вашингтонського Інституту Проектування Білків. Гравцям пропонується розв'язувати головоломки за певними правилами. Рішень може бути бігато, і кожне з них представляє нову структуру білку, що може бути використана у подоланні COVID-19. Гра не вимагає попередніх знань.

Ведучі подкасту пояснюють, чим ця гра відрізняється від ігор, які дозволяють надати розрахункові потужності свого ком'ютера для обрахунку наукових задач та навіщо потрібні рішення від живих людей, коли є штучний інтелект та підхід brute force. Про гру йдеться з відмітки 7:20.

Якщо ви вважаєте, що найважливіше у роботі програміста - написання коду, вам варто прочитати статтю К - Команда у блозі vas3k.

Що далі програміст просувається у кар'єрі, то більш важливими для нього стають так звані soft skills, зокрема навички командної роботи. В статті розглянуті три фактори роботи команди: фаза життєвого циклу продукту, досвід програмістів та особистий підхід до роботи.

Автор пропонує свій погляд на успішні комбінації цих трьох факторів. Наприклад, стартапу на етапі залучення інвестицій стануть в нагоді менш досвідчені, але мотивовані розробники, які можуть праціювати в умовах певної невизначеності. На стадії стабільного розвитку продукту знадобляться більш педантичні працівники, що працюють повільніше, але готови налагоджувати процеси.

Стаття допоможе вам у визначенні власних сильних та слабких сторін, а також у пошуку спільної мови з колегами. Якщо ви самі відповідаєте за побудову команди, то знайдете ще більше корисного.

Починаючи з першого квітня, на LeetCode розпочався 30 дений LeetCode Challenge.

Щодня о півночі на LeetCode буде з’являтись задача, яку необхідно розв'язати за наступні 24 години. Мову розв'язання можна обирати. Автори зазначають, що завдання доступні для новачків.

Щасти! 😉

РНБО України зробило мапу розповсюдження COVID-19 у світі та в Україні.

Мапа оновлюється щоденно. Усі випадки розділено на декілька категорій - “Виявлено”, “Одужало” та т.і. Дані по Україні, судячи з усього, беруться з українських джерел.

Мапа має історію - є можливість подивитись динаміку розповсюдження вірусу у нашій країні по днях, починаючи з січня (спойлер: у січні в Україні не було підтверджених випадків, отжа на мапі буде пусто).

Також, на сайті є декілька діаграм зі статистикою.

Карту зроблено з використанням OpenStreetMap, чим пояснюється гарна швидкість роботи. Також, судячи з усього, використано щось на кшталт https://kepler.gl/demo.

Якщо маєте бажання зробити щось подібне, ось гарне відео https://www.youtube.com/watch?v=BEZjt08Myxs

Статистику можна взяти з посилань, шо були у блозі GitHub, про який ми розповідали нещодавно.

У підсумку - розробниками була пророблена досить гарна робота.

Не хворійте, бережіть себе та ваших близьких 🙂

Ми вже розповідали про те, як команда Edge допомогла Chromium з елементами форми, зробивши їх більш доступнішими. У блозі Chromium вийшов короткий допис стосовно цих змін.

На нього варто звернути увагу, тому що зовнішній вигляд стандартних елементів форми та індикаторів буде змінено. Тобто, цілком можливо, ці зміни стануть помітні на вашому сайті. Також цікаво подивитись, які проблеми були та як вони вирішувались.

Що було зроблено:

- змінено зовнішній вигляд елементів форм - meter, progress, date, color та т.і. У дописі є порівняння дизайнів "до" та "після", з якого можна помітити, що раніше дизайн елементів не мав єдиної дизайн-системи;

- змінено індикатор фокусу - focus ring. Раніше у Chrome він був блакитного кольору, тепер це чорне кільце з білим контуром. Такий індикатор краще видно на контрастних фонах;

- для покращення доступності на сенсорних екранах, було збільшено площу натискання у інпутів;

- покращено доступність інпуту для обрання кольору - він тепер підтримує управління з клавіатури.

Для того, щоб перевірити ці зміни, ви можете скористуватись Edge або бета-версією Chrome. Якщо ви помітите, що зазначені зміни мають негативний вплив на ваш сайт, скористуйтесь цією формою для багів.

Ну і ще раз звернемо увагу на сайт Open UI, який має допомогти централізовано збирати відгуки від розробників.