Много лет назад, когда я был на стажировке и получил свое первое задание - я поплыл где-то на 2 строке, которая гласила, что нужно использовать платформу Firebase. Именно тогда я впервые узнал, что это такое.

А сегодня я постараюсь вкратце объяснить, как вы можете его использовать. Представим, что мы хотим написать сайт-приложение, где будем коллекционировать покемонов. Фронденд часть написать мы можем, а с бекендом и не дружим, и не знаем, стоит ли его тут писать.

Для начала хорошо бы сохранять информацию о суперсилах. Вот берем и используем Firebase database (там на самом деле их два типа, но сейчас не об этом). И никакого бекенда, просто база данных с фронта. Если знаете, что такое JSON, тогда уже примерно понимаете, как сохраняются данные в базе.

Данные сохранили, но как же картиночки? Тут поможет Storage, куда можно сохранять файлы, ну и получать их позже так же без всякого бекенда.

А чтобы какой-нибудь школьник не украл у вас вашего покемона - добавим авторизацию. Можно через Google, телефон или email.

Вроде замечательный сайт получился, осталось только открыть для всех. Просто воспользуемся Hosting, и даже Билл Гейтс сможет коллекционировать ваших покемонов.

И тут еще далеко не все, вы сможете использовать систему оповещений, облачные функции (я как-то отправлял емейлы с их помощью) и многое другое. Получается, что для довольно неплохой апки или сайта достаточно только создать клиентскую часть.

А еще я заработал 10$ на Upwork, когда помог другому программисту с Firebase 😉

Регистрируйтесь и создавайте свои приложения по ссылке ниже ⬇️

Открыть Firebase

#article #статья

Всем привет, Юра на связи.

Уже многим известно, что сейчас у меня есть активный проект на Svelte. Лично мое мнение о фреймворке я уже описывал выше, и пока что, оно не изменилось.

Также некие источники говорят, что Svelte один из самых любимых фреймворков для разработчиков за 2021 год. Так что, вроде, как популярность он набирает и возможно совсем скоро самый большой минус (по моему мнению) будет устранен.

Интересно еще то, что создатель Svelte - Rich Harris присоединился к Vercel (компания-создатель Next.js) чтобы “делать web”. Так что есть большие шансы, что скоро увидим еще что-то интересное.

Все же, на данный момент, React остается топ-1 инструментом для создания web-приложений, так что, я думаю, среди нас тут немало тех, кто с ним знаком. И сегодня я хочу чтобы вы использовали свои знания для того чтобы понять Svelte-код. На Medium вышла статья (только первая часть), в которой автор показал главные концепты React и их реализацию в Svelte. Как по мне, то получилось довольно информативно и понятно.

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

Для тех, кто хочет попробовать Svelte - Svelte Tutorial

#article #статья

На днях мне пришел емейл о том что Serverless Framework запустил бету 3 версии. З самим serverless я познакомился больше года назад, и потом надолго забыл о нем. Так вот, что такое этот Serverless и с чем его едят?

Обычный сервер запущен постоянно, ждет ваших запросов, обрабатывает и отвечает. Одна из проблем - вам не всегда нужно много ресурсов на стороне сервера, или наоборот - в час пик хотелось бы побольше мощности.

Serverless’у от вас нужен только код, набор функций, которые запускать на определенные запросы. И не нужно играть с всякими настройками сервера. Такой сервис дают вам все тех-гиганты (Amazon, Google, Microsoft). Пример - Firebase (о котором мы писали раньше) Cloud Functions - представитель serverless.

Еще коротко о том, что это такое можно посмотреть по ссылке ниже ⬇️
Также можете почитать, что такое Serverless Framework

Смотреть видео
Открыть сайт

#article #статья

Всім привіт!

Нещодавно мені прилетіла задача, винюхати щось таке, на чому можна було б почати новий проект. Взагалі вибір був з двох - Next.js та Remix. Якщо хтось їх ще не зустрічав - це фреймворки для написання React додатків. Вони дозволяють рендерити сторінки на сервері, що робить сайт швидшим, та мають ще ряд переваг. Так як з Next.js я вже знайомий, головна ціль була зрозуміти чи буде Remix кращим вибором.

Сам фреймворк створений розробниками react-router. Також він дуже швидко білдиться, так як не використовує бандлерів, по типу, webpack чи rollup. Взагалі його творці повернулись до основ web-додатків. Самі запити відбуваються на стороні сервера, а клієнт робить їх за допомогою старих добрих форм. Якщо слідувати всім принципам фреймворку, то на клієнті можна обійтись і без підтримки Javascript. Але в свою чергу, це змушує вас робити все незручним (на мою думку) способом.

Моя думка сходиться з думкою автора відео нижче - Remix більше підходить для додатків з відображенням даних, наприклад, певної аналітики. Тому зараз моїм вибором став Next.js. В додачу виходу нової версії React, думаю, фреймворки теж отримають значні покращення.

В будь-якому випадку буде цікаво почути і вашу думку!

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

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

#article

React v18.0

Ті хто слідкують за оновленнями знають що не так давно вийшла нова версія React.

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

1. Concurrent mode. Це такий собі механізм який може одночасно готувати кілька рендерів для вашої компоненти.

2. Auto-batching. Колись, якщо ви в функції робили два setState - React робив два рендера, тепер ж він зробить тільки один.

3. Transitions. Тепер ви можете функцією або хуком помічати деякі задачі, які не є критичними. Як приклад це фільтрування користувачем даних. Поле для вводу має завжди швидко змінювати свій стан, а от саме фільтрування може зайняти якийсь час.

