Radio Kottans
848 members
12 photos
3 videos
1 file
310 links
Share the knowledge (c)

Канал корисних посилань та новин зі світу програмування від спільноіти розробників "Котани".
https://kottans.org/

Маєш питання або пропозиції? Пиши адмінам @mx_kalash і @babay_ko
Download Telegram
to view and join the conversation
Візуалізовані регулярні вирази

Для тих, хто вже знайомий з regexp, але ще не почувається достатньо впевнено, рекомендуємо https://ihateregex.io/expr/phone

Як і на інших схожих ресурсах, тут можна протестувати власний регулярний вираз, ознайомитись із виразами для валідації типових даних, таких як, наприклад, email, date, phone number, username, password, ip address тощо.

Перевага цього ресурсу перед багатьма іншими схожими, що ми зустрічали, - у інтуїтивній графічній візуалізації правил.
Авжеж ви знали, що за допомогою типів із TypeScript можна писати працюючи алгоритми. ;)

Математичні операції, пошук шляху у лабіринті, методи масивів та інше, написані виключно за допомогою типів з TS. Жодного іншого коду, лише типи.

https://github.com/ronami/meta-typing

#TypeScript
Цікава стаття про відміну 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