​Изучаем CSS Flex и Grid в фэнтезийном путешествии

Если хотите отточить свои навыки в позиционировании объектов с помощью флексов и гридов, при этом с интересным сеттингом, то вы по адресу. На сайте codingfantasy.com вы можете отправить в путешествие и помочь королю Артуру бороться со злом, используя Flex Box или спасти эльфа из лап демонов с помощью CSS Grid.

Уровней достаточно, чтобы стать настоящим CSS-гуру, проверьте сами:

https://codingfantasy.com/games

#css #игры

​Юлия Миоцен: Топ-10 CSS-свойств аниматора

Юлия уже много лет занимается CSS рисунками и анимациями. Её демки неоднократно попадали в топ codepen и, возможно, вы их даже видели. За время работы у Юли образовался топ самых любимых, интересных и полезных CSS-свойств, без которых не обходится ни одна демка.

В этом видео она рассказывает о каждом свойстве и показывает, какие необычные штуки можно делать с их помощью:

https://youtu.be/fFRADs5R9ME

#видео #css

​9 способов разрядить атмосферу перед созвоном

Вы сталкивались с ситуацией, когда уже подключился к созвону, а до начала ещё несколько минут и их нужно чем-то заполнить в компании таких же пунктуальных коллег? Можно, конечно, поговорить о погоде или попытаться найти общую тему, но вряд ли из этого выйдет что-то хорошее.

В этой статье мы расскажем вам о 9 способах пережить минуты до начала созвона:

https://tproger.ru/articles/top-9-veshhej-pered-mitom/

​Галерея паттернов на чистом CSS

Ловите подборку паттерном, выполненных на чистом CSS. Как раз о них рассказывала Юлия в своём докладе. Да, паттерны — штука специфичная и уместна далеко не везде, но, как минимум, вы можете изучить, как такие паттерны создаются и затем использовать знания для вашей работы.

Смотрим галерею тут:

https://projects.verou.me/css3patterns/

#css

​Дайджест Типичного программиста уже ждёт вас

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

Переходите по ссылке и ищите то, что интересно именно вам:

https://tproger.ru/articles/dajdzhest-tipichnogo-programmista/

#дайджесттп

​Доклад: Зачем учить TypeScript

TypeScript — один из самых популярных и востребованных языков программирования последних лет. Так ли он необходим для программиста или можно легко без него обойтись? Опытные разработчики поделились, зачем всё же стоит изучать TypeScript:

https://www.youtube.com/live/j-R0eP8uaHQ?feature=share

#доклад #typescript #javascript #ru

​Аутентификация с помощью Django и SPA

Используя Django для создания одностраничных приложений у вас может возникнуть резонный вопрос: «Как мне настроить аутентификацию?». Что ж, если есть вопрос, то найдётся и ответ.

В этой статье вы узнаете, как без лишних заморочек настроить аутентификацию, используя возможности Django:

https://www.mikesukmanowsky.com/blog/authentication-with-django-and-spas

#django #python #бэкенд

​React Spectrum — создание компонентов нового поколения

При переиспользовании компонентов или создании новых на основе старых нам необходимо каждый раз заново разбираться в.логике кода Это неудобно. Согласны?

Решением этой проблемы является React Spectrum от компании Adobe. Это библиотека, в которой логика для создания компонентов уже написана за вас. Вам необходимо только импортировать её к себе в проект и добавить кастомных стилей.

В этой статье вы можете посмотреть, как работает эта библиотека, а также познакомиться с аналогами:

https://habr.com/ru/articles/718000/

#react #фронтенд

Полезная библиотека для понимания работы JS

js2flowchart — библиотека визуализации для преобразования любого кода JavaScript в красивую блок-схему SVG. Вы можете изучать чужой код, делать рефакторинг или писать документацию, не путаясь в функциональности. А начинающим — неплохая шпаргалка по foo, while, if:

https://github.com/Bogdan-Lyashenko/js-code-to-svg-flowchart

#js

​Мощь декораторов TypeScript на живых примерах. Декорирование методов класса

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

В этой статье вы можете изучить несколько примеров из реальных проектов, где применение декораторов сильно упростило код и его понимание:

https://habr.com/ru/articles/707496/

#typescript

​Сквозь тернии к core-у, или процесс компиляции Vue

Сегодня Vue пользуется огромной популярностью, успешно конкурируя с React. У него есть и удобные шаблоны, и однофайловые компоненты, и хранилище состояний и многое другое прямо «из коробки».

