Дивовижний світ веброзробки – Telegram
Дивовижний світ веброзробки
2.91K subscribers
83 photos
7 videos
1 file
183 links
Дивовижний світ веброзробки — тепер і в твоєму телеграмі. Анонси відео з YouTube-каналу «Сергій Бабіч та Дивовижний світ веброзробки», стріми, авторські статті та цікаві знахідки.

youtube.com/@babichweb

Реклами та інтеграції обговоримо
Download Telegram
#css_in_action
Вітаю, товариство! Сьогодні хочу розповісти вам про нову можливість в CSS, про яку дізнався буквально вчора.

В Chromе та Edge зʼявилася підтримка властивості corner-shape, яка дозволяє змінювати форму кутиків елемента, якщо у нього заданий border-radius.

Наразі ця властивість підтримує настапні значення:

round: звичні нам круглі кутики.

bevel: фаска, прямо зрізані кутики.

scoop: круглі кутики, вирізані всередину.

notch: вирізані всередину прямокутники.

squircle: чорт-зна-шо, якісь скруглені квадрати )

Що цікаво, можна задавати форму для кожного кутика окремо:
corner-shape: round bevel bevel round;

В такий спосіб можна створювати різні цікаві форми, не обмежуючись лише просто кусаними кутиками.

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

📖 CSS Tricks: What Can We Actually Do With corner-shape?

А далі можна побавитися в пісочниці.

📖 MDN: corner-shape

Як я вже зазначив, це поки експериментальна підтримка, однак завжди варто бути готовими до забаганок дизайнерів, еге ж? )
🔥13615👍9
#js_in_action
Ми дуже часто працюємо з масивами даних. Чи то списки, чи то дані для графіків, чи то ще які колекції фантиків Turbo — так чи інакше ми їх перебираємо, перетворюємо, складаємо, фільтруємо.

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

В JS тривалий час це можна було зробити доволі обмеженому, хоча й популярному, колі випадків: map, filter, reduce та slice. Проте лишалися кейси, які, може й не такі поширені, проте, певно, критичніші.

Коли нам потрібно зробити сортування масиву чи вставити елемент на певний індекс, або ж обернути порядок елементів, доступні нам методи якраз мутують вихідний масив. Що, кажу з власного досвіду, часто може призвести до багів, особливо якщо звикнути писати в "імутабельно-функціональному" стилі. Тоді просто забуваєш, що в JS є така підстава.

Проте прийшов час відкинути геть сум та зневіру. Якщо бути точним, то цей час прийшов ще 2023 року, коли в Baseline зʼявилася скромна трійця методів масиву toSorted, toReversed та toSpliced.

Вони роблять рівно те саме, що й їхні старші родичі, однак при цьому повертають саме нову копію масиву з внесеними змінами. А вихідний масив лишається у первозданному вигляді. Але важливо: копіюється сам масив, не його вміст. Об'єкти в такому масиві доступні за тим же посиланням, що й в оригінальному, вважайте.
const source = [3, 2, 7, 4];
console.log(source.toSorted());
// > [2, 3, 4, 7]
console.log(source.toReversed());
// > [4, 7, 2, 3]
console.log(source.toSpliced(3, 0, 5));
// > [3, 2, 7, 5, 4]
console.log(source);
// > [3, 2, 7, 4]


До речі, toSpliced можна (але не значить, що треба) використати, як замінник для іммутабельного push:
const push = (arr, ...args) =>
arr.toSpliced(arr.length, 0, ...args);

console.log(push(['a', 'b', 'c'], 'd', 'e'));
// > ['a', 'b', 'c', 'd', 'e']


Тож тепер знатимете, що замість ручного створення "проксі-масивів", ви можете просто скористатися нативним методом JS, і ваш код стане ще лаконічнішим і надійнішим.

📖 MDN: toSorted
📖 MDN: toReversed
📖 MDN: toSpliced

До речі, ми додали нову порцію квитків на Лампову Співбесіду: Senior Frontend, що відбудеться офлайн у Львові наступної суботи. Я б на вашому місці не зволікав.

