Веб-страница – Telegram
Веб-страница
24.1K subscribers
1.73K photos
529 videos
1 file
3.93K links
Всё по фронтенду, бэкенду и девопсу в одном месте

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

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

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

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

Регистрация в перечне РКН: https://tprg.ru/64ai
Download Telegram
Подборка актуальных вакансий

UX-редактор в МТС
Где: удалённо
Опыт: от 2 лет

Ведущий Java-разработчик [SmartDocs] в МТС
Где: удалённо
Опыт: от 3 лет

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

Senior Java Developer на продукт МТС Аналитика (Big Data) в МТС
Где: удалённо
Опыт: от 4 лет

Middle / Senior Backend Developer (Python) в команду Атом.Око в Гринатом
Где: удалённо
Опыт: от 3 лет

Team Lead Python Developer HR TECH (Проект Мобильный личный кабинет) в Гринатом
Где: удалённо
Опыт: от 5 лет

Senior / Middle BackEnd Java Developer Центр HR TECH в Гринатом
Где: удалённо
Опыт: от 4 лет

Senior QA Automation Java / Kotlin в Иннотех
Где: удалённо
Опыт: от 3 лет

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

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

Senior Fullstack Developer / Фулстек разработчик (.net/react) в Иннотех
Где: удалённо
Опыт: от 5 лет

#вакансии #работа
WebAssembly — топливо для скоростного веба

WebAssembly (Wasm) — новый формат кода для браузеров и серверов. Он позволяет запускать код на C++, Rust и других языках очень быстро. В Figma уже успешно используется WebAssembly, благодаря чему компания ускорила работу своего сервиса в 3 раза.

Плюсы Wasm:
— малый размер и быстрая загрузка;
— легко кэшируется и повторно используется;
— высокая скорость, гораздо быстрее JavaScript.

В этой статье представлен подробный обзор возможностей WebAssembly на примере Figma.

#wasm #javanoscript
😁5👎2
Как упростить работу с React при помощи useLoaderData

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

Вместо этого стоит использовать хук useLoaderData из React Router. Он позволяет вынести логику загрузки данных в отдельную функцию-загрузчик. Это упрощает код, позволяет отделить логику загрузки от отображения и избавляет от необходимости отслеживать состояние загрузки.

Подробнее о том, как настроить useLoaderData: https://nuancesprog.ru/p/18962/

#react
👍11👎1
​Переменные в CSS

CSS-переменные или пользовательские свойства — это значения, которые можно определить один раз и использовать многократно в коде.

В этой статье автор подробно рассмотрит, как они работают и приведёт примеры создания тем, адаптивного дизайна и повышения кроссбраузерной совместимости.

#статья #css
👍7😁3
Создание приложения погоды на Vue.js

Отличный урок как раз к выходным. Если думали над пет-проектом, то вот интересный вариант: приложение погоды на Vue JS, Open Weather Map API и restful api для получения данных о погоде.

Подробнее:

https://youtu.be/JLc-hWsPTUY

#видео #vue
12👍1👎1
Короткий код для длиннокота

Зарядите ваш указательный палец и приготовьтесь крутить колёсико мыши. Проверьте насколько хватит вашего терпения. Этот длиннокот поможет вам узнать, сколько пикселей вы уже прокрутили листая страницу, а также подскажет вам его рост.

Он реализован на препроцессорах Pug и Scss, а также использует чистый JavaScript. Поиграться и посмотреть код можно здесь:

https://codepen.io/jkantner/pen/QdJMmr

#codepen
Forwarded from IT Юмор
JavaScript-разработчик starter pack:
😁30👎15🤔21
This media is not supported in your browser
VIEW IN TELEGRAM
Астрологи объявили неделю фронтенд-разработчика 🔮

🎃В канун Дня Всех Святых Старшие Арканы развернули инфраструктуру на ваших серверах — выясните, что они предсказывают!

Раскидать жизнь по ассетам или разобраться с техдолгом?

Сделайте скриншот экрана — узнайте, какая карта определит вашу судьбу в профессии и какой амулет поможет избежать бед 🧿

Скрин, скрин!
😁12👎1
ИИ для конвертации Figma в код

Познакомьтесь с уникальным ИИ сервисом, который преобразует ваш дизайн из Figma в рабочий код на HTML + CSS и React.

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

#react #figma
🤣23👍3🔥1
Аутентификация в React с Firebase

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

В этой статье рассматривается, как с помощью Firebase и React создать базовую систему аутентификации.

#react #firebase
🤔4👍1
Читатели Типичного прислали ну очень много работ для конкурса «Лучший пет-проект 2023»

Вчера мы закрыли прием работ и отобрала из них только 25 лучших. Голосование начнется 6 ноября, поэтому у вас есть время чтобы не торопясь ознакомится с нашим шорт-листом:

https://tproger.ru/articles/luchwij-pet-proekt-2023-golosovanie-nachnyotsya-6-noyabrya

#diy #конкурс
👍7
SSR и SEO в SPA

Представьте себе ситуацию: у вас есть SPA с рендерингом на клиенте, и вы хотите, чтобы содержимое тега <head> менялось в зависимости от URL.

Эта статья расскажет, как добавить server side Open Graph и другие SEO-теги в ваше приложение без необходимости мигрировать на SSR фреймворк.

#spa #seo #vue
5👎1
Автор книги «You Don’t Know JS» не смог пройти интервью на позицию JavaScript-разработчика

Он, возможно, один из 10-20 человек на планете, кто лучше всех понимает, как работает JavaScript. Это все равно что Линус Торвальдс завалил бы интервью на знание Linux.
😁108🤯23🤣17🔥6👍1
Интерактивный гайд по CRDT

Благодаря CRDT можно легко создавать приложения с совместным редактированием, такие как Google Docs, но без необходимости подключаться к серверу.

В этой серии статей мы узнаем, что такое CRDT. Затем напишем простой редактор, объединим его с более сложными структурами данных и, наконец, применим то, что мы выучили, чтобы создать совместный редактор, похожий на Paint в онлайне.

#typenoscript #crdt
🔥7👍3😁2🤔2
Джавист выбрал теплое местечко
😁61👎8👍3🤣1
Веб-компоненты в 2023

Большинство фронтенд-разработчиков не понимают, что такое веб-компоненты и зачем они нужны. Стандарту уже несколько лет, но разработчики продолжают его игнорировать.

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

#html #dom
👍16👎1
Малыш и Карлсон в IT⁠⁠
😁95👎75🔥4
Как типизировать Vuex Store

Лидерство среди глобальных хранилищ состояний занимает Pinia, и она даже стала стандартом по умолчанию для всей экосистемы Vue. Но Vuex все ещё жив и активно используется.

В статье автор объясняет, зачем нужна типизация state и почему предпочтительнее использовать Pinia. Он демонстрирует, как задать типы для mutations, actions и getters.

В результате вы получите 100% типобезопасный Vuex, избегая при этом путаницы в сложных объявлениях типов.

#vue #pinia #typenoscript
👍6👎2
Почему так тяжело найти заказы?
😁82👍3
Создание портфолио

В статье автор рассказывает о том, как он с нуля создал свой персональный сайт на React и Tailwind CSS. Он делится кодом основных компонентов: навигационной панели, главной страницы, разделов образования и проектов.

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

#react #tailwind #портфолио
🤣16🔥3👍1
Обычный день веб-разработчика. Устали от рутины?
🔥44😁25👎1🤯1