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

Чат: @web_overflow_chat
Співпраця: @web_overflow_support
Автори: @lluchkaa & @anastasiia_tarasenko
加入频道
3🔥3👍2👏1
👍107😁3🤔2🔥1
Операційні системи

А є тут хтось такий, кого знайомі ще не просили перевстановити Windows? А Linux? Чи MacOS?

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

Windows

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

Плюси:
- популярність;
- можна пограти в ігри (ніхто не відміняв такий відпочинок).

Мінуси:
- продуктивність (моя думка);
- бувають складнощі при налаштуванні середовища для програмування (туторіали програм суто для програмування зазвичай показують як налаштовувати все на прикладі Linux).

Linux

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

Плюси:
- продуктивність;
- зручна для розробників.

Мінуси:
- буває важко знайти драйвери;
- важче знайти програми загального користування.

MacOS

Найдорожча у цьому списку. Просто вона стоїть тільки на компʼютерах від Apple. З приходом Apple Silicon чіпа система отримала хороший буст в продуктивності, але через те, що тут інша архітектура, не всі програми можна запустити. На щастя, це вирішується «перекладачем» Rosetta, який по суті є мостом між архітектурами. Сама система побудована на базі Unix, що дозволить зменшити болі при переході між системами. Якщо ви хочете робити щось для девайсів від Apple, ви не зможете оминути цю систему. Зараз я сам на ній працюю і справді дуже задоволений.

Плюси:
- продуктивність;
- система не споживає багато ресурсів (по простому, ноути з MacOS довго тримають батарею).

Мінуси:
- ціна;
- бувають проблеми з Apple Silicon.

Це дуже коротка та суб’єктивна думка. Тому можете написати в коментарях, що ви думаєте про кожну з них.

PS: можливо саме ваш аргумент комусь допоможе у виборі своєї ОС 💛

#experience
👍54🤩4🔥1
Яку ОС ви використовуєте?
Anonymous Poll
75%
Windows
15%
Linux
18%
MacOS
1%
Іншу 😳
4🔥3👍2🤯1
🤔43
Hoisting

Швидше за все інтервʼю вам буде проводити людина вже з великим досвідом. І може вийти так, що це буде “олд“ Javascript’а з мільйоном років досвіду. А починав він кодити на ньому ще коли не було класів, const і let, і інших функцій. І так як він ще користувався var, він запитає вас про hoisting.

Тож, що таке hoisting?

Hoist в перекладі з англійської - підйомник. Виходить, що hoisting - це підняття. А у Javascript - це механізм підняття вверх оголошення функцій (оголошених через function) і змінних (оголошених через var).

Набагато краще просто один раз побачити. Якщо напишете такий код:

console.log(x);
var x = 3;

У ньому не буде помилки, адже Javascript буде бачити отаке:

var x;
console.log(x);
x = 3;


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

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

Детальні можете глянути тут - читати статтю

#interview
👍16🔥4🤔21
🤔85
Що виведе консоль?
Anonymous Quiz
15%
undefined
34%
function
17%
object
34%
number
🤯20👍7🔥3😢21
А зараз супер короткий лайфхак - якщо відкрити репозиторій в github і просто натиснути "." (на англ. розкладці), то у вас в браузері відкриється веб-версія VSCode.

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

Тому, хто ще не пробував, раджу це зробити. І на додачу, можете глянути собі Github Codespaces. Це фактично те ж саме, тільки з наворотами. Тут у вас буде майже повноцінний компʼютер і зможете запускати свої проекти просто у браузері. Тільки, здається, там треба PRO аккаунт. Але якщо ви студент, то зареєструйте свою студентську пошту і зможете отримати його безкоштовно 😉

#tips
👍25🔥86🤩4👎1
5🔥5
Duck typing 🦆

Хто ми? - JS розробники.
Що ми хочемо? - Зберігати в одній змінній булеани, стрічки та функції.
~ Мій розумний знайомий

Сьогодні не про типізацію в JS, а про duck typing (качину типізацію, якщо українською) у програмуванні. Коротко, це можна описати так: "Якщо воно виглядає як качка, плаває як качка і крякає як качка - це напевно і є качка".

Реальний кейс: уявіть, що у вас завантажуються дані з якогось джерела (бекенд, файл тощо). Хай це буде Користувач (User) з полями імʼя (firstName) і прізвища (lastName). І вам для достовірності потрібно перевірити чи справді цей обʼєкт є Користувачем. Тому у вас зʼявиться схожа умова:

‘firstName’ in user && ‘lastName’ in user

