Генератори CSS

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

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

Я зараз накидаю кілька особливо цікавих, свої улюблені можете додати в коментах.

Тут генеруємо кольорові палітри https://coolors.co/
Тут можна зробити комплексні анімації з окремими кроками https://keyframes.app/animate
Тут заготовлені анімації https://animista.net/
Тут можна зробити градієнти https://cssgradient.io/
Тут можна генерити гріди https://cssgrid-generator.netlify.app/
Тут генеримо флекси https://cssflex-generator.netlify.app/
Тут робимо хвильки https://getwaves.io/
Ось тут ціла купа різних генераторів https://www.cssportal.com/css-animated-text-generator/

До речі, раз говоримо про CSS, то варто сказати про Юру Артюха - він колись стрімив і на конференціях якісь трюки по CSS-показував, що в мене давно склалося стійка асоціація як людини-CSS 🙂
Завтра увечорі Юрій буде лайвкодити на ДОУ, щось про 3D, там вже самим CSS складно обійтися (та й не треба).
Має бути цікаво https://dou.ua/calendar/48358/

Знайомо?

Думки?

:)

Приходили тут з відділу кадрів Лінкедіну :)
Звісно, я закинув тему з Cloud Architect щоб дещо постібатися, бо до тих зарплат треба ще дорости, і платити 100 дол./год будуть далеко не відразу, але навіть це не стеля, якщо стаєш класним фахівцем.
А взагалі, часто дивуюся, якими способами за межами законності і морально-етичних норм люди намагаються заробляти, замість того щоб відівчитися і мати високий та чесний дохід.

Я не забобонний, але можливо треба. Сьогодні п'ятниця 13, і дуже недоречно накрився монітор. В принципі, не велика проблема, на гарантії. Але не пригадую щоб колись раніше взагалі було щоб монітор у мене ламався. Проблема в тому, що сьогодні планувався реліз одного проєкту, і ця подія його напряму аффектнула. Колегіально вирішили, що день не ок і все-таки варто почекати до понеділка. :)
У кого як з релізами сьогодні?

Ось вам реальна історія як AI починає забирати професії, не пов’язані з IT

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

І тут сильно виручив AI, ділюся досвідом.

Використав сервіс leap.ai, завантажив в нього півтора десятка фото зі своїм обличчям (фото дуже різні, просто сімейні, з відпочинку, з якихось конференцій - жодної не було в костюмі). Треба квадратні, від чотирьох штук, бажано 1000x1000 пікселів, можна менші, просто навирізав їх), натиснув кнопочку щоб натренувати на них нейронну модельку (це десь 30 хвилин).

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

Надалі моделька в мене вже є - можу генерувати фото за лічені хвилини.

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

Звичайно, що на професії в IT воно теж вплине, але в загальних масштабах я би говорив про подальше розширення галузі. І зараз багато компаній почали "прикручувати" AI до своїх сервісів, чим власне розробники і займаються.
Навіть далеко ходити не треба - у leap.ai є репка на гітхабі, яка імплементує цей процес як сервіс. Стек сучасний: TS, NextJS, supabase, tailwindcss, stripe.
Ось лінка, enjoy :) https://github.com/leap-ai/headshots-starter

А чи знали, що в JS можна використовувати C++?

Привіт! В жовтні проходить хактоберфест, кому цікаво поконтриб'ютити в локальний open-source, приходьте на онлайн-подію прямо зараз https://discord.gg/wVwKGHCT

NextJS 14: Let’s make web dev great again

Позавчора вийшов NextJS 14, на презентації засвітився ось цей код і наробив багато шуму.

Хто не слідкує за NextJS, то на ньому показується реалізація React-компонента з Server Actions - кодом, який виконується на бекенді, для цього є спеціальна директива “use server” на початку функції. Відразу з’явилося багато хейту, почали згадувати PHP, sql-ін’єкції, принципи чистого коду, розподіл обов’язків та всі інші відомі слова з софтверної інженерії.

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

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

Але чи це правильно і в чому причина? Звісно, що неправильно, а причина в тому, що рішення стали складними, всі почали будувати SPA, для них використовують фреймворки і інструменти, які вирішують одні проблеми, але створюють інші. Бо веб - це не просто машина для виконання JS, і для SEO треба щоб був контент, який індексується, що з SPA не є просто. Відповідно почали реалізовувати всілякі трюки з server side rendering, deep linking, hydration і т.п. Крім того, у SPA виникли проблеми зі швидкістю, бо його браузер має завантажити, потім запустити. Почали робити code splitting, lazy loading і тому подібні речі. І це все лише мала частина реальності сучасного веб деву.