4. Ще кілька нових хуків, такі як useId та useDefferedValue.

Особисто я думаю, що оновлення це майже завжди дуже добре. Щодо цього конкретно, то було багато зроблено на покращення продуктивності. Не знаю тільки чи будуть активно використовуватись transition чи useId, useDefferedValue.

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

#article

Навігація

#article - ділимось цікавими статтями
#experience - розповідаємо все з нашого досвіду
#tips - даємо поради, яких не просили
#todo - пушимо робити щось корисне
#interview - розбираємо питання на інтерв'ю будь-якої складності (кожного вівторка)
#quiz - вирішуємо tricky завдання (кожної середи)
#library - рекомендуємо бібліотеки, які неодноразово нас рятували
#news - пишемо про події в сфері ІТ, які не залишать вас байдужими
#english_friday - обговорюємо цікаві теми англійською (кожну п'ятницю)
#how_to - ділимось класно реалізованими кейсами
#localhost - щось на особистому

Infinite scroll

Infinite scroll - це техніка, яка автоматично додає наступну сторінку, коли користувач прокручує вміст. Якщо по простому, то уявіть, що у вас є список покемонів. І коли ви прокручуєте цей список до кінця, то вам підгружаються ще дані. Або хто сидить в TikTok, знає, що можна вічно скролити відосіки - це і є infinity scroll.

Зайшли хорошу статтю, яка показує як можна імплементувати цю техніку різними способами в React - читати статтю

Зберігайте 💛

#article

Всім привіт! Хотіли почати тиждень з чогось нескладного. Нескладне - значить невелике, а невелике - це розмір екрану в смартфорнах (хоча вони чим далі, тим більші).

Коли ви відкриваєте веб-сайт на мобілці, браузер хоче дозволити вам бачити чим-побільше і може приховувати пошуковий рядок. Також буває таке, що ваш сайт має зайняти всю висоту екрану і НЕ СКРОЛИТИСЬ. Тут і зʼявляються проблеми на мобілці.

Тому, щоб було нескладно, нам круті розробники на Medium написали статтю, яка розкаже, що можна з цим зробити. З радістю ділимося статтею і бажаємо вам продуктивного старту тижня! 💛

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

#article

Duck typing 🦆

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

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

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

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

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

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

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

#article

Reduce в JS

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

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

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

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

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

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

#article

Що таке ORM?

Або як працювати з базою даних, не використовуючи прямих запитів до неї.

ORM - це технологія, підхід, який звʼязує типи обʼєктів між різними системами. Найчастіше, це саме про звʼязок між базою даних та мовою програмування. Техніка, що доволяє маніпулювати базою даних, використовуючи обʼєктно-орієнтований підхід. В такому випадку утворюється така собі “віртуальна база даних”.

Без використання ORM пошук жовтого покемона виглядав би десь отак:

data = query(“SELECT pokemon FROM pokemon_table WHERE color = ‘Yellow’”)
while (pokemon = data.next()) {
do_something_with(pokemon)
}

А з використанням ORM все буде трохи простіше:

pokemons = Pokemon.query(color=”yellow”)

Помітили, що немає самого SQL-запиту?

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

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

В кожній мові реалізовані свої бібліотеки, з тих що мені знайомі це:
- JS - TypeORM, Sequalize, Prisma (яка зараз досить сильно набрала популярність);
- Python - Django ORM, SQLAlchemy;
- C# - Entity Framework;
- Go - GORM;
… і багато інших.

Якщо ви працюєте з базою даних - навряд чи вийде оминути цю техніку. А якщо ще не встигли - саме час спробувати.

Більше можете почитати тут - читати коментар

#article

🚀 Нові властивості CSS

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

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

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

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

#article

Смакота!

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

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

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

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

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

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

#article

Scroll to top

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

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

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

#article

Що таке one-liner?

Чим менше коду - тим краще

One-liner - це короткий однострічковий код. Якщо при використанні даного підходу не втрачається простота і читабельність, то думаю, що це класне і лаконічне рішення. На Medium знайшли статтю, в якій ви можете знайти для себе кілька хороших прикладів.

Також додаємо один від себе, який досить часто використовуємо в роботі:

const fullName = (...names: string[]) => names.filter(Boolean).join(' ');

А своїм корисним one-liner діліться з нами в коментарях!

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

#article

12-factor application

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

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

Давайте глянемо на декілька з них:

- оголошення та ізоляція залежностей - всі залежності вашого застосунку мають бути описані (package.json, Pipfile) для того, щоб можна було з легкістю зрозуміти, що потрібно встановити, та мають бути ізольованими (node_modules/, virtualenv).
- конфігурація - налаштування, що можуть змінюватись для різних середовищ, мають перебувати саме в змінних оточення. Щоб було простіше, згадайте .env файли, process.env або os.getenv.
- dev/prod паритет - застосунок проектується для Continuous Deployment, отже потрібно мінімізувати різницю між dev та prod середовищами. Завдяки цьому, ви зможете побачити однакову поведінку при розробці та в релізі, тому зможете релізитись хоч щогодини.

Як не дивно, там є ще 9 правил (бо всього 12), тому переходьте за посиланням і дивіться повний опис.

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

Звісно, буває нелегко дотримуватись багатьох правил. Дану методологію, наприклад, часто критикують через її заточеність під Heroku (саме розробники платформи Heroku описали правила 12-factor додатку).

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

#article

❗️До кінця розіграшу залишилось 11 днів - доєднатись