Вітаю вас, друзі! 🤓

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

👉 Ми маємо потужну команду розробників, які завжди підтримають і допоможуть швидко долучитися до роботи. Ніякого бенчу та «навчальних» проєктів. Постійний зворотний зв’язок та допомога!

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

👀 Приклади наших проєктів (більше можна переглянути на нашому сайті):

▪️Online Service Marketplace for PlanMyKids
▪️Custom SaaS platform for a bakery business

Друзі, треба буде виконати тестове завдання, щоб ми до кінця зрозуміли один одного 🙂

🔗 Посилання на вакансію Junior React Developer тут.
🔗 Посилання на вакансію React Developer тут.

📩 З усіх питань пишіть на пошту - job@codica.com

З чого складається архітектура веб-застосунків 🤔

Архітектура веб-застосунків описує взаємодію між застосунками, базами даних і системами проміжного програмного забезпечення в Інтернеті. Це забезпечує одночасну роботу кількох програм👇

#codica_tech

Як це працює❓

У будь-якій типовій веб-програмі є два різні коди, які працюють пліч-о-пліч:
▪️Код на стороні клієнта - код, який знаходиться в браузері та відповідає на певний вхід користувача.
▪️Код на стороні сервера - код, який знаходиться на сервері та відповідає на запити HTTP.

📌 Веб-розробник, що розробляє веб-застосунок, вирішує, що код на сервері робитиме з кодом у браузері. Для написання серверного коду використовуються C#, Java, JavaScript, Python, PHP, Ruby тощо.

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

⌨️ Для написання клієнтського коду використовується комбінація CSS, HTML і JavaScript. Цей код аналізується веб-браузером. На відміну від коду на стороні сервера, код на стороні клієнта користувач може переглядати та змінювати. Він реагує на введення користувача.

➡️ Код на стороні клієнта спілкується лише через HTTP-запити і не може читати файли безпосередньо з сервера.

Коли ми говоримо про компоненти веб-програми, ми можемо мати на увазі будь-який із наступних двох👇

🔘 Компоненти веб-програми UI/UX – включно журнали активності, інформаційні панелі, сповіщення, налаштування, статистику тощо. Ці компоненти не мають нічого спільного з роботою архітектури веб-програми. Натомість вони є частиною плану компонування інтерфейсу веб-програми.

🔘 Структурні компоненти. Двома основними структурними компонентами веб-програми є клієнтська та серверна сторони.

⚫️ Клієнтський компонент розроблений на CSS, HTML і JS. Оскільки він існує у веб-браузері користувача, немає потреби в налаштуваннях операційної системи чи пристрою. Клієнтський компонент — це представлення функціональності веб-застосунка, з яким взаємодіє кінцевий користувач.

⚫️ Серверний компонент можна створити за допомогою однієї або комбінації кількох мов програмування та фреймворків, включно з Java, .Net, NodeJS, PHP, Python і Ruby on Rails. Серверний компонент складається щонайменше з двох частин: логіка програми та база даних. Перший є основним центром керування веб-застосунком, натомість другий є місцем, де зберігаються всі постійні дані.

Архітектура веб-застосунків, як і Інтернет, постійно розвивається. Базова модель архітектури веб-додатків з’явилася під час панування Web 1.0. Однак саме під час появи Web 2.0 і Web 3.0 вона набула свого нинішнього вигляду 😌

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

Чи є у вас досвід розробки веб-застосунків, яким ви хотіли б поділитися? 🙃

#codica_tech

Тихого та спокійного ранку всім 😌

#codica_js

Що таке Headless CMS❓

Ідея Headless CMS спонукала компанії переглянути свої поточні можливості технологічного стеку, але що це за інструмент і чим він відрізняється від систем, які існували до нього? 🤔

Логіка традиційних CMS поєднує бекенд- та фронтенд-частини однієї системи. Контент у цьому випадку виявляється пов'язаним з конкретними технологіями, архітектурою і шаблонами клієнт-серверної програми 👇

#codica_tech

Headless CMS - принципово інша система управління. Як правило, вона відповідає тільки за універсальний вміст, який можна використовувати на будь-яких платформах. Бекенд («тіло») за такого підходу не пов'язаний з фронтендом («головою») 😌