То ми просто бачимо, що NextJS взяв курс щоб повернути професію “веб розробника”, і це прекрасно я вважаю.

Джун приходить на роботу і в перший день зносить базу в проді, за що його звільняють. Хто винен? Ваші варіанти :)

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

Вже цього тижня розіграємо Macbook Air, кастомізований гравіюванням з Шарками 🥹

Приєднуйтесь донатами до збору 5 млн грн 4 Mini Shark для ЦСО «А» СБУ («Альфа») і беріть участь у розіграші.

Правила прості:
😎 Задонатити від 500 грн.
😎 Більше донатів — більше шансів!

Донати можна надсилати двома способами:
🚀 на монобанку KOLO;
🚀 на сторінку цільового збору KOLO.

Не відкладайте! Час спливає 😉

Працюй, наче востаннє

Зараз інтернети шумлять звільненням Сема Альтмана з посади CEO OpenAI. Але Сем, якого знає весь світ, не пропаде, можливо це йому піде лише на користь, як колись пішло Стіву Джобсу після вигнання з Apple у 1985.

А я хотів би поговорити про більш “звичайних” людей і їх готовності до такої події.

Є така мотиваційна фраза - живи кожен день, наче останній. То я би її доповнив: працюй теж кожен день, наче останній.

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

А що значить “не бути готовим”? Це коли ти, по-перше, не маєш фінансових ресурсів протриматися достатній час в процесі пошуку нової роботи, а по-друге - не готовий до нової роботи, бо не маєш актуальних знань/навичок, які зараз потрібні на ринку.

Про фінансові ресурси.

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

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

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

Про навички

Тут ще більш важливо - якщо ви не можете забезпечити собі життя без роботи, то треба пам’ятати, що важливо знати/вміти те, що зараз потрібно ринку. І немає значення якими ви знаннями/навичками/технологіями володієте, якщо вони зараз не актуальні.

Я бачив багато “несправжніх” сеньйорів, що отримували звання лише за вислугою років і просто автоматично набутого досвіду в результаті роботи з якимись технологіями. Але якщо говорити про IT, то тут тренди змінюються швидко, і, наприклад, у 2014 році на фронтенді AngularJS “переміг всі фреймворки”, і тих, хто почав користуватися в той час React інакше як фріками не вважали. Але все змінилося буквально за два роки, коли Angular 2 виявився занадто складним і повільним, то більшість нових проєктів почали робити на реакті, і це вже не було чимось дивним. Зараз здається що реакт всіх переміг, але “так буде не завжди”, і років за два все може змінитися, бо зараз з’являється багато нових цікавих фреймворків, які навіть ідейно близькі до реакту, але дозволяють більш елегантно вирішувати задачі, що в ньому робляться трохи дивним чином, бо так склалося історично.

Можливо ви здивуєтеся, але до сих пір є люди, що сидять на проєктах з AngularJS і навіть jQuery, і не знають ніякого реакту, але при цьому числяться сеньйорами і отримують сеньйорні зарплати. Питання в тому, чи зможуть вони знайти роботу, якщо раптово проєкти закриються? Певен, що більшість не зможуть цього зробити достатньо швидко, бо справжній сеньйор, по-перше, мав би вивчати реакт, навіть якщо працює з ангуляром, а по-друге - мав би сам давно перевезти проєкт на сучасні технології, або самому з’їхати з такого проєкту.

Тут можу пригадати як у 2016 я ще працював з AngularJS, але досить швиденько вивчив новий Angular, а разом з ним TypeScript та RxJS, які “зайшли” без особливих проблем і навіть дуже сподобалися, бо ідейно були досить близькі до C#/.NET, на якому я писав раніше. А потім проводив тренінги та воркшопи для розробників, серед яких траплялися ті “несправжні сеньйори” - це люди, які мали 3-5 років досвіду, і нормально знали перший ангуляр, але крім JS зазвичай з жодною іншою мовою не працювали, і вкласти собі в голову TS, Observables та інші речі їм було ну дуже складно, іноді навіть складніше, ніж людям, що вивчали все це з нуля без якогось упередження. До речі, запис воркшопчику по TypeScript у 2016 був першим відео на моєму україномовному ютуб-каналі. Пам’ятаю тоді після нього підходили люди і з подивом запитували навіщо все ускладнювати з тим TS, якщо можна просто писати код без нього і не паритися.