@babichdev
41🔥20👍8
Товариство, якби хто ще не встиг взяти участь в розіграші "Питання від партнера" з останньої співбесіди Backend Engineer від Headway Inc, то виключно для вас продовжуємо термін дії форми до завтрашнього ранку.

Даєте правильну відповідь — отримуєте шанс виграти один з подарунків, що на фото. Все максимально просто.

Питання отут: https://forms.gle/K4Dkw4XVrDDk7c8B8

Запис співбесіди: https://youtube.com/live/YrzZAsMPyTw
🔥113
Товариство, сьогодні уже вівторок, і до суботи лишилося усього нічого! Тому нагадаю вам про те, що саме цієї суботи у Львові ви маєте нагоду стати глядачами технічної співбесіди наживо!

Вперше цей формат переміститься з ютубу на справжню сцену, зі справжньою авдиторією. І саме ви можете стати частиною цієї авдиторії!

Це буде співбесіда Senior Frontend розробника. Ви побачите весь процес інтерв'ю збоку, відчуєте атмосферу й точно винесете щось корисне для себе.

Не затягуйте з квитками, а то мало — може їх не стане, може вони здорожчають, хто зна.

Усі виручені на події кошти підуть на потреби ЗСУ

📅 27 вересня, 13:00
📍 “Довгі Бурхливі Оплески”


🎫 Придбати квиток

А партнер заходу — Headway Inc, глобальна IT-компанія з українським корінням, що змінює підхід до навчання впродовж життя. У портфелі Headway Inc п’ять EdTech-продуктів — Headway, Impulse, Nibble, AddMile та Skillsta, якими користуються вже понад 150 мільйонів людей у світі. Компанія також має власну R&D лабораторію.

Headway Inc не раз відзначали у світі: TIME, Global Silicon Valley та Holon IQ включали її до списку найвпливовіших компаній, які формують майбутнє цифрової освіти та розвитку навичок.
Please open Telegram to view this post
VIEW IN TELEGRAM
17🔥15
Товариство, доброго ранку. Як ви вже помітили, цього тижня з дописами про цікавинки негусто. Цьому є очевидні причини — зайнятий по самі вуха.

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

По-друге, зненацька мене запросили виступити на IT Arena цієї пʼятниці, тож посилено готуюсь до доповіді, має вийти дуже цікаво, тим паче тема дуже близька мені зараз — "Rethinking Technical Interviews in the Age of AI". До того ж попросили виступити англійською, що теж буде цікавим досвідом. А ще я вже планую зробити відео за мотивами цієї теми.

До речі, про відео. Попри усі перешкоди (серед яких моя лінь), уже на завтра заплановано вихід відео "5 помилок на співбесідах, які можуть коштувати вам оферу". В чомусь це експериментальний досвід, і це можна вважати першим дзвіночком повернення каналу до джерел — хочу робити більше саме відео. Побачим, як воно піде.

Та й такі справи. А як минає ваш тиждень, є чим поділитись?
🔥449
Так, товариство, ледь не забув вам сказати: завтра ж відбудеться Svitla Smart Talk із вашим улюбленим «таємним експертом» моїх етерів — Павлом Зубенком!

Front End Team Lead, JS Engineer у Svitla Systems, а ще людина, яка знає про фронтенд більше, ніж здоровий глузд дозволяє.

Формат — AMA. Жодних нудних слайдів і планів: ви ставите питання, він відповідає. Хочете про співбесіди, архітектуру, стартапи чи кар’єрний апґрейд — буде. Хочете щось зовсім інше — теж буде.

Запитання можна лишити ще під час реєстрації, щоб одразу почати з найгарячішого.

Приходьте — буде цікаво.

Реєстрація безкоштовна. Але обовʼязкова.

🔗БЕЗКОШТОВНА АЛЕ ОБОВʼЯЗКОВА РЕЄСТРАЦІЯ

