Веб-страница
22.1K subscribers
2.17K photos
561 videos
2 files
4.45K links
Всё по фронтенду, бэкенду и девопсу в одном месте

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

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

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

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

Регистрация в перечне РКН: https://tprg.ru/64ai
Download Telegram
​Сайт, целиком написанный ChatGPT

Нам известны случаи, когда нейросеть, помогала программистам писать определённые куски кода. Но, автор статьи решил пойти дальше и проверить, сможет ли искусственный интеллект завершить проект до конца под его руководством?

О трудностях с которыми пришлось столкнуться разработчику, а так же о полезных функциях, которые он обнаружил, можно прочитать по ссылке:

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

#chatgpt
👍6🤡5💩2🥱2
​Как упростить для себя рабочий процесс на JavaScript?

Возможно, вам приходилось сталкиваться с объёмными заданиями в работе, к которым вы не знали, как подступить.

По ссылке для вас подробный обзор подходов к разбиению длительных задач в JavaScript на отдельные части:

https://web.dev/optimize-long-tasks/

#javascript
👍9
Подборка актуальных вакансий

— Младший Python-разработчик в Kokoc Group
Где: удалённо
Опыт: можно без опыта

— QA Automation Java в Открытие
Где: удалённо
Опыт: от 2 лет

— Программист-разработчик Python в Гринатом
Где: удалённо
Опыт: от 2 лет

— UX-исследователь (Middle/Senior) в Открытие
Где: Москва, можно удалённо
Опыт: от 2 лет

— Python-разработчик в Kokoc Group
Где: удалённо
Опыт: от 3 лет

— UX/UI-дизайнер в Гринатом
Где: удалённо
Опыт: от 3 лет

— Java-разработчик в Гринатом
Где: удалённо
Опыт: от 3 лет

— QA Automation (Python) в Иннотех
Где: удалённо
Опыт: от 3 лет

— Java-разработчик в Иннотех
Где: удалённо
Опыт: от 3 лет

— Middle Golang-разработчик в МТС
Где: удалённо
Опыт: от 3 лет

— Middle+ Senior Java-разработчик в Иннотех
Где: удалённо
Опыт: от 3 лет

— Senior Frontend-разработчик в Kokoc Group
Где: удалённо
Опыт: от 4 лет

#вакансии #работа
👍2
This media is not supported in your browser
VIEW IN TELEGRAM
Интерактивная модель машинки, написанная на чистом HTML и CSS

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

По ссылке вы сможете подробно познакомиться с кодом, а так же подглядеть интересные решения для своих проектов:

https://codepen.io/YusukeNakaya/pen/ZadZxL

#css #html
👍10❤1🔥1
​CSS-селектор: is()

Данный селектор обладает возможностями, о которых вы, возможно не знали. Например, взгляните на картину, при выборе .a .b .c выбирается первый .c. Но при выборе .a :is(.b .c) вы заметите, что выбраны оба.

Подробный обзор со всеми нюансами функционала по ссылке:

https://www.bram.us/2023/01/17/using-is-in-complex-selectors-selects-more-than-you-might-initially-think/

#css
👍5
This media is not supported in your browser
VIEW IN TELEGRAM
Как сделать приложение более динамичным и отзывчивым

Эффект «boop» — это анимация при наведении. Возможно, такие вещи покажутся вам мелочью, но именно эти детали в итоге могут помочь сделать классный продукт.

Ловите полезный туториал, который научит вас делать необычные эффекты по ховеру на React:

https://habr.com/ru/companies/kts/articles/670234/

#react
👍12🥴4🐳1
​Создание Typing Test приложения

Typing Test App — это приложение, которое позволяет проверять скорость и точность печати. Для его создания автор выбрал React и TypeScript , а для работы с состоянием использовал Redux Toolkit.

С подробным туториалом, а так же с репозиторием проекта вы сможете ознакомиться по ссылке:

https://tproger.ru/articles/sozdanie-typing-test-prilozheniya-na-react-typescript-redux-toolkit/

#react #typescript
❤7👍4👎1
This media is not supported in your browser
VIEW IN TELEGRAM
Пошаговое руководство по созданию фуллстак-приложения за час😂
🤣95😁1🐳1
​Микрофронтенд с feature sliced design

В этой статье автор рассмотрел концепцию двух данных архитектур, обсудив их преимущества перед монолитными фронтенд‑приложениями и другими доступными настройками.

А так же рассказал, как ему удалось удачно объединить оба решения в одном проекте:

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