Но как это всё работает и компилируется? В этой статье вы найдёте ответ:

https://habr.com/ru/companies/nordclan/articles/690522/

#фронтенд #vue

​Копирайтер против ChatGPT: чей текст про Python лучше

С появлением ChatGPT всё большему количеству людей пророчат остаться без работы, ведь их может заменить нейросеть. Коснулось это и копирайтеров. Но так ли всё страшно на самом деле?

Мы решили провести эксперимент и сравнить как справятся копирайтер и ChatGPT с одинаковой задачей. Тут мы оставили оба варианта текста и голосовалку, чтобы вы могли оценить чей вариант лучше:

https://tproger.ru/articles/kopirajter-protiv-chatgpt-chej-tekst-luchwe/

#chatgpt #python

Ничего милее этих панд вы сегодня уже не увидите

Нашли для вас на CodePen проект, который позволит вам окружить себя пандами! Всё, что нужно сделать — нажать на кнопку «panda!» и к вам тут же выкатится милейшаяпиксельная панда, которая будет бегать по экрану. Нажмёте ещё раз — и появится ещё одна, и так пока вам не надоест.

Кстати, сделаны они с помощью SVG. Покликать и изучить код проекта можно тут:

https://codepen.io/Ma5a/pen/bGgxaYy

#codepen

Дайджест Tproger: волшебство CSS-анимаций и GPT внутри гуманоидного робота

Свежий дайджест типичного программиста готов и ждёт вас. Здесь всё самое интересное для веб-разработчиков, питонистов, начинающих и опытных:

https://tproger.ru/articles/dajdzhest-tproger-volwebstvo-css-animacij-chatgpt-vnutri-gumanoidnogo-robota-i-bitkoin-vnutri-macos/

#дайджесттп

​Как верстать на CSS Grid?

В этом видеоуроке рассматривается, как создать красивый сайт с нуля, используя гриды. Также автор показывает лучшие практики работы с CSS и несколько фишек в вёрстке:

https://youtu.be/pIr6ACmdof4

#css #html

​Вред и польза fullstack-фреймворков на примере Meteor.js

Термин «FullStack-фреймворк» появился довольно давно и подразумевает использование одного инструмента как для фронтенда, так и для бэкенда. На первый взгляд это может показаться идеальным решением — один человек может написать всё, не изучая множество различных технологий. Но на деле всё иначе и помимо плюсов тут также есть множество недостатков.

Подробнее тут:

https://habr.com/ru/companies/ncloudtech/articles/690464/

#fullstack #meteorjs

​Четыре полезных встроенных веб-API JavaScript

Все браузеры имеют набор встроенных API, которые расширяют их функциональность, обычно за счёт поддержки сложных операций.

В этой статье вы узнаете о четырёх встроенных веб-API JavaScript, которые вы можете использовать в своих проектах: Notification API, Geolocation API, History API и Barcode Detection API. Подробнее:

https://blog.openreplay.com/four-useful-built-in-javascript-web-apis/

#javascript

Добавление видео на фон с максимальной оптимизацией

Видео в качестве бэкграунда используется не так часто и это понятно — сайт с таким фоном получается куда более «тяжёлым», чем с картинками или просто CSS-оформлением. Да и не всегда видео на фоне работает достаточно плавно.

Если вы всё-таки хотите добавить такую особенность своему сайту, то вам пригодится эта статья. Здесь вы узнаете, как правильно оптимизировать видео, сделать отзывчивым и интерактивным без снижения производительности:

https://blog.logrocket.com/optimizing-video-backgrounds-css-javascript/

#фронтенд

Давайте посмотрим на базовые, но крайне важные особенности JavaScript: https://xn--r1a.website/prog_point/2189

Анимированная таблица Менделеева на JavaScript

Особенностью этой таблицы является то, что каждый элемент анимирован в зависимости от агрегатного состояния вещества: твёрдого, жидкого или газообразного. Посмотрите, как это реализовано с точки зрения кода:

https://codepen.io/dilums/pen/oNzyeEv

#codepen #javascript

Делаем оффлайн-страницу для сайта на случай потери интернета

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

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

Делается это довольно легко. Вот здесь есть пошаговая инструкция для проекта на Vue:

https://medium.com/@ahmadkzx/vue-offline-page-fbae11e7c3b7

#vue #фронтенд