@babichdev
🔥126👏1
ПРЕМʼЄРА!
Нарешті випустив це відео про 5 поширених помилок під час співбесіди, які можуть вплинути на рішення інтервʼюєра "не рухатись з вами далі".

Ви знаєте, що робить — вподобайочка, коментар, а вам від мене велика дяка і мотивація робити нові відео.

https://youtu.be/bqCsOMQMoOw
51👍15🔥10
Товариство, сьогодні виступаю на IT Arena, і це, певно, один з найбільш хвилюючих досвідів за всі 8 років технічного спікерства.

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

Все буде люкс, я знаю, не перше моє родео, але кілька добрих слів і скручена дуля в кишені від спільноти не завадять )

До речі, тема виступу — Rethinking Technical Interviews in the Age of AI. Якщо будете чемні — спробую записати відео за мотивами доповіді.
🔥9018👏6
Дивовижний світ веброзробки
Товариство, сьогодні уже вівторок, і до суботи лишилося усього нічого! Тому нагадаю вам про те, що саме цієї суботи у Львові ви маєте нагоду стати глядачами технічної співбесіди наживо! Вперше цей формат переміститься з ютубу на справжню сцену, зі справжньою…
Товариство, а тим часом ми додали кілька квиточків на завтрашню зустріч у Львові. Тому якщо ще сумнівалися чи брати — не сумнівайтесь, беріть.

Буде круто, незвично, цікаво й корисно. Словом, чекатиму на вас завтра!

https://secure.wayforpay.com/payment/lampa_senior_fe
🔥15
Якщо ви запитаєте, як пройшли мої вихідні, я просто покажу ці світлини. Бо ці вихідні вийшли, певно, найнасиченішими за останні років 5.

Спершу я побував на IT Arena. І вперше — в якості спікера головного дня. Колись давно я вже виступав на недільному мітапі, але погодьтесь, до третього дня будь якої конференції доживають лише відчайдухи та тверезі.

А тут — головний день. Вже по факту можу стверджувати — я дав 100% і стільки ж отримав назад. Люди заповнили залу вщент — таке враження, що було рази в два більше глядачів, аніж планувалось.

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

Вже згодом я прикинув, що я не стуляв писок години три від початку доповіді, тож не дивно, що мене просто вимкнуло вдома о девʼятій годині.

…і підняло опів на пʼяту наступного ранку. Та я не жалівся, бо якраз встиг попрацювати над планом для "Співбесіди на сцені" — дуже експериментальної події, ідею якої я носив уже більш як пів року.

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

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

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

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

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

Втомлений та задоволений я поїхав додому, знову на транспорті за кілька мільйонів, ще й перебираючи, в який саме я вмощу свою дупу.

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

Тож, якщо коротко, за ці вихідні справдилися щонайменше три мої мрії. А ще зʼявилося нове натхнення на новий розділ моєї, скажімо так, творчості.

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

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

Ось такі були мої довгі вихідні. А як справи у вас?

@babichdev
65🔥27👍4
Що для вас "тестове завдання"? А то мені тут запропонували приділити вісім (!) годин, а вимоги до завдання як до нормального такого PoC.

Хоча завдання саме прикольне, вимагає активне використання ШІ, тобто й сам процес буде цікавим. Але 8 годин? Це повноцінний стресовий насичений робочий день після якого зазвичай беруть довгі вихідні.

Ще й не оплачуване.

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

А от ви скільки часу готові приділяти тестовим?
48😁9👍1
Записати "говорящу голову" — година.
Почати записувати демки коду і зрозуміти, що вони хєрня собача — дві години.
Сісти фіксити демки і сценарій під них, захопитися і повністю все переробити — три години.