❗️Логіка Headless CMS така, що до «тіла» за потреби можна приставляти різні «голови». Це дозволяє використовувати один бекенд для керування сайтом (або сайтами) та мобільним застосунком, а також автоматизувати розповсюдження контенту по всіх доступних майданчиках та пристроях.

💁‍♂️ В результаті мінімізуються ресурси, що витрачаються на веб-розробку. А керування різними платформами здійснюється централізовано з одного інтерфейсу, що зручно. При цьому вміст гнучко налаштовується для кожного окремого каналу.

Чи є недоліки у Headless CMS? 🙃

💻 Перехід до логіки Headless CMS передбачає знайомство з її принципами та технологіями, проте розробнику достатньо мати базовий рівень знань мережевих технологій.

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

💻 Headless CMS забезпечує лише бекенд, тому фронтенд-архітектуру необхідно реалізовувати за допомогою додаткових ресурсів. Але існують продукти на кшталт Gatsby, Nuxt, VuePress, Hugo та Gridsome, які забезпечують спрощену інтеграцію з CMS.

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

З подальшим розвитком цифрових продуктів Headless CMS, ймовірно, будуть все більш затребувані, ніж традиційні WordPress або Joomla. Є всі підстави вважати, що майбутнє саме за «безголовими» системами 🧐

#codica_tech

Три поради, як стати ефективним у роботі та не відкладати справи на потім 🧑‍💻

#НапуттяВід_HR Директорки Клименко Наталії

Один із ворогів гарної роботи — прокрастинація, тобто постійне відкладання важливих справ. Підготувала вам пару простих технік, як із нею впоратися👇

1️⃣ Знайти причину
2️⃣ Припинити боротися
3️⃣ Використовувати ігрові методи

Знайти причину 👀

Прокрастинація - це поведінка уникання. Насамперед важливо визначити, що саме викликає бажання відкладати роботу. Це можуть бути різні причини.

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

✅ Порада: варто дати собі відпочити – виспатися, полежати, погуляти, почитати книгу, не замінюючи сон чи спокійний відпочинок на гаджети чи посиденьки з друзями. Після якісного відпочинку бажання працювати, швидше за все, повернеться.

Страх 🫣
Прокрастинація може виникати, коли всередині є страх, що дії в роботі призведуть до змін — добрих чи не дуже.
👉 Наприклад: я відкладаю написання статті, бо боюся, що керівник її не прийме. А якщо опублікувати статтю все ж таки вийде, переживаю, що хтось із читачів може залишитися незадоволеним і напише негативні коментарі.

✅ Порада: щоб усунути страх, потрібно усвідомити і визнати його існування. Потім продумати, що зміниться, коли зробите те, що відкладаєте. І, зрештою, придумати найстрашніші наслідки — і виходи з них.

💁🏻‍♀️ Припустимо: якщо мою статтю не приймуть до публікації в журналі, я опублікую її у своєму блозі. Або якщо хтось напише негативний коментар, я попрошу людину обґрунтувати свою думку — можливо, це навіть буде корисно.

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

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

Почуття провини 😓
Часто у прокрастинації з'являється наслідок – почуття провини. Спочатку людина не робить те, що потрібно, а потім лає та звинувачує себе за невиконані завдання. Потім, коли вона таки приступає до роботи через силу, у неї виникає відчуття спустошення. Це може статися через відсутність мотивації. Коли незрозуміла мета, не буде й задоволення від результату – простіше відкласти справи у довгий ящик.

✅ Порада: слід зрозуміти, навіщо потрібно виконувати ті чи інші завдання. Наприклад: я працюю, щоб отримати зарплату та допомогти батькам; щоб додати класний проєкт у портфоліо та шукати кращу роботу; щоб стати відомим фахівцем; щоб допомогти колегам та відчути себе потрібним.

☝️ Для початку важливо виявити та прибрати причини прокрастинації. Інакше будь-які, навіть найцікавіші практики для її усунення матимуть тимчасовий ефект. А надалі теж почнуть викликати прокрастинацію.

Припинити боротися 😌

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

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