Помітили щось схоже? Якщо є імʼя і прізвище, то це - Користувач. А насправді там може бути ще багато інших полів. І якщо піти далі, то можна додавати перевірки і на інші поля. Але принцип перевірки не зміниться - на основі властивостей обʼєкта, ми будемо асоціювати його з певним типом. Це і є duck typing.

Трішки детальніше можете ознайомитись тут - читати статтю
А якщо хтось добре знайомий з Typescript, можете також глянути Type Predicates - читати статтю

А які у вас були випадки використання такої типізації?

#article
👍205👏4🤔2
Поки ми застрягли в поїзді, хочемо нагадати, що у нас є чатик.

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

Приєднуйтесь! 💛
🔥134🥰3👏1
5🔥2🤔1🎉1
VS Code Extensions

Як середовище я зараз використовую VS Code. Для підвищення продуктивності і комфорту я часто додаю собі різні розширення. Тому хочу поділитись особисто своїми.

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

Code Spell Checker - хороший програміст - грамотний програміст. З цим розширенням ви одразу помітите помилку у слові, якщо вона є. А якщо раптом слово правильне, а в базі його немає, завжди можна додати його як виняток.

Indent Rainbow - кольорова табуляція. Так, багато хто не любить, коли в редакторі мільйон кольорів (наприклад, Настя), але з цим розширенням буде візуально легше контролювати відступи. До речі, хто користується Bracket Pair Colorizer - тепер цей функціонал вже вбудований в VS Code.

Better Comments - кожна ваша TODO тепер буде підсвічуватись. Там звичайно є і інші правила, тому ви можете різними способами класифікувати свої коментарі.

Project Manager - помічник в роботі з різними проектами. Щоб запустити проект, вам потрібно знайти проект, відкрити папку з ним і тд. А це розширення допоможе автоматизувати цю роботу. Просто вибираєте проект із списку і починаєте над ним працювати.

Це були досить загальні розширення, ніяк не повʼязані з конкретними технологіями. Вони в мене включені завжди. А інші я вже підключаю в залежності від проекту. Тому якщо у вас проект на певній технології, раджу глянути відповідні розширення: Javascript Snippets, ESLint, Prettier, React Snippets, Angular, Svelte, Python.

Також раджу вам переглянути вкладку популярних розширень.

І на завершення поділюсь розширеннями, які я використовую чисто для краси. Це One Dark Pro, для файлових іконок - Material Icon Theme, а для іконок в VS Code - Material Product Icons.

#tips
👍3411🔥5🤩2😁1🤔1
7👏3🤩1
Методи масиву

Про методи масиву доволі часто запитують на різних співбесідах. І це не дивно, адже дуже часто ми працюємо саме з масивами даних. Завджи потрібно щось вставляти, видаляти, змінювати чи обчислювати. І Javascript дає багато методів для роботи з цією структурою даних. Ви не маєте знати їх всі напам'ять, але назвати хоча би декілька потрібно.

Тому зараз ми коротко розглянем основні з них:

.push - вставка в кінець масиву;
.pop - видалення з кінця масиву;
.splice - видалення і вставка всередину масиву;
.slice - отримання підмасиву з масиву. Коли у вас є масив із 100 елементів, а вам потрібні тільки елементи від 20 до 30 - користуйтесь цим методом;
.forEach - проходження циклом по масиву. Всередину передайте функцію, яка буде працювати з кожним елементом;
.indexOf - якщо вам потрібен індекс конкретного елементу з масиву - ця функція саме для вас;
.find, .findIndex - якщо вам потрібно за певними параметрами знайти елемент або його індекс, створіть функцію-предикат (функція, що повертає boolean) та використайте ці методи;
.map - коли вам потрібно з одного масиву створити інший, змінивши елементи;
.filter - допоможе вам профільтрувати масив, а саме створити новий тільки з елементів, які вам "підходять";
.reduce - дослівно зменшує ваш масив. І зменшує він його в одну змінну, тільки вам треба описати як це зробити. Це може бути просто сума елементів, добуток чи створення іншого обʼєкту з вашого масиву.

Детальніше про методи масивів - читати статтю

#interview
👍406🔥5👏1
🤔10🤯5👍31🔥1
🤔19👍102🔥2👎1👏1🤯1
3👍3🔥1🤩1
Reduce в JS

[🍔,🍟,🍕,🍿].reduce(eat)
>>
💩

Обіцяли - виконуємо. Тому, що ж з себе представляє метод reduce і з чим його їсти?

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

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

До речі, у статті можна залишати свої коментарі 😉

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

#article
👍35😁87🔥1😱1🤩1
👍7🤩2🥰1