Цікава стаття про відміну fetch-запитів за допомогою нового інтерфейсу AbortController


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

#JavaScript #frontend

Не все те number, що складається з цифр
Keep Calm And Make A11y

Цікавий кейс стосовно покращення доступності сайтів: розробники Її Величності королеви Великобританії розповіли про зміну типу input для номерів.

Сайт GOV.UK, офіційне джерело інформації про послуги, що надаються громадянам Урядом Її Величності, розробив власну дизайн-систему. Порівняно з іншими сайтами, у дизайн-систем державних сайтів питання доступності, консистентності та передбачуваності поведінки у різних браузерах відіграють особливо велику роль, оскільки держава зобов'язана надавати свої послуги всім громадянам без виключення. Для нас, як розробників, це означає більш суворі вимоги до UX та accessibility.

Розробники GOV.UK зробили допис з описом того як і на що був замінений input type="number", які має вади останній з огляду доступності, кроссбраузерної поведінки та т.і.

#frontend #a11y

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 години. Мову розв'язання можна обирати. Автори зазначають, що завдання доступні для новачків.

Щасти! 😉