Веб-страница
23K subscribers
1.9K photos
560 videos
2 files
4.11K links
Всё по фронтенду, бэкенду и девопсу в одном месте

Разместить рекламу: @tproger_sales_bot

Правила общения: https://tprg.ru/rules

Другие каналы: @tproger_channels

Сайт: https://tprg.ru/site

Регистрация в перечне РКН: https://tprg.ru/64ai
Download Telegram
​​Flask для начинающих: создаем лэндинг с админ-панелью и возможность редактировать контент

Flask — это хороший выбор для тех, кто уже знаком с основами Python и хочет применить эти знания в создании веб-приложений. Этот микро-фреймворк на Python, который отличается простотой и гибкостью, делая его доступным для начинающих, в то же время предлагая мощные возможности для создания сложных приложений.

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

1 часть — введение и настройка: https://habr.com/ru/articles/783574/
2 часть — создание лэндинга с админ-панелью: https://habr.com/ru/articles/784770/

#python #flask
6👍1
​​Подборка игр для обучения веб-разработке

Конечно, такие игры не сделают из вас опытного программиста. Зато их вполне достаточно, чтобы освоить азы веб-разработки, переведя концепции программирования в забавные визуальные метафоры и несложные головоломки. В конце концов, это просто забавно!

И вот подборка из бесплатных игр, которые помогут освоить веб-разработку в самых разных её проявлениях:

1. В Elevator Saga вам предстоит управлять настоящим лифтом с помощью JavaScript, разгадывая различные задачки. Игра опенсорс, так что можно покопаться в исходниках: http://play.elevatorsaga.com/

2. В Hex Invaders игрок должен быстро переводить шестнадцатеричное значение цвета на человеческий язык и сбивать пришельцев, чтобы спасти человечество: http://www.hexinvaders.com/

3. Flexbox Froggy — это логическая онлайн-игра, в которой вы должны помочь лягушкам добраться до их кувшинок. Делается это с помощью CSS Flexbox, что очень поможет развить навыки вёрстки: http://flexboxfroggy.com/

4. CSS Diner — отличная игра для знакомства с CSS-селекторами. Игроку даётся стол с посудой, заданный анимированной HTML-формой, и конкретный предмет или предметы, которые нужно взять со стола: https://flukeout.github.io/

#css #игры #javascript
👍22
На собеседовании: Насколько хорошо вы владеете SQL?

Я, желая произвести впечатление:
🤣16👍42
​​Годнота для начинающих разработчиков на JavaScript: бесплатный 30-дневный челлендж по ванильному JS

Если вы изучаете JavaScript, но вам не хватает мотивации или вдохновения для выдумывания себе задач, этот челлендж точно для вас. Его суть проста: каждый день прилетает новое задание и туториал, по которому его надо сделать. 30 дней — 30 заданий:

https://javascript30.com/

#javascript #начинающим
🔥12👍1
​​Интересная библиотека нарисованных от руки UI-компонентов

На сайте собраны кнопки, слайдеры, шаблоны для видеоплеера и другие элементы для сайтов: https://wiredjs.com/showcase

Выглядит очень интересно. Особенно, если совместить с похожими проектами. Например, chart.xkcd. В итоге получится полностью нарисованный от руки сайт.

#ui #design #инструменты
🔥242👍2
​​Производительность Joomla на PHP 8.3 достигла показателя в 341 RPS, показав прирост в 30%

Агентство Kinsta обновило данные бенчмарк-тестов популярных CMS и PHP фреймворков. При выборе движков для теста учитывались популярность, количество живых сайтов, доля рынка и тенденции использования. В список попали: WordPress, WooCommerce, Laravel, Drupal, Joomla, Symfony, CodeIgniter, Craft CMS, OpenCart и Statamic.

Результаты тестов производительности показали прирост производительности около 30% для Joomla на PHP 8.3.

Подробнее о результатах можно узнать в статье: https://habr.com/ru/news/785634/

#php
👍5
This media is not supported in your browser
VIEW IN TELEGRAM
Какие бывают сетевые протоколы?

Сетевые протоколы — это фундамент передачи данных в компьютерных сетях. Для разных задач разработаны отдельные протоколы, со своими особенностями и преимуществами. Вот основные из них:

— HTTP: Стандарт обмена данными в сети, используемый при просмотре веб-страниц.
— HTTPS: Защищенный вариант HTTP, обеспечивает конфиденциальность при передаче данных.
— FTP: Передача файлов между устройствами.
— TCP: Обеспечивает надёжность передачи данных в интернете, гарантируя, что информация достигнет адресата в правильном порядке.
— IP: Простой протокол передачи данных, где каждый пакет передаётся независимо, но без гарантий доставки.
— UDP: Предоставляет быструю передачу данных, идеально подходит для потокового видео и онлайн-игр.
— SMTP: Отправка электронной почты без лишних заморочек, обеспечивает надёжную доставку сообщений.
— SSH: Защищённое удалённое подключение к устройствам. Обеспечивает безопасный доступ к удалённым серверам и системам.

#интернет
20👍11🔥3
​​Внимание, найден действительно рабочий способ стать мидлом не за год и даже не за месяц.

Достаточно просто стать не джуном, а сразу мидлом. Think about it.
😁27👍4
​​Пишем змейку на JS