А от коли пам’ятаю вирішив вивчити реакт, то просто на вечір засів за якийсь онлайн-туторіал, почитав доки, зробив демку і здивувався, що “скільки там того реакту”, бо насправді реакт як бібліотека що рендерить елементи DOM відносно невелика сама по собі. І це на мій погляд більше погано, ніж добре, оскільки для повноцінного проєкту потрібно “добирати” залежності з інших бібліотек. І саме тому мені подобається NextJS та інші повноцінні фреймворки, бо там це питання вирішене.

Але тримати актуальними знання і навички - це не лише про модні фреймворки, це і питання розширяти свій кругозір на якісь суміжні технології, а також прокачувати свої навички з алгоритмів, структур даних і тому подібного. Причому важливо не просто “ознайомлюватися теоретично” - лише щось слухати/дивитися/читати, важливо щось робити - проходити онлайн-курсики, здавати сертифікації, прокачувати профіль на кодворсі чи літкоді, робити свої пет проджекти чи намагатися контриб’ютити в чужі. Варіантів багато, тут важливо бути готовим до всього нового, що може трапитися, бо так як є, буде не завжди.

То чистий, чи ні?

В твіттері почалася чергова хвиля кенселлінгу Clean Code.

Таке трапляється періодично, наприклад, в 2020 Ден Абрамов теж на цій темі хайпонув. До речі, в його прикладах особисто мене заділо некоректне використання let. Не знаю, навіщо він то зробив, він людина популярна і хтось може подумати що той код ок, але він не ок, бо там всюди коректніше використати const. Власне для того в сучасному JS два ключових слова для декларації змінних і є: і якщо ви пишете let, то ви не просто говорите “це буде змінна”, ви говорите “це буде змінна, яка буде тимчасово мати певне значення, але далі в коді я обов’язково присвою інше”. Якщо ви не присвоїли інше значення - значить потрібно було використати const, інакше ви просто вводите в оману тих, хто цей код буде читати згодом.

Але повернемося до Clean Code - на мою думку це точно не перша книжка, яку варто читати з програмування, але є однією з перших, яку прочитати варто, після того як ти навчився хоч якось писати код. Звичайно, не слід всьому слідувати бездумно, але загалом для починаючого розробника слід мати якийсь орієнтир “добре/погано”. І лише коли ти вже станеш достатньо досвідченим, тоді зможеш аргументувати чому ти щось робиш по-іншому.

Ну і моя особиста рекомендація - книжка Code Complete від Стіва МакКоннела.

До речі, сьогодні день народження ChatGPT

Хоча маю підписку на Copilot, все одно користуюся ChatGPT кожен день, вже маю навіть певні рутинні задачі, які даю йому регулярно.

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

Раніше він видавав весь файл у якості результату, а зараз лише зміни, а весь інший код пропонував дописати мені самому. І як я не намагався виправити запит - це не допомагало - відмовлявся видавати готовий файл і все. Довелося самому зміни вносити.

Як виявилося - я не один такий, багато скарг з'явилося, що він дещо ледачий став після останнього апдейту.

Чисто для себе вважаю що то не дуже добре зав'язуватися на один сервіс. Поставив собі LM Studio, там можна скачувати LLM-моделі і запускати локально. Вони загалом у якості поступаються ChatGPT, але цілком норм для певних задач.

Є ще хтось, хто ніяк в роботі не користується LLM?
Ну а, якщо користуєтеся, то як?

В інтернеті не так багато якісного контенту з програмування українською мовою то думаю що доречно рекомендувати вам якісні ресурси.

Мені особисто подобається ютуб канал Максима Рудного

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

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

Зараз на каналі:
- Безкоштовні курси по найсучасніших інструментах веброзробки: React, GraphQL, Next.js.
- Найкращі практики написання чистого коду та тестування.
- Поради з оформленням резюме для пошуку роботи у сфері ІТ, базуючись на досвіді проведення співбесід
- Поради початківцям що вчити та на що звернути увагу.
- Тренди та новини у сфері front-end розробки.

Також у Максима є телеграм-канал, там можна поспілкуватися і питання задати https://t.me/maksymrudnyi