Web Overflow 🇺🇦
4.42K subscribers
380 photos
40 videos
3 files
518 links
Затишний блог про веб-розробку і не тільки 💛

Чат: @web_overflow_chat
Співпраця: @web_overflow_support
Автори: @lluchkaa & @anastasiia_tarasenko
加入频道
Що виведе консоль?
Anonymous Quiz
16%
1 2
38%
[1, 2] 2
27%
1 2 2
19%
Error
👍364🤔4🤯2👎1👏1
🚀 Нові властивості CSS

Не так давно вийшло оновлення css, яке має нові фічі - container і :has(). Обидва вже підтримуються в Chrome 105 і в Safari 16 (якщо вірити CanIUse).

Container запити дозволяють стилізувати елементи в залежності від розміру батьківського елемента (те саме, що і media query, але в залежності від розміру батьківського елемента, а не екрану).

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

Читати більше

#article
👍53🔥92🤩2👏1😱1💯1
12👍1👏1
Важкий день тижня покращимо крутою бібліотекою, яка значно полегшить вам життя.

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

Читати документацію

#library
29👍10🔥3👏1🤯1
10👍1👏1🤔1
Різниця між Type та Interface в TypeScript?

Type - це спосіб створення власного імені для вами ж описаного типу (рекурсія якась 🔃). Це може бути комбінація примітивних типів або ж тип обʼєкту з певними властивостями. Є дві основні операції над типами:
- intersection (перетин) - оператор &, коли типи зливаються в один;
- union (обʼєднання) - оператор |, коли змінна може набувати будь-якого одного з заданих типів.

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

Виходить, що обидва способи досить схожі та мають майже однакові можливості. Так і є, в 95% використання ви можете обрати будь-який з підходів.

Що в них відмінного? Спробуйте створити два інтерфейси з однаковим іменем і подивіться на результат. Код буде без жодної помилки, а в кінці ви отримаєте просто обʼєднання двох оголошень. Тип можна оголошувати тільки один раз.

Особисто я зараз частіше віддаю перевагу саме Type. Поясню чому. По-перше, Type все ж таки має трішки більше можливостей (наприклад, присвоєння примітивів). По-друге, значення інтерфейсу в програмуванні це швидше про методи, а в TypeScript Interface може зберігати і властивості.

Коротко ознайомитись з типами та інтерфейсами в Typescript можна у самому довіднику.

Читати документацію

#interview
👍194🔥2👏1🤔1
9🤔8👍3🤯2😱1🤩1
Що виведе консоль?
Anonymous Quiz
10%
param
18%
undefined
62%
Hello World!
9%
No output
👍20🔥6🤔32🤯2👏1😁1
Друзі, нагадуємо, що в нас є чатик, де можна обговорювати різні питання та новинки в сфері ІТ 💛
14🔥2🥰1👏1
Давайте поговоримо відверто

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

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

Погнали…

Плюси

Гроші. Ви дійсно будете заробляти багато. Багато працюєш = багато заробляєш. Просте правило, яке працює в усіх сферах.

Запасний аеродром. Якщо настає такий момент, коли ви вже не хочете/не можете працювати на одну з компаній і це прям вже горить (як було у нас з Юрою), ви можете з легкістю її покинути, тому що у вас є постійний заробіток незалежно від даної компанії. Зручно? Так.

Мінуси

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

Відкладене життя. Ваша робота буде займати весь ваш день. Кожен день перед екраном. Постійно. У вас залишатиметься дуже мало часу на хобі та відпочинок, а то і зовсім не залишатиметься. І тоді ви доходите до того, що краще вже купити ту саму квартиру пізніше на рік, але провести цей рік в балансі з роботою та відпочинком. Я не думаю, що ви в сорок років будете згадувати як круто сиділи за компом цілими днями. Ви будете згадувати як відпочили в горах, спробували щось нове, або банально сходили з друзями на пиво.

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

А ви для себе вирішуйте самі 💛

#experience
69👍27🔥3🥰2🤔2🤯1😢1
👍43🔥1👏1🤔1
Смакота!

Code Smells - виберіть найкращий переклад - код з запашком; код, що погано пахне; смердючий код.

Чому запах? Тому що на вигляд код виглядає нормально, але має ознаки, які вказують, що десь глибоко є певні проблеми. Вони і створюють цей запах. Code Smells може мати різні ознаки, але зазвичай схожий результат - складність ефективно розвивати систему, використовування можливостей ООП (або інших підходів) та складний для розуміння код.

Наявність таких запахів означає необхідність у рефакторингу (але про нього вже наступного разу).

Більше про Code Smells та їх приклади можна почитати у статті нижче.

Читати статтю

Хоча б гляньте підзаголовок у цій статті, він того вартий :)

#article
👍20🔥63😁2👏1🤔1🤩1
8👍1🥰1👏1
Що таке currying?

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

А ще сьогодні надзвичайно важливе свято для всіх українців. Ми щиро вітаємо вас з Днем Державного Прапора! Ми довели усьому світу, що саме синьо-жовтий прапор є символом вільної країни, яка захищає своє майбутнє! Слава Україні! 🇺🇦

#interview
👍3112🎉3🥰2👏1🤩1
Україна - символ свободи та незламності. З Днем Незалежності! 🇺🇦
43🎉9🥰8👍1👏1🤩1🙏1
😁67🔥26👍6🤩3🥰1👏1🎉1
😁55🔥15👍6🤩4🥰2👏21🎉1
🚀 У нас для вас є крутий сайт, який вам точно стане у пригоді - Roadmaps

Тут зібрані роадмапи на всі випадки життя - Frontend, Backend, DevOps, React, Angular і ще багато іншого! Якщо ви тільки новачок в ІТ або просто вирішили змінити напрямок - тут вже є готовий шлях до вашої мети, від самих простих тем до поглиблених.

Зберігайте і успіхів у ваших починаннях!
👍6412🔥4🎉2👏1🤩1
👍64🥰1👏1
Scroll to top

Сьогодні в чат прилетіло круте питання: як після рендеру контенту (після так би мовити "переходу" з одної сторінки на іншу) перенести користувача на початок сторінки? Адже якщо залишити все як є, користувач опиняється на тому ж місці, на якому була відкрита попередня сторінка. Наприклад, у вас є футер з лінками. І після того як ви натиснули на будь-який лінк, у вас відкривається нова сторінка з фокусом внизу, де і був футер (якщо це звичайно посилання на сторінку вашого сайту). Проект на React і використовується React Router.

Це досить поширена проблема, тому ділимось досить хорошим рішенням - читати статтю. АЛЕ це рішення підходить лише для тих, хто використовує React Router п’ятої версії. А для тих хто любить тестувати щось нове - ось бета рішення для шостої версії React Router - читати статтю.

Бажаємо вам продуктивного тижня! 💛

#article
👍305🔥4🥰3👏1🤩1