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

Чат: @web_overflow_chat
Співпраця: @web_overflow_support
Автори: @lluchkaa & @anastasiia_tarasenko
加入频道
SvelteKit 👷

Ми вже неодноразово вам розповідали про Svelte. Чотири попередні роки він був в топ 2 серед улюблених фреймворків і за прогнозом StackOverflow цього року буде топ 1 серед JavaScript фреймоворків.

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

👉 Дивитись відео

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

👉 Відкрити посилання

#library
👍163🔥1
Welcome! 👋️️️️️️
Do you remember how we played in IT-alphabet? Today we gonna do the same but in English.

👉 We start: Web → your letter is B

Have a nice #english_friday 💛
👍84
Привіт 👋

В програмуванні часто можна зустріти різні способи найменування ідентифікаторів. Для прикладу: camelCase, snake_case, PascalCase, kebab-case, SCREAMING_SNAKE_CASE тощо 🤓

👉 Розкажіть, які з них і в яких випадках ви використовуєте?
👍123
T3 Env 🤫

Мало не в кожному проєкті є змінні середовища. І дуже часто в JavaScript застосунках ми зчитуємо їх просто з process.env. Якщо немає більше жодних налаштувань, то все це тримається на чесному слові. Адже ніхто не перевіряє присутність цих змінних, не валідує їх та не перетворює у необхідний формат.

Тому, сьогодні ми хочемо поділитись з вами бібліотекою T3 Env, за допомогою якої ви можете валідувати свої змінні середовища та утворити їх тип. Бібліотека сконструйована для роботи з full-stack фреймворками, тому, за потреби, ви можете налаштувати одночасно client і server змінні.

👉 Відкрити сайт

#library
10👍10🔥21
👍63
👍1651🎉1
#todo поділитися корисним шорткатом, який ви використовуєте 😇
👍53
This media is not supported in your browser
VIEW IN TELEGRAM
#how_to створити гарний та простий todo list

Виконаний повністю без JavaScript!

👉 Відкрити посилання
👍18🔥54
Welcome! 👋️️️️️️
Let's practice our English! So...

👉 What is the last movie you watched and add some short review?

Have a nice #english_friday 💛
👍3🤪32
👍83👀2
👍133😢2🤯1
#todo написати функцію toggle на будь-якій мові програмування, яка на вхід приймає два параметри - масив значень будь-якого типу і одне значення того ж типу, та повертає:
- масив без цього значення, якщо воно було присутнє;
- масив з цим значенням, якщо воно відсутнє у початковому масиві.

Наприклад:
[1,2], 3 -> [1,2,3]
[1,2], 2 -> [1]
👍103
This media is not supported in your browser
VIEW IN TELEGRAM
charm.sh 💅

Ми вже якось розповідали в нашому чаті про charm.sh, а сьогодні хочемо поділитися ним ще й тут!

В charm.sh ви можете знайти різні бібліотеки та застосунки з відкритим кодом. Сподобаються вони тим, хто любить працювати з терміналом.

Якщо ви хочете зробити власний термінальний застосунок, знайдете там багато класних бібліотек, з якими вийде зробити все дуже гарно (правда писати доведеться на Go 🤷‍♀).

Щодо вже готових застосунків, ви знайдете там теж цікаві речі. Наприклад, mods дозволить вам використовувати AI, через pop можете відправляти емейли тощо. І все це в командному рядку! Блогери можуть спробувати vhs, що дозволить вам робити запис своїх команд у GIF.

До речі, гіфка, яку ви бачите, теж зроблена за допомогою цього застосунку!

👉 Відкрити посилання

#library
👍123💅2
Welcome! 👋️️️️️️
Let's practice our English! So...

👉 What development tools do you use daily and would suggest to others?

Have a nice #english_friday 💛
👍72
За скільки часу ви отримали свою першу роботу в ІТ після початку навчання?
Anonymous Poll
21%
Менше 1 року
11%
1 - 2 роки
3%
2 - 3 роки
5%
3+ роки
60%
Ще не отримав 😔
👍62😢1
Tailwind-merge 👉👈

Сьогодні Tailwind чи не найпопулярніший спосіб стилізації веб-застосунків. І якщо ви використовували його з будь-яким компонентним фреймворком, то, швидше за все, відчували наступну проблему.

Уявімо, що у вас є свій компонент Button і за замовчуванням його фоновий колір - блакитний. Але ви ж хороший програміст, ваш компонент може бути перевикористаний з різними опціями. Тож в одному місці ви хочете отримати зелену кнопку, тому передаєте відповідний tailwind-клас.

Тепер у вас є два конфліктні класи і в результаті ви все одно бачите блакитну кнопку.

На щастя, існує бібліотека tailwind-merge, яка з легкістю вирішить вашу проблему. Вона автоматично надасть пріоритет тим класам, які прописані останніми, тож тепер ви зможете отримувати передбачувані стилі.

👉 Відкрити посилання

Також рекомендуємо переглянути коротке відео, у якому розробник показує цю проблему та розробляє утиліту для її вирішення на основі бібліотеки tailwind-merge.

👉 Дивитися відео

#library
👍153🔥3🤪1
Git 🤓

У 99% проектів в IT використовується система контролю версій і в 93.87% (станом на 2022 рік) це саме git. Тож знання цієї системи є не менш важливим, ніж знання мов програмування та технологій, з якими ви будете працювати.

Відразу скажемо, що тут важливо розуміти сам принцип роботи, а не зазубрювати команд git. Насправді, зазвичай ви будете використовувати приблизно 7 основних команд, і набагато рідше всі інші.

Вже вкотре рекомендуємо вам LearnGitBranching. Тут ви зможете дуже швидко і інтерактивно вивчити команди git, а на додачу, ще й візуалізувати дерево комітів.

Також можете звернути увагу на The Odin Project. У їхньому курсі є 3 окремі статті про git, де ви зможете почитати все від особистих налаштувань до перших команд.

А якщо ви ще хочете попрацювати з GitHub, створити свій перший Pull Request, змерджити його тощо, то спробуйте GitHub Minesweeper.

Також, будемо раді, якщо ви поділитесь своїми способами вивчення git у коментарях.

#interview
👍257
👍93
👍124
#todo написати функцію, яка знаходить найдовший спільний префікс серед масиву стрічок. Якщо спільного префікса не існує, функція повертає порожню стрічку.

Наприклад:
["web", "webhook", "website"] -> "web"
["frontend", "backend", "fullstack"] -> ""
11👍2