Recharts

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

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

Тому, якщо вам потрібні графіки на ваш сайт або просто хочете попрактикуватись - можете сміливо використовувати recharts.

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

#library

Опитування

Всім привіт! Сьогодні хочемо з вами більше познайомитись і зрозуміти, які люди у нас тут зібрались. Тому підготували два невеличких опитування. Будемо дуже вдячні, якщо візьмете участь 💛

Що таке polyfill?

Якщо у вас запитають таке на інтервʼю, просто коротко відповідаєте, що це додавання в старі браузери нового функціоналу. І якщо зробите це впевнено, то, швидше за все, питань по цій темі більше не буде.

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

А що б ви зробили, якщо, наприклад, знали, що в деяких користувачів не буде методу filter в масивах? Можна написати свою і використовувати її, правда ж? Це по суті і є поліфіл. Тут тільки уточнимо, що він буде додаватись прямо як метод масиву (через Array.prototype.filter). А ще правильніше, якщо компілятор вашого коду перевірить, чи є в цьому браузері такий метод, і якщо ні, то додасть його.

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

Якщо цікаво одним оком глянути на приклад, гляньте головну сторінку Babel
Також можете почитати більше про поліфіли - читати статтю

#interview

Тренди серед мов програмування

Тут буде чисто субʼєктивна думка про те, що є і буде досить популярне в сфері ІТ. Розповідаю лише про те, що мені хоч трохи знайомо.

Javascript/Typescript - все і вся фронтенду, та один із найсильніших гравців серед інших сфер програмування. Багато хейтерів, багато фанатів, але факти кажуть лише про те, що кількість програмістів, проектів, фреймворків і бібліотек лише росте.

Python - точно не менш трендовий від Javascript. Зараз він просто повсюди, штучний інтелект, системне програмування, бекенд і тд. Простий для вивчення, але потужний у використанні.

Dart - фреймворк Flutter вже нарівні конкурує з React Native. Я вже говорив, що це супер рішення для стартапів, коли одним махом закриваєте купу девайсів. Тому мобілка і є основною ціллю в цій мові.

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

Java - все ще працює на 3 мільярдах девайсів і дозволяє створювати моди на Майнкрафт (це я так жартую). А взагалі, є досить велика потреба в розробниках, які володіють цією мовою, в основному, здається, це бекенд або десктоп.

C# - це про велику екосистему від Microsoft, в якій, здається, все круто структуровано. Підходить для різних рішень, особисто бачив в бекенді, а також разом з C++ вони зайняли левову частку серед геймдеву.

Go/Rust - досить нові гравці, які взяли все хороше та постарались виправити все погане в попередниках. Обидві досить продуктивні, багато людей переходять на них. Rust навіть був визнаний мовою, яка найбільше подобається розробникам на Stack Overflow.

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

А якщо вам цікаво подивитись різні графіки, яка мова де рулить і хто що використовує, можете глянути статтю на DOU чи Stack Overflow.

Читати статтю DOU
Читати статтю Stack Overflow

#experience

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

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

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