☕️ Приготуйте теплий напій, укутайтесь у плед, обійміть подушку, м'яку іграшку або домашню тваринку (якщо вона не проти) і проговоріть вголос все, що турбує вас у зв'язку з новою справою на роботі. Уявіть, що ви дитина і нарікаєте дорослого. А потім, вже як дорослий, підбадьорте і підтримайте себе. Так ви зможете відчути себе вільніше і діяти далі без прокрастинації.

#НапуттяВід_HR

Використовувати ігрові методи 🕹

Почати роботу буде простіше не через внутрішній опір і боротьбу, а через гру. Підготувала вам ігрові методи, але використовувати їх потрібно вже після того, як ви з'ясували причини прокрастинації та домовились із самим собою ☝️

Метод «З'їсти слона по шматочках» 🔖
До масштабних завдань дуже важко підступитися. Їх треба вирішувати частинами. Наприклад, поставити мету - безперервно працювати 15 або 30 хвилин, незалежно від кінцевого результату. Завдання, поділене на блоки, викликає набагато менше стресу, ніж неосяжна справа. Поступово можна збільшувати кількість хвилин, які ви приділяєте роботі без перерви, але це не обов'язково.

Метод «Як-небудь» 🔖
Підмога для перфекціоністів, які не можуть розпочати справу, бо вимагають від себе ідеального виконання. На першому етапі треба дозволити собі зробити «хоч би щось, хоч якось». Так підвищена напруга зникне і вдасться зробити чернетку або базу для роботи, а потім залишиться тільки навести лоск.

Метод "Почати відразу" 🔖
Іноді важливо просто розпочати. Почата справа нагадуватиме про себе набагато більше, ніж просто запланована. У психології це називається ефектом Зейгарнік.

Метод Одіссея 🔖
У міфі Одіссей прив'язав себе до щогли, щоби не кинутися в море за сиренами. Прив'язувати себе до стільця, щоб не втікати від робочих справ, не варто, але можна видалити з ноутбука всі ігри та соцмережі, які можуть відволікати під час роботи.
📎 Ще один варіант – налаштувати програму контролю. Деякі з них забороняють відкривати сторонні вікна в комп'ютері, доки не закінчиться відведений для роботи час.

Нам важливо навчитися розуміти свою прокрастинацію та сприймати її не як зло, а як простір для маневрів 😌

Бажаю вам здобути свободу вибору та бажання працювати ❤️

#НапуттяВід_HR

Добірка книг для вивчення Ruby та Ruby on Rails 📚

Ви просили - ми зробили 😉

Огляд найкращих і останніх книг про Rails для розробників. Знання в них позачасові та навчать вас правил і схем, застосовних у Rails 🔻

#codica_advice

📕 Ruby on Rails Tutorial (Addison-Wesley Professional Ruby Series)

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

📕 Beginning Rails 6: From Novice to Professional

🔖 Мета цієї книги — дати вам глибоке та повне розуміння того, як створювати динамічні веб-додатки за допомогою Rails. Це означає більше ніж просто навчити вас, як використовувати особливі функції та можливості фреймворку, і більше ніж просто надати вам робочі знання мови Ruby. Rails — це трохи більше ніж просто ще один інструмент: він являє собою певний спосіб мислення.

📕 Agile Web Development with Rails 6

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

📕 Rails: Novice to Ninja: Build Your Own Ruby on Rails Website

🔖 Rails: від новачка до ніндзя — це простий, практичний і цікавий посібник із Ruby on Rails для початківців. У книзі описано все, що вам потрібно для створення та запуску повнофункціональної веб-програми.
☝️ Зверніть увагу, що в цій книзі йдеться про Rails 5. Якщо ви використовуєте новішу версію, ознайомтеся з основними випусками.

📕 Learn Rails 6: Accelerated Web Development with Ruby on Rails

🔖 Ця книга навчає сучасних інженерних практик, включно з git-flow, контейнеризацією, налагодженням, тестуванням та розгортанням. Ви дізнаєтеся, як створити соціальну мережу, а потім розгорнути її у хмарному провайдері.

📕 Modern Front-End Development for Rails: Hotwire, Stimulus, Turbo, and React

