Що таке 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

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

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

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

#tips

Як часто вам доводиться говорити з замовниками? І як часто ви уникаєте цього через страх говорити англійською?

У нас уже давно немає такої проблеми завдяки @speakyclub. (Правда Юра каже, що мене тепер неможливо заткнути).

Speakyclub - це онлайн розмовні клуби для різних рівнів. Ми регулярно туди ходимо, але не розказували про це, бо в них ніколи немає місць.

Щойно з’явилося кілька у групах рівня В2 та А2 - одразу шейримо з вами!

Просто напишіть:
- у телеграм Яні
- або в інстаграм

P.S: Якщо вас цікавить інший рівень, можете все одно кинути їм заявку. Вони майже щотижня створюють нову групу.

Одне заняття коштує всього 180 грн 🔥

Як працює Garbage Collector?

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

Якщо ви працювали з С++, то ви маєте уявлення, яким болем чи заморочкою іноді може стати виділення і очищення памʼяті. Тому сьогодні поговоримо про Garbage Collector - механізм, який в нових мовах дуже активно використовується.

Насправді, саме виділення чи очищення памʼяті - це не проблема, в ОС вже є потрібні функції. Основна проблема в тому - які обʼєкти вже можна видаляти з памʼяті, а які ще потрібно залишити.

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

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

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

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

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

#interview

Swiper

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

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

Звучить гарно, але треба сильно погратись, щоб реалізувати таке. Або ж не вигадувати велосипед, і надати перевагу вже готовим компонентам.

Ділимось з вами бібліотекою Swiper, яку самі використовували кілька разів. Це досить потужна штука, там є готові реалізації для чистого JS і всіх популярних фреймворків чи бібліотек. А також є різні демонстрації з використанням. Тому просто спробуйте!

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

Псс... а ще ми вирішили винести бібліотеки, які ми тут вам впарюємо, в окрему рубрику #library . Тому не губіться! 😉

#library

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

Зберігайте! 💛

Вивчення Flexbox
Вивчення Grid

#tips

Війна ще триває!

Кожен день наближає нас до такої бажаної ПЕРЕМОГИ. А щоб цей день швидше настав, потрібно працювати, донатити і робити все, що від нас можливе. Тому зібрали тут дані основних офіційних фондів, в які точно можна (і потрібно) донатити:

Рахунок для збору коштів на підтримку Збройних Сил України
Реквізити: UA843000010000000047330992708
Стаття: відкрити посилання
В додатку Приват24 / Монобанк розділ “Благодійність” - “Підтримка армії (єдиний рахунок)” / ”Допомога ЗСУ”.

Повернись живим
Реквізити в Приватбанку: UA383052990000026005015017860
Реквізити в Ощадбанку: UA223226690000026007300905964
Сайт: відкрити посилання
В додатку Приват24 / Монобанк розділ “Благодійність” - “Фонд компетентної допомоги “Повернись живим”” / ”Повернись живим”.

Гуманітарна допомога українцям
Реквізити: UA823000010000032302338301027
Стаття: відкрити посилання
В додатку Приват24 / Монобанк розділ “Благодійність” - “Гуманітарна допомога українцям” / ”Гуманітарна допомога (єдиний рахунок)”.

Благодіний фонд Сергія Притули
Реквізити: UA473052990000026005026707459
Сайт: відкрити посилання
В додатку Монобанк розділ “Благодійність” - “Благодійний фонд Сергія Притули”.

А як айтішники ви можете допомагати дудосити русню - IT ARMY of Ukraine

Можете доповнити цей список в коментарях.

Слава Україні! 🇺🇦

Що таке портали в React?

Експериментальний центр нагадує, що ви - торт.

Всі ми знаємо, що React працює з деревовидною структурою компонентів і використовує рендер-функцію, щоб віддати якусь частину цього дерева.

Питання: де в DOM ви очікуєте побачити модальне вікно? Напевно, окремо від кореня основного контенту, але точно не десь глибоко поряд з кнопкою, яка його відкриває (тільки не кажіть це Насті, бо вона саме так і робить).

React-портал - це спосіб рендеру вашої компоненти в DOM-елемент, що знаходиться поза межами батьківської компоненти. Ваша компонента буквально стрибає в портал, який веде її в інший елемент. Створити портал також дуже просто - це лише функція React.createPortal, де перший параметр - це ваша компонента, а другий - це місце, куди помістити вашу компоненту.

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

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

Почитати більше можете в документації чи статті на Medium.

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

#interview