Под постом вас будет ждать викторина, которая поможет вам проверить насколько хорошо вы усвоили материал👇

#архитектура
​Свой собственный аудиоплеер

Программистам, в особенности новичкам, полезно иногда создавать подобные мини-проекты для тренировки своих навыков.

Предлагаем вам изучить подробный туториал на создание аудиоплеера с помощью популярной JavaScript-библиотеки React:

https://proglib.io/p/v-ritmah-react-a-rukovodstvo-po-sozdaniyu-audiopleera-s-pomoshchyu-react-2023-02-01

#javascript #react
👍14❤3😱2🐳1🤨1
This media is not supported in your browser
VIEW IN TELEGRAM
Стильное отображение погоды для вашего сайта

Готовые виджеты на каждый случай. Выполнены с использованием SVG и JavaScript. Подсмотреть готовый код можно по ссылке:

https://codepen.io/ste-vg/pen/GqaZbo

#codepen
❤14👍4
position: absolute;
right: -50%;
🥴44😁20👍7👎2💔2❤1🍾1
Какие специальные инструменты используются для работы с фича-флагами?
Anonymous Quiz
13%
CloudBees Rollout
10%
Optimizely Rollouts
13%
LaunchDarkly
63%
Все перечисленные
👎1
​Задачи по JavaScript

Мы возвращаем старую рубрику. Хорошо подумайте над решением, а уже завтра мы опубликуем правильный ответ. Удачи!

Реализуйте алгоритм: участнику викторины задаётся 2 вопроса. За каждый правильный ответ начисляется 1 балл. Подсчитать и вывести количество правильных ответов на экран.

#задачи
😐27🤨6👍3🤯1
​Задачи по JavaScript

Вчера мы опубликовали задачу, а вот и её решение:

Заведём две переменные для исходных данных: для счётчика баллов (point) и ответов от участника (answer). Пока в нашем счетчике лежит 0 баллов, а переменная для ответов — пустая. Функция prompt вызывает окно с вопросом и поле для ввода ответа. Введённый участником ответ попадает в переменную answer. Программа сравнивает (==) правильный ответ с ответом участника. Если (if) ответ правильный, то программа пойдёт по одной ветке: выведет окно с текстом 'Верно' и увеличит счётчик на единицу (0 + 1 = 1). В противном случае (else), если ответ неправильный, то программа пойдёт по другой ветке и выведет окно с текстом 'Неверно!'.

Точно так же программа обработает второй вопрос. В итоге в переменной point может оказаться от 0 до 2 баллов, это зависит от количества правильных ответов.

Если у вас есть более лаконичное решение, то предлагаем вам поделиться им в комментариях👇

#задачи
💩43😐16👍7🤡3👎2
Подборка актуальных вакансий

— Младший Python-разработчик в Kokoc Group
Где: удалённо
Опыт: можно без опыта

— QA Automation Java в Открытие
Где: удалённо
Опыт: от 2 лет

— UX-исследователь (Middle/Senior) в Открытие
Где: Москва, можно удалённо
Опыт: от 2 лет

— UX/UI-дизайнер в Гринатом
Где: удалённо
Опыт: от 3 лет

— Middle / Senior Go-разработчик в МТС
Где: удалённо
Опыт: от 3 лет

— Middle/Senior Python-разработчик в Гринатом
Где: удалённо
Опыт: от 3 лет

— Middle+ / Senior PHP-разработчик в Kokoc Group
Где: удалённо
Опыт: от 3 лет

— Senior Java-разработчик в МТС
Где: Москва, можно удалённо
Опыт: от 3 лет

— Java IT Lead в Иннотех
Где: удалённо
Опыт: от 3 лет

— Фулстек-разработчик (.NET / React) в Иннотех
Где: удалённо
Опыт: от 5 лет

#вакансии #работа
👍2
​Изучение Vue.js в 2023 году: дорожная карта разработчика

Vue.js — это популярный JavaScript-фреймворк для создания пользовательских интерфейсов.

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

Дорожная карта с подробными объяснениями каждого пункта ждёт вас по ссылке:

https://tproger.ru/articles/izuchenie-vue-js-v-2021-godu-dorozhnaja-karta-razrabotchika/

#vue #roadmap
👍11💩5🔥1
This media is not supported in your browser
VIEW IN TELEGRAM
Создайте крутой проект для портфолио

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

По итогу вы получите клон действующего сервиса по выбору цветов:

https://www.youtube.com/watch?v=OaNICHKM5KM

#javascript #туториал