І тепер знову з нуля треба писати демки (

Отакі вони суворі будні ютубної сєлєби.
😁53🔥122👏1
Прикликаю адмінресурс!
У мене шось на сайті прийдешньої конференції React+ fwdays'25 ну прямо замало вподобайочок.

Це, знаєте, геть не додає мотивації зробити класнючу, цікавенну, неймовірно захопливу доповідь про те, коли хуки не потрібні та як писати простіший та зрозуміліший код без зайвих use*.

Тому заходьте, тикайте пальцем або курсором в мою задоволену мармизу і княпайте "ХОЧУ ПОСЛУХАТИ".

Вам несложно, мені пріятно, як то кажуть.

https://fwdays.com/event/react-fwdays-2025
👍2310🔥9😁2
Так, я нарешті записую демки для наступного відео. А чим ще в суботу зайнятися, їй-богу?!
🔥529👍5
#js_in_action
Загальновідомо, що JS може працювати лише в одному потоці, тобто усі дії та обчислення ставляться в чергу. І коли вони виконуються, будь-які інші дії "блокуються", тобто мусять дочекатися, доки завершиться поточний обрахунок.

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

Чи є? Уже тривалий час ми маємо доступ до так званих воркерів — можливості запускати окремі ізольовані контексти виконання, з блекджеком власним потоком та чергою виконання. Це не фіча самого JS, а саме середовища виконання.

Перший драфт, до речі, зʼявився ще 2009 року. І того ж року його підтримку додали в Firefox 3.5 та Chrome 4. З тих пір можливості цього стандарту тільки зростали, як і поширення його запровадження в бравзерах. А з 2019 року стабільна підтримка воркерів зʼявилася і в NodeJS.

Важливо памʼятати — воркер не має доступу до "зовнішнього світу", тобто глобального оточення, з якого його запустили. Це значить — ніякого прямого доступу до DOM, window чи document. Вважайте їх за таку собі "пісочницю".

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

// main.js
const worker = new Worker('worker.js');
worker.postMessage('Зроби шось!');
worker.onmessage = e => {
console.log(e.data);
}

// worker.js
onmessage = e => {
postMessage(
'Зробив шось, забирай'
);
});


Наразі існує декілька видів воркерів, кожен з яких має своє призначення.

Почнемо з Dedicated Worker. Він належить тільки тій сторінці, яка його створила і закінчує своє існування разом з нею. Це якраз класичний приклад додаткового процесу, який обмежений однією вкладкою. Але якщо нам треба воркер, який вміє спілкуватися з кількома вкладками?

Для цього існує SharedWorker. Він поводиться рівно так само, як і звичайний, але при цьому до нього можуть підключатися різні вкладки з нашим застосунком. І "живе" він теж до останнього підключення.

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

Це свого роду наш кишеньковий сервер, який вміє працювати з фоновими завданнями, має доступ до великої кількості API, таких як Cache, Background Sync, Push та багатьох інших. Його основне завдання — виступати посередником між нашим застосунком, локальним кешем та мережею. Саме на ньому базується можливість створення offline-first застосунків.

Якщо підсумувати, то кожен воркер має свою сферу відповідальности: уявіть, що Worker — це комірник одного магазину, SharedWorker обслуговує кілька відділень, а ServiceWorker вже виступає як регіональний менеджер, і займається вже не нагальними справами, а, радше, забезпечує функціонування торговельної мережі навіть у позаробочі години.

Воркери вирішують проблему однопоточности JavaScript, хай і в дещо неочевидний спосіб. Вони дозволяють перебрати з основного потоку усі важкі та ресурсозатратні обрахунки, залишаючи йому лише займатися оновленням UI.

Що почитати:
📖 MDN: Web Workers API
📖 MDN: SharedWorker
📖 MDN: Service Worker

Що почитати душнілам:
📖 WHATWG: Web Workers Standard
📖 W3C / WHATWG: Service Workers

Підписуйтесь: @babichdev
75🔥23👍5
Товариство, сьогодні хочу нарешті відзвітувати за минулі збори. Нагадаю, що ми разом з вами придбали РЕБ для 109 окремого гірсько-штурмового батальйону, а згодом — комплект навчальних гранат для Житомирського військового інституту.
Прикладаю відеоподяку від бійців та світлини з тренувань.

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

Дякую вам!

P.S. Бійці дали дозвіл на публікацію відео з обличчями, якшо шо
🔥366