Всё по фронтенду, бэкенду и девопсу в одном месте Разместить рекламу: @tproger_sales_bot Правила общения: https://tprg.ru/rules Другие каналы: @tproger_channels Сайт: https://tprg.ru/site Регистрация в перечне РКН: https://tprg.ru/64ai
Impatiently Waiting — элемент загрузки на HTML и SCSS
Больше лоадеров богу лоадеров! На этот раз предлагаем вам познакомиться с забавным вариантом, который нарисован с помощью SVG и анимирован с помощью SCSS.
С кодом проекта можно ознакомиться по ссылке: https://codepen.io/jkantner/pen/VwooLxv
#codepen #svg #scss #лоадер
9 команд GIT, о которых нужно знать
Большинство из нас придерживаются основ: git add
, git commit
, git push
, и, честно говоря, это работает пока…
В какой-то момент вы столкнетесь с препятствием — запутанной историей, сломанной веткой или ошибкой, которую вы просто не можете отследить.
Вот тогда эти 9 команд станут настоящим спасением.
#git #шпаргалка
HTML и CSS ошибки, влияющие на доступность. Опыт незрячего
Многие разработчики думают, что доступность реализуется только с помощью aria-атрибутов. Конечно, они нужны, но HTML и CSS такая же важная часть. Эти технологии несут в себе кучу скрытых моментов, влияющих на доступность.
В этой статье будут разбираться конкретные ошибки, которые связаны с интерактивными элементами, доступностью текста, анимации и изображений. Подробнее:
https://habr.com/ru/companies/ruvds/articles/757490/
#фронтенд
Онлайн-песочница для обучения и тестирования SQL
SQL Playground — это бесплатный сервис, который позволяет вам изучать SQL и тестировать различные запросы как в MySQL, так и в PostgreSQL. Работает песочница прямо в браузере, при этом поддерживает подсветку синтаксиса и обладает автоматических генератором схем БД.
Пробуем по ссылке: sqlplayground.app
#инструменты #sql #бд
Как Pegasus следит за нами: новогодний выпуск
Достаём остатки оливьешки и готовимся к просмотру: в праздничном выпуске Лера и Булат обсудили, как шпионское ПО Pegasus стало инструментом слежки за активистами, журналистами и политиками.
Вы узнаете об уязвимостях смартфонов, которые используют хакеры, о странах, активно применяющих Pegasus, и о том, почему это касается каждого из нас.
А если вы уже успели глянуть этот выпуск и завершить марафон по Гарри Поттеру до финальных титров, то вдогонку держите плейлисты всех выпусков Айти Крайм за 2024 год: Яндекс.Музыка | Apple Music | Spotify | Telegram | YouTube
#позалипать #подкаст
Оптимизация сайта от А до Я
Сразу после того, как веб-разработчик учится создавать красивые сайты, ему приходится разбираться с получившейся производительностью. А она влияет не только на то, как быстро сайт загрузится, но и на общее впечатление пользователей и ранжирование при поиске.
Сегодня предлагаю вам подробнее познакомиться с сервисом PageSpeed Insights от Google. Он позволяет провести анализ сайта и дает определенные рекомендации по его оптимизации.
Подробнее в видео.
#видео
SSL-сертификаты: что это такое, какие они бывают и зачем их получать
Когда пользователь заходит на сайт, он в первую очередь хочет убедиться, что он надёжный — не обманет и не украдёт данные. А также не даст сделать это другим. Чтобы подтвердить свою благонадёжность, разработчики получают специальные документы — SSL-сертификаты.
В этой статье вы узнаете, что это такое, как они работают, кто их выдаёт и многое другое. Эти знания пригодятся не только веб-разработчикам, но и всем, кто хочет безопасно пользоваться интернетом.
#ssl #веб #безопасность
Универсальный стартовый шаблон для ваших пет-проектов с JS, SASS и Vite
Хотите начать пет-проект и не знаете какой стэк для этого выбрать? В этом видео вы научитесь создавать универсальный шаблон для проекта на JS, который подойдёт для реализации самых разных идей.
Вы также узнаете, как развернуть проект и заставить всё работать вместе, а также какую структуру папок использовать.
#видео #javascript #петпроект
Парольная защита статичной HTML-страницы на JS
Обычно парольная защита производится через веб-сервер, который проверяет пароль и выдаёт контент. Стандартный способ: .htaccess
и htpasswd
. Но что, если нужно выложить зашифрованную веб-страницу и файлы на публичном хостинге, где у нас нет контроля над сервером?
Для этих целей также есть специальные инструменты. В этой статье речь пойдёт о StatiCrypt и Portable Secret. Вы узнаете, как они работают.
#javascript #безопасность
Создаём 3 проекта на React за 8 часов
В этом видеоуроке показывается, как реализовать — клон YouTube, профессиональное приложение для фитнес-упражнений и Lyriks — улучшенную версию Spotify. Вы научитесь создавать современные пользовательские интерфейсы с помощью Tailwind CSS, управлять состоянием с помощью React Context API, а также получать данные используя RapidAPI.
В конце курса у вас будет 3 профессиональных портфолио.
#react #видео
Пора завершать испытания новичка в межгалактической команде Мир Plat.Form
И начинать новый этап в его жизни – работать над сложными проектами по обеспечению бесперебойной передачи данных в самых разных потоках. Этим и займется наш герой Эндрю, а делиться этим будет в базе знаний. Не пропустите новое, подписывайтесь.
Почему GitFlic — это надёжнее и удобнее чем GitHub и GitLab
В последние пару лет для российских разработчиков на первый план вышли вопросы безопасности и доступности инструментов. Зависимость от международных сервисов стала головной болью: блокировки GitHub или ограничение возможностей GitLab показали, что контроль и доступ к своим проектам — это то, что нужно оценивать в первую очередь при работе с платформой.
Что делать? Опираться на собственные решения. Именно такой подход реализован в платформе GitFlic. Это независимая российская платформа, созданная с нуля, способная удовлетворить потребности как индивидуальных разработчиков, так и крупных организаций, не являясь форком популярного ПО. Вопрос о полной замене GitHub и GitLab остаётся открытым, и в статье мы рассмотрим основные возможности GitFlic.
#github #gitflic
Как проверить стабильность узлов?
Таким вопросом задается в новой серии новичок Эндрю, проходящий испытания в межгалактической команде Мир Plat.Form. Уже получив опыт в оптимизации узлов и создании резервных узлов, пришло время третьего задания. Поможете герою с выбором действий?
Если вашем виш-листе на 2025 год есть пункт «Прокачаться в карьере», то…
скорее проходите в зрительный зал, присаживайтесь и узнавайте всё самое важное с конференции Avito All Day Long! Изучите доклады, сделайте буст знаний по хардам и софтам, и профессиональный взлёт не заставит ждать: https://tprg.ru/PYT4
Реклама
elfsight — более 90 виджетов для вебсайтов без необходимости кодить
Если вам нужно добавить какой-то полезный виджет, но писать его с нуля или настраивать нет времени и желания, то попробуйте найти нужный на этом сайте. Здесь собраны виджеты, которые встраиваются даже без знания кода и позволяют добавить карты, чаты, формы, встраиваемый контент из соцсетей и многое другое.
#инструменты #фронтенд
Хотите оффер? Ловите 7 портфолио фронтендеров, которые вдохновляют
Без хорошего портфолио трудно выделиться среди кандидатов, которые сотнями присылают отклики на действительно крутые вакансии. Показываем 7 классных портфолио, которые вдохновят вас и подскажут, как выделиться вам.
Почему PHP никто не любит? Пишите свои варианты в комменты
Читать полностью…REST API Generator — полезный инструмент для генерации тестовых REST API
Представьте, что бэкенд ещё не готов, а фронтендер бьёт копытом и хочет продолжать работу, невзирая на отсутствие API. Для этого и нужен этот инструмент. Он позволяет без развёртывания создавать:
— методы GET, POST, PUT и DELETE;
— случайные данные для ответов;
— поддерживает HTTPS и CORS.
Пользуйтесь, пока бесплатно. Ссылка: https://retool.com/api-generator
#инструменты
Уже составили планы на 2025?
Предлагаем новогодний интерактив! В комментах к этому посту пишите начало фразы «В Новом году я обещаю», а продолжайте её с помощью Т9 (например, с помощью варианта посередине).
Посмотрим, у кого получится самый неожиданный и оригинальный вариант.
Каждый день мы пользуемся различными сервисами и приложениями. Но знаете ли вы, кто за ними стоит?
90% IT-продуктов — от сервисов доставки еды до стриминговых платформ — созданы с участием продакт-менеджеров. Именно они решают, какие функции нужны в приложении и как сделать так, чтобы им пользовались миллионы людей.
А теперь представьте, что уже через 10 месяцев вы тоже сможете стать продактом. На обновленном курсе «Профессия Продакт-менеджер» от ProductStar можно с нуля освоить эту востребованную специальность и начать карьеру в IT без навыков программирования.
Вы научитесь:
— создавать цифровые продукты и управлять процессами — от идеи до запуска;
— работать с командой и контролировать выполнение задач;
— использовать современные методологии и подходы к созданию продуктов: Agile, Scrum и не только.
Получите как теоретические знания, так и практический опыт работы. Вас ждут:
— воркшопы и бизнес-кейсы от IT-компаний;
— стажировка у партнеров ProductStar;
— индивидуальная поддержка менторов;
— помощь с подготовкой резюме и поиском работы.
Поток стартует 20 января 2025 года. Успейте забрать курс с новогодней скидкой до 70% и получите подарки для саморазвития за покупку. Акция продлится до 8 января включительно.
Реклама. Рекламодатель: ООО "ТРИВИУМ" ИНН: 7806297293
#простымисловами: Разница между null, undefined и NaN в JavaScript
В JavaScript часто путаются три специальных значения: null
, undefined
и NaN
. Они встречаются в самых разных ситуациях, и их понимание поможет избежать множества досадных ошибок в коде. Давайте разберёмся, что означает каждое из них, на примерах.
1. undefinedundefined
используется, чтобы обозначить переменную или свойство, значение которых ещё не было установлено.
Самый яркий пример: если вы создаёте переменную, но ничего не присваиваете ей, то её значение будет undefined
.
let a; // Переменная создана, но ей ничего не присвоено
console.log(a); // Выведет: undefined
const obj = {};
console.log(obj.key); // undefined, потому что свойства key просто нет
undefined
возвращается, когда функция ничего не возвращает явно:function sayHello() {
console.log("Hello!");
}
console.log(sayHello()); // undefined, так как ничего не возвращается
null
используют, когда нужно явно указать, что значения у чего-то быть не должно. Это не ошибка, а осознанное решение разработчика.null
:let result = null; // Явно указали, что значения здесь пока нет
undefined
, null
устанавливается вручную. Это, по сути, способ сказать «очищено» или «пусто».let user = { name: "Anna" };
user = null; // Теперь внутри переменной user ничего нет
NaN
появляется, когда вы пытаетесь выполнить математическую операцию, которая не имеет числового результата.NaN
.let value = "hello" / 2; // Попытка деления строки "hello" на число
console.log(value); // NaN
NaN
— это числовой тип (да, иронично), но означает что-то, что не число.NaN
:console.log(parseInt("abc")); // NaN, не удалось преобразовать строку в число
console.log(Math.sqrt(-1)); // NaN, корень отрицательного числа не определён
typeof null
возвращает "object"
, что является исторической ошибкой JavaScript. Не путайте это с объектами: null
— это отдельное значение, которое просто так "зависло" в объектной категории.isNaN
— интересный метод для проверки, является ли значение "не числом", но сам метод не идеален:isNaN("hello"); // true, это NaNЧитать полностью…
isNaN("123"); // false, это число
devv.ai | Claude Haiku, Gemini 1.5 Pro без VPN и оплаты
Сервис агрегировал лучшие кодерские нейронки вроде ChatGPT 4o-mini, Claude Haiku и Gemini 1.5 Flash Pro и предлагает переключаться между ними с целью добиться решения своей задачи. Пока проект в стадии «пробуем на публике», денег не берут, так что пользуйтесь, пока дают!
Попробовать
Как переписать библиотеку с JS на Rust
Такая потребность может возникнуть у любого проекта, чья сложность со временем разрастается до серьёзных масштабов. Например, JS может уже не справляться с задачами в адекватные сроки и его нужно как-то ускорить. Rust считается одним из самых производительных языков, поэтому логично переписать сложную логику, требующую скорости на нём.
Автор этой статьи так и сделал, сократив время на вычисления почти в три раза. Он поделился тем, как подружил Rust с Node,js и с какими сложностями столкнулся.
#rust #nodejs #бэкенд
RTSP.ME сделают ваш сайт более интерактивным!
Добиться такого эффекта можно с помощью онлайн-трансляций с камер наблюдения. Их легко интегрировать с RTSP.ME!
Что вы получите?
— Лёгкую интеграцию видеопотока с IP-камер.
— Быструю настройку: трансляция на сайте за 1 клик.
— Надёжную платформу с высокой скоростью передачи данных.
Где это актуально?
— Строительство: показывайте процесс стройки в реальном времени своим клиентам.
— Курорты: транслируйте пляжи, бассейны или виды с отеля.
— Магазины: демонстрируйте товары или активность в торговом зале.
— Специфические случаи: например, трансляция церемоний.
Сервис позволяет максимально упростить процесс интеграции. Никаких сложных настроек! Вы получаете готовый код для встраивания, который идеально работает на любом сайте.
Присоединяйтесь к RTSP.ME и откройте новые возможности для ваших клиентов!
Попробуйте уже сейчас: https://rtsp.me
Это #партнёрский пост
Хотите работать с микросервисами? Тогда держите небольшо роадмап по технологиям, которые необходимы для создания качественных микросервисов.
#roadmap #микросервисы
Как интернационализировать (i18n) бэкенда в Express с использованием Intlayer
Intlayer — это библиотека JavaScript, которая позволяет объявлять ваш контент по всему коду. Она преобразует многоязычные объявления контента в структурированные словари, упрощая интеграцию.
В этом руководстве вы узнаете, как добавить поддержку нескольких языков в API на основе Express с использованием Intlayer. Вы научитесь отображать сообщения об ошибках на языке пользователя, отправлять многоязычные уведомления и обслуживать контент на различных языках.
#бэкенд #express
Закрываем задачи перед Новым годом: что горит, а что можно отложить
В IT не успевать в дедлайны становится базой, и, как ни странно, последствия больше всего ощущаются именно перед Новому году.
В этой статье мы с вами выясним: почему сроки в IT часто продлеваются — откладывается рефакторинг, минорные фичи в пользу самых важных бизнесовых, как не надо ставить сроки мидлам, тимлидам и бизнесу.