Почти двухчасовой гайд по созданию браузерной змейки в ретро стиле на JS + CSS: https://www.youtube.com/watch?v=uyhzCBEGaBY

#javascript #gamedev
👍141
​​PHP — это «гадкий утёнок» индустрии. В детстве язык страдал от большого количества недостатков и от ещё большего количества неопытных программистов, которые писали на нем код низкого качества.

Не факт, что PHP сможет исправить свою репутацию. Но возможно, его ругают в основном по инерции, а сам язык здорово развивается и уже имеет мало общего с тем, что он представлял из себя 10 лет назад.

В статье наш читатель рассмотрел преимущества современного PHP: его гибкость, лёгкость интеграции, широкую поддержку сообщества и доступные инструменты для разработки. И рассказал, почему стоит выбирать PHP для веб-разработки, несмотря на неоправданный хейт и кучу мемов: https://tproger.ru/articles/ya-vybirayu-php-dlya-veb-razrabotki-i-vot-pochemu

#php #тренды
🔥277🥰4🤔3👍2
А снимает сеньор
😁33🤣14🔥2
Скрытые возможности элемента input

Элемент input в HTML самый интересный.

Большинство его собратьев вне зависимости от своих атрибутов ведут себя одинаково. При этом атрибут type элемента input может принимать 22 разных значения, которые не только меняют его поведение, но и влияют на внешний вид.

Элемент input отвечает за всё, начиная с текстового ввода и чекбоксов, заканчивая переключателями и кнопкой для сброса всех полей в форме.

В этой статье описали не только различные типы input, но и сопутствующие атрибуты, о которых вы могли не знать, и которые делают этот элемент более удобным и применимым в различных ситуациях: https://habr.com/ru/companies/ruvds/articles/785690/

#html #лучшиепрактики
👍16🔥2
​​Репозиторий, в котором собраны лучшие практики по тестированию JavaScript и Node.js приложений

Подборка советов составлена на основе десятков статей, книг и инструментов:
— cтруктура тестов,
— тесты для бэкенда и микросервисов,
— UI-тесты для веб-компонентов,
— анализ эффективности тестов,
— настройка CI.

Сохраните, чтобы не потерять: https://github.com/goldbergyoni/javascript-testing-best-practices

#javascript #nodejs #тестирование #лучшиепрактики
😁12👍61
Подборка годноты для веб-разработчиков: 7 незаменимых веб-приложений, которые ускорят работу над проектом

В подборке вы найдёте CSS-генераторы, ИИ-инструменты для подбора шрифтов, удаления фона с картинок и другие полезные сервисы. Сохраните себе, чтобы не потерять.

1. Lorem Picsum — это генератор заполнителей для изображений с множеством параметров настройки. Укажите параметры для ваших картинок непосредственно в URL-адресах.

2. FontJoy находит интересные сочетания шрифтов с помощью ИИ.

3. PFPmaker создает профессиональные фотографии профиля на основе любой фотографии.

4. Carbon поможет создавать красивые изображения вашего кода.

5. CSSGradient упрощает создание новых веб-градиентов. Включает набор инструментов, которые помогут вам повысить уровень работы с градиентом.

6. Neumorphism.io — неоморфные формы не так просто создавать, но генератор Neumorphism упрощает этот процесс.

7. Remove.bg — позволяет удалять фон на любой фотографии автоматически.

#инструменты
👍11🔥61
36th CssChallenge — адаптивные карточки с возможностью переходить по ним. Реализованы с помощью CSS и JavaScript.

Исходники: https://codepen.io/Eliiima70/pen/PoaPgZX

#codepen
🔥10👍1
Forwarded from IT Юмор
Сеньор фигни не скажет
😁70🔥12🤩4🤔1
​​На днях вышел релиз мажорной версии открытого проекта для работы с электронной почтой React Email 2.0

Это коллекция компонентов для создания электронных писем с использованием React и TypeScript. Исходный код проекта доступен на GitHub под лицензией MIT License.

Основные изменения:
— обновлены компоненты и основные блоки;
— улучшен пользовательский интерфейс и обновлены иконки;
— добавлена возможность предпросмотра на мобильных устройствах;
— появилась поддержка подпапок;
— время запуска локального сервера React Email 2.0 при новой установке составляет около 7 секунд (для React Email 1.10.1 было 40 секунд);
— после завершения первоначальной настройки время загрузки составляет около 1 секунды.

Подробнее: https://react.email/docs/changelog#jan-19-2024

#react #typescript
13🔥5👎1
​​Cквирклморфизм снова в моде
😁28🔥53🤣1
​​Топ-12 ресурсов для бесплатного изучения веб-разработки и программирования

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

Сохраните, чтобы изучать то, что нужно вам:
— W3School: https://www.w3schools.com
— Современный учебник JavaScript: https://learn.javascript.ru
— Codewars: https://www.codewars.com
— Refactoring Guru: https://refactoring.guru
Web.dev: https://web.dev
— Harvard CS50 (2023): https://www.youtube.com/watch?v=LfaMVlDaQ24
— Geeks for geeks: https://www.geeksforgeeks.org
— Дока: https://doka.guide
— Egghead: https://egghead.io
— Freecodecamp: https://www.youtube.com/@freecodecamp
— LeetCode: https://leetcode.com/explore
— Developer Roadmaps: https://roadmap.sh

#инструменты #курс
22🤣7👍1