🔖 Rails версії 6.1 має інструменти, які допомагають вам взаємодіяти з екосистемою JavaScript. У цій книзі ви дізнаєтесь, як можна покращити роботу стандартної програми Rails за допомогою зовнішніх інструментів екосистеми Rails (Hotwire, Stimulus, Turbo та Webpacker) та інструментів екосистеми JavaScript (webpack, TypeScript, і React), щоб створити чудову програму на основі Rails.

#codica_advice

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

🧑‍💻 Як я забезпечив вдома безперебійне інтернет-з’єднання — поради та план дій.

📲 Або штраф, або в бан: ЄС попередив Маска про наслідки недотримання правил із боку Twitter.

👶 Нова нейромережа Disney може з легкістю змінювати вік актора.

🔻 Як відправляти електронні листи за допомогою Ruby — розглядаємо на прикладах.

📈 Кількість вакансій для українських ІТ-спеціалістів зросла на 15%.

Доброго ранку та гарного тижня 🙂

#codica_ruby

Що таке JAMstack? 🤔

Все більше обертів набирає досить новий і нетрадиційний підхід у створенні сайтів - JAMstack.

💁‍♂️ Для початку давайте розберемося, що таке JAMstack, з чим його їдять і чому він перевершує традиційні web-сайти. Щоб не заглиблюватися в подробиці і не перетворювати цей допис на копіпаст з офіційних джерел, ми опишемо двома словами, що ж таке цей JAMstack.

#codica_tech

📎 JAMstack – не технологія. Можна назвати це методологією або підходом, який пропонує безліч інструментів на вибір для створення статичних сайтів.

✏️ JAMstack це - "J" - JavaScript, "A" - API, "M" - markup (так зазначено на офіційному сайті).
Виходячи з розшифровки абревіатури, ми розуміємо, що для створення статичного сайту, який не поступатиметься динамічному, нам необхідно всього 3 компоненти:

🔹 JavaScript — для надання інтерактивності нашому сайту;
🔹 API — джерело інформації, що використовується сайтом;
🔹 Markup — якийсь контент-генератор або, як його називають, «шаблонізатор», що дозволяє створити розмітку сторінок.

З дедалі більшою потребою у швидкості завантаження та простоті підтримки готового продукту традиційні CMS – досить непростий випадок:

▪️вразливість перед атаками хакерів;
▪️за великого напливу відвідувачів сервер перестає відповідати;
▪️часто низька швидкість сайту;
▪️вимагає постійної підтримки та модерування сервера.

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

Переваги JAMstack👇

✅ Для деплою статичного сайту вам не потрібен традиційний веб-сервер. Статичний сайт можна розмістити будь-де, і він буде працювати від Git Pages до Amazon CDN або на інших сервісах для зберігання файлів.

✅ Безпека. Максимум, що може зробити зловмисник – скопіювати наші HTML-файли.

✅ Швидкість сайту. Тут усе ще простіше — сторінку вже зібрано, вона не будується у рантаймі. Користувачеві при запиті надходить простий HTML-файл, який вже заповнений контентом. Як плюс, приємні фічі Asset Optimization від Netlify дозволяють зробити вагу нашої сторінки мінімальною.

✅ Жодної циклічної підтримки, бекапів та модерації. Все зберігається в Github/Bitbucket/GitLab або у вашому архіві на жорсткому диску. А щодо згенерованого контенту, у випадку з Netlify ваш сайт розміщений на тисячах CDN-серверів по всьому світу.

У чому підступ? 😑

✋ Високий поріг входу - незважаючи на те, що загалом підхід простий, потрібні гарні знання JS. Вони знадобляться, коли вибиратимете потрібний шаблонізатор, налаштовуватимете систему збірки, розбиратиметеся, як працює Headless CMS і як зібрати все докупи.

✋ Не годиться для інтерактивних додатків — просто через особливості підходу.

✋ Швидкість збірки — через значну кількість сторінок на їхню генерацію може піти до 20 хвилин часу, а це погано позначається на загальній швидкості опублікування. У момент генерації також підвищується навантаження на базу даних, що може сповільнити процеси опублікування.

✋ Бажано використання CDN — для досягнення максимальної ефективності доводиться використовувати CDN, але це вимагає часу, поки всі файли замінюються, кеш встигне скинутися.

Як бачите, є переваги і недоліки, тому перед тим як братися за роботу, потрібно все зважити і зрозуміти критичні моменти для вашого проєкту 🙂

