Веб-страница
24K subscribers
1.74K photos
534 videos
1 file
3.95K links
Всё по фронтенду, бэкенду и девопсу в одном месте

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

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

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

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

Регистрация в перечне РКН: https://tprg.ru/64ai
Download Telegram
Лучшие способы вызова API на JavaScript

При работе с JavaScript чрезвычайно важно знать, как посылать HTTP-запросы и получать динамические данные с сервера/базы данных. А делать это можно различными способами. Подробнее о них:

https://nuancesprog.ru/p/15597/

#api #javascript
👍30👎122💩1
Как работает HTTPS в картинках

Вы когда-нибудь задумывались зачем иконка зеленого замка появляется в адресной строке вашего браузера? И почему это так важно? Создатели этого сайта-комикса решили помочь разобраться в этом всем желающим!

Последуйте навстречу приключениям кота Сертификэта, птички Браузерберда, и ПеСеля, тогда, они объяснят, почему HTTPS так важен для будущего веба, и каким образом все это работает. Познакомиться с ними можно здесь:

https://howhttps.works/ru/

#https
👍45🔥2😁2💩2
Динамический разделитель строк на Flexbox

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

https://ishadeed.com/article/flexbox-separator/

#css
👍20👎1
Фронтенд-разработчики: *TRIGGERED*
👍70🤮1
Сравниваем async/await и then/catch с примерами

В JavaScript есть два основных способа обработки асинхронного кода: Promise (ES6) и async/await (ES7). Эти синтаксисы дают нам равные базовые функции, но по-разному влияют на читаемость и область видимости, а это крайне важно при работе с кодом.

В этой статье вы увидите, как один вариант помогает нам, а другой возвращает нас в эпоху callback hell. Подробнее:

https://habr.com/ru/company/skillbox/blog/651781/

#javascript
👍12🔥3😁1
50 вопросов на собеседовании по Vue JS

Хотите понять как чувствует себя кандидат на вакансию, а также узнать, что могут задать на собеседовании Vue-разработчику? Тогда открывайте видео и смотрите. А для больше интереса можете ставить видео на паузу и пробовать ответить самостоятельно до того, как об этом расскажет автор:

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

#видео #vue
👍9
Начало работы с API доступа к файловой системе

API доступа к файловой системе — это веб-API, который позволяет читать и записывать локальные файлы пользователя. Он открывает новые возможности для создания мощных веб-приложений, таких как текстовые редакторы или IDE , инструменты редактирования изображений, улучшенный импорт/экспорт, и все это во внешнем интерфейсе. 

Давайте посмотрим, как начать использовать этот API:

https://css-tricks.com/getting-started-with-the-file-system-access-api/

#api
🔥10👍3
Анимированная таблица Менделеева на JavaScript

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

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

#codepen #javascript
👍35🥰3👏2
Ну конечная цель ведь достигнута
👍77😁203
Как стать известным в мире программирования

В новом выпуске подкаста Frontend Weekend компанию Анрдею Смирнову составил Никита Дубко. Никита крутой фронтенд-разработчик и ведущий не менее крутого подкаста «Веб-стандарты». Они обсудили работу в Минске, как Никита стал Google Developer Expert, борьбу с синдромом самозванца и многое другое.

Посмотреть или послушать можно тут:

https://youtu.be/6Gx_nP2u-jU

#подкаст
👍8🤔2
Парсинг сайтов с использованием библиотеки Goutte

Сегодня для парсинга всё чаще используется Python, но это не единственный язык с помощью которого можно эффективно извлечь данные с сайта. Благодаря библиотеке Goutte эффективно заниматься парсингом можно и на PHP. О том как это сделать, читайте в статье:

https://tproger.ru/articles/skraping-s-goutte-crawler-parsing-sajtov-s-ispolzovaniem-biblioteki-goutte/

#парсинг #goutte #php
👍6😁3🤯2😢1
Создание реального приложения dApp с помощью React, Solidity и Web3.js

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

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

https://habr.com/ru/post/653679/

#web3 #react #solidity
👍18😁2
Создание индикатора прогресса чтения в React и TailwindCSS

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

В этой статье вы научитесь реализовывать собственную версию такого индикатора:

https://javascript.plainenglish.io/creating-a-read-progress-bar-in-react-and-tailwindcss-34f84435ab79

#фронтенд #react #tailwind
🔥16👍7👎1
"" — то, за что мы "любим" JS
😁23213👍9👎4
This media is not supported in your browser
VIEW IN TELEGRAM
Продавите кнопку, чтобы отправить данные

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

Попробуйте сами:

https://codepen.io/aaroniker/pen/NWqyego

#codepen
🤔30👍20🔥7😁32🤩1
Генератор компонентов Vue.js

В этой статье вы познакомитесь с инструментом, который называется VGENT. VGENT (Vue Agent) — это CLI (Command Line Interface) приложение, которая генерирует компоненты для фреймворка Vue.js или Nuxt.js. Данный инструмент можно гибко настроить под нужды проекта, и генерировать компоненты командами в терминале.

О том, как он работает, можно узнать здесь:

https://habr.com/ru/post/653537/

#vue #инструменты
👍6👎1
Практический пример использования CSS Layer

Держите понятный пример правильного использования CSS Layer. Теперь вы будете наверняка знать, когда его стоит применить:

https://habr.com/ru/post/652047/

#фронтенд #css
👍11
React Drag & Drop: «Игра в бутылки»

Да, на праздниках многие играют в другую игру с бутылками, но и с пользой проводить время тоже нужно. Держите руководство по созданию головоломки из Гарри Поттера на React. Вы сможете реализовать не только логику игры, но и красивый дизайн и интересный UI.

https://habr.com/ru/company/kts/blog/647241/

#react
👍202😁1
И ведь не пофиксишь
🔥97😁10👍9
Резиновая вёрстка: универсальная сетка под все брейкпоинты, примеры и правила

Благодаря этой статье дизайнеры поймут, как минимизировать количество работы для верстальщиков, и тем самым получить их одобрение. А верстальщики научатся экономить свои ресурсы, силы и мозги, чтоб потратить их на более полезные задачи, чем расчёт непонятных сеток. Убедитесь сами:

https://tproger.ru/articles/rezinovaja-verstka-universalnaja-setka-pod-vse-brejkpointy-primery-i-pravila/

#фронтенд
👏13👍5🔥5🥰21