#codica_tech

Сьогодні у нас подвійне свято 🪅
Codica вітає всіх з Днем Святого Миколая та з Днем Збройних Сил!

Дякуємо нашим захисникам і захисницям, які просто зараз обороняють Україну 🇺🇦
Разом - ми сила!
Підтримуємо Збройні Сили України та віримо у перемогу! 💙💛

Також бажаємо вам приємних подарунків та солодких сюрпризів, миру і блага в сім’ї, доброго щастя і міцного здоров’я, великої удачі та чудових ідей, відкритої душі і світлої надії 🪄

В чому різніця між Single-Page та Multi-Page Apps 🤔

📱 Веб-застосунки можна створювати різними способами – як односторінкові (SPA) і багатосторінкові (MPA). Якщо ви збираєтеся розробити веб-застосунок для свого бізнесу, ви, ймовірно, поламаєте собі голову над цими варіантами. Щоб допомогти вам впоратися з такою складною задачею, ми підготували статтю, в якій докладно описано SPA та MPA та викладено їх основні плюси та мінуси.

#codica_tech

Що таке односторінковий застосунок (SPA)❓

✍️ Односторінкові застосунки (SPA) використовують інноваційний підхід до дизайну, який використовує здатність JavaScript маніпулювати елементами DOM на сторінці.

👉 Користувачеві не потрібно переходити з однієї сторінки на іншу або перезавантажувати нові сторінки. SPA дозволяє їм продовжувати взаємодіяти зі сторінкою, а нові елементи завантажуються та оновлюються. Отже, використання такої програми є ефективним за часом, оскільки вам не потрібно чекати, поки завантажаться інші сторінки. Натомість весь вміст завантажується за один раз або автоматично завантажується на сторінку під час прокручування.

Як і все в цьому світі, SPA має свої переваги і недоліки. Розглянемо деякі з них👇

✔️ Швидка відповідь
Однією з переваг односторінкових програм є те, що вони швидше завантажуються порівняно з MPA. SPA отримують всілякі довідкові дані, як-от структура сторінки та макет, безпосередньо з сервера. Вони заповнюються даними за запитом користувача.

✔️ Легке налагодження
SPA здебільшого створюються за допомогою таких технологій, як React і Vue.js, які часто використовуються в поєднанні з набором розробників на базі браузера в Chrome. За допомогою цих інструментів налагодження легко виконується з браузера, заощаджуючи багато часу на обслуговування SPA.

✔️ Лінійний потік вмісту
На веб-сайтах, які мають однорідний тип вмісту та не мають кількох сторінок у своєму макеті, прокручування – це, мабуть, єдине, що потрібно робити користувачеві.

✔️ Можливості кешування
В односторінкових застосунках дані збираються разом на сервері. Оскільки всі дані надходять як єдиний пакет, їх також можна кешувати разом. Такий підхід зменшує затримки завантаження та покращує взаємодію користувача з джерелом.

❌ Пошукова оптимізація (SEO)
В основі односторінкових веб-застосунків лежить JavaScript. Отже, пошукові системи, які не виконують JavaScript, не зможуть ефективно читати та ранжувати вміст сторінки. Цей недолік можна подолати шляхом копіювання сторінки у форматі HTML, який сканери можуть обробити. Але цей крок збільшить вартість SPA-застосунку.

❌ Переривання історії браузера
Оскільки існує не більше однієї сторінки, немає й переходу з однієї сторінки на іншу. Якщо користувач намагається повернутися на «попередню» сторінку, натиснувши кнопку «назад», нічого не відбувається. Звичайно, є обхідні шляхи, щоб подолати це, але вони недостатньо ефективні.

❌ Безпека
Односторінкові застосунки дуже вразливі до атак XSS, що означає, що вони не зовсім безпечні. Інколи конфіденційні дані користувача можуть бути розкриті. Користувач бачить лише обмежений вміст у певний момент через обмеження розміру екрана, але програма все ще взаємодіє з пристроєм користувача на набагато глибшому рівні, ніж можна підозрювати, витягуючи файли cookie та іншу особисту інформацію, як і будь-який повноцінний веб-сайт.

Для чого підходить односторінковий веб-застосунок? 🧐

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

#codica_tech