Горячее
Лучшее
Свежее
Подписки
Сообщества
Блоги
Эксперты
Войти
Забыли пароль?
или продолжите с
Создать аккаунт
Я хочу получать рассылки с лучшими постами за неделю
или
Восстановление пароля
Восстановление пароля
Получить код в Telegram
Войти с Яндекс ID Войти через VK ID
Создавая аккаунт, я соглашаюсь с правилами Пикабу и даю согласие на обработку персональных данных.
ПромокодыРаботаКурсыРекламаИгрыПополнение Steam
Пикабу Игры +1000 бесплатных онлайн игр
Открой для себя волшебный мир реальной рыбалки. Лови реальную рыбу на реальных водоемах! Исследуй новые рыболовные места и заполучи заветный трофей.

Реальная Рыбалка

Симуляторы, Мультиплеер, Спорт

Играть

Топ прошлой недели

  • AlexKud AlexKud 38 постов
  • SergeyKorsun SergeyKorsun 12 постов
  • SupportHuaport SupportHuaport 5 постов
Посмотреть весь топ

Лучшие посты недели

Рассылка Пикабу: отправляем самые рейтинговые материалы за 7 дней 🔥

Нажимая кнопку «Подписаться на рассылку», я соглашаюсь с Правилами Пикабу и даю согласие на обработку персональных данных.

Спасибо, что подписались!
Пожалуйста, проверьте почту 😊

Помощь Кодекс Пикабу Команда Пикабу Моб. приложение
Правила соцсети О рекомендациях О компании
Промокоды Биг Гик Промокоды Lamoda Промокоды МВидео Промокоды Яндекс Директ Промокоды Отелло Промокоды Aroma Butik Промокоды Яндекс Путешествия Постила Футбол сегодня

HTML + IT

С этим тегом используют

CSS Программирование Javascript Верстка Сайт Web IT юмор Программист Юмор Работа Картинка с текстом Разработка Все
155 постов сначала свежее
5
FrankyBob
FrankyBob
6 дней назад

Как я с помощью ИИ за час собрал Помодоро-таймер, который заюзали коллеги⁠⁠

Привет, Пикабу! Хочу рассказать историю о том, как обычный айтишник без особых знаний фронтенда создал довольно полезное веб-приложение, используя силу искусственного интеллекта. Спойлер: коллеги были удивлены.

Как я с помощью ИИ за час собрал Помодоро-таймер, который заюзали коллеги Искусственный интеллект, Нейронные сети, Gemini, Таймер, Веб-разработка, Программирование, Javascript, HTML, Продуктивность, IT, Разработка, Прототипирование, Эксперимент, Технологии, Автоматизация, Работа, Образ жизни, Длиннопост

Начальный экран приложения (прелоадер)

Завал задач и поиски спасения

Итак, дело было так. Очередной завал на работе, куча задач, мозг кипит. Вспомнил про технику Помодоро — это когда работаешь 25 минут, потом 5 минут отдыхаешь. Простая штука, но реально помогает не выгорать.

Полез искать нормальный таймер в интернете и... знакомая история:

  • Либо убого простые

  • Либо перегруженные фигнёй

  • Либо на английском

  • Либо платные

  • Либо ещё регистрацию просят

В общем, типичная ситуация: "Да я сам лучше сделаю!" Но проблема в том, что фронтенд я знаю на уровне "поменять текст на странице через консоль разработчика до перезагрузки".

Как я с помощью ИИ за час собрал Помодоро-таймер, который заюзали коллеги Искусственный интеллект, Нейронные сети, Gemini, Таймер, Веб-разработка, Программирование, Javascript, HTML, Продуктивность, IT, Разработка, Прототипирование, Эксперимент, Технологии, Автоматизация, Работа, Образ жизни, Длиннопост

Вспомнил про хайповую штуку

Тут я вспомнил про так называемый "вайб-кодинг" с нейросетями. Да, знаю, что многие к этому относятся скептически, но решил попробовать. Открыл Claude и написал примерно так:

"Старина, сделай мне HTML-страничку с таймером Помодоро. Нужно: таймер на 25 минут, задачи можно добавлять, статистика какая-нибудь и чтоб пикал когда время вышло."

И тут началось волшебство! Claude выдал мне полноценный рабочий прототип. Причём не просто "Hello World", а реально функциональную штуку😉:

  • Нормальным таймером

  • Возможностью добавлять задачи

  • Статистикой

  • Звуками

Меня понесло

Ну и дальше меня, конечно, понесло:

  • А можешь добавить сохранение в Local Storage?

  • А сделай звуки покруче

  • А перекрась вот это в зелёный

  • А добавь настройки времени

  • А мобильную адаптивность

Claude всё это выполнял как послушный джуниор! За час у меня был готов довольно приличный таймер.

Как я с помощью ИИ за час собрал Помодоро-таймер, который заюзали коллеги Искусственный интеллект, Нейронные сети, Gemini, Таймер, Веб-разработка, Программирование, Javascript, HTML, Продуктивность, IT, Разработка, Прототипирование, Эксперимент, Технологии, Автоматизация, Работа, Образ жизни, Длиннопост

Внешний вид приложения (начальной версии не осталось, к сожалению, показываю конечный результат)

Реакция коллег

Показал результат фронтенд-разрабам на работе со словами: "Смотрите, что я за час накатал, вообще без знаний!"

Их реакция:

  • 😳 (удивление)

  • 🤔 (изучают интерфейс)

  • 😯 (ещё больше удивления)

  • Нефига себе, ништяк получилося! Реально работает!

Решил довести до ума

После такой реакции подумал: "А почему бы не довести это до продакшена?" И понеслось...

Сейчас можете посмотреть результат: pomo25.ru

Что в итоге получилось:

Для тех, кто хочет настроить под себя:

  • Настраиваемые интервалы (любое время, какое хочешь!)

  • 10 типов звуков + можно загрузить свой

  • Ручное сохранение настроек

  • Push-уведомления в браузере

Для обычных людей:

  • Добавляешь задачи и следишь за прогрессом

  • Видишь статистику: сколько помидорок сделал

  • Не забываешь делать перерывы

  • Задачи сохраняются автоматически

Как я с помощью ИИ за час собрал Помодоро-таймер, который заюзали коллеги Искусственный интеллект, Нейронные сети, Gemini, Таймер, Веб-разработка, Программирование, Javascript, HTML, Продуктивность, IT, Разработка, Прототипирование, Эксперимент, Технологии, Автоматизация, Работа, Образ жизни, Длиннопост

Запуск таймера для добавленной задачи, длительностью 1 час

Как я с помощью ИИ за час собрал Помодоро-таймер, который заюзали коллеги Искусственный интеллект, Нейронные сети, Gemini, Таймер, Веб-разработка, Программирование, Javascript, HTML, Продуктивность, IT, Разработка, Прототипирование, Эксперимент, Технологии, Автоматизация, Работа, Образ жизни, Длиннопост

Настройки приложения

Про дизайн (не кидайтесь тапками)

Отдельно про дизайн. Да, я знаю, что он специфический. Это не потому что у меня нет вкуса (хотя может и нет 😅), а потому что я специально попросил Claude сделать что-то в стиле киберпанка 90-х.

Получилось ярко, кислотно, с неоновыми цветами и пиксельными эффектами. Возможно, не всем зайдёт, но зато запоминается!

Телеграм-версия

Потом решил пойти дальше и сделал версию для Телеграма: @pomo25_bot

Плюсы:

  • Данные синхронизируются через облако Телеграма

  • Уведомления приходят от самого Телеграма

  • Работает на телефоне как нативное приложение

Минусы:

  • Не работает в фоне (об этом ниже)

Как я с помощью ИИ за час собрал Помодоро-таймер, который заюзали коллеги Искусственный интеллект, Нейронные сети, Gemini, Таймер, Веб-разработка, Программирование, Javascript, HTML, Продуктивность, IT, Разработка, Прототипирование, Эксперимент, Технологии, Автоматизация, Работа, Образ жизни, Длиннопост

Приложение в Telegram

Проблема с фоновой работой

Единственное, что не смог победить — работу в фоне на мобилках.

Проблема в том, что:

  1. Телеграм Web Apps работают в WebView

  2. При сворачивании приложения WebView приостанавливается

  3. JavaScript перестаёт выполняться

  4. Service Workers в WebView работают криво

  5. iOS вообще жёстко блокирует фоновые скрипты

В итоге при сворачивании таймер автоматически ставится на паузу. Для полноценной работы в фоне нужно было бы нативное приложение.

Опыт работы с нейросетями

Claude: король прототипирования

В начале Claude был просто космос:

  • Быстро понимает что нужно

  • Генерирует рабочий код

  • Хорошо итерируется

  • Не задаёт лишних вопросов

Но потом начались проблемы

Когда проект разросся, Claude начал путаться:

  • Исправляет одно, ломает другое

  • Забывает контекст больших файлов

  • Приходилось делать бэкапы в гите постоянно

Попробовал ChatGPT — ещё хуже! То ли ленился и отвечал "попробуйте перезагрузить страницу", то ли чинил совсем не там, где надо, вообще не понимая что происходит в коде.

Gemini спас ситуацию

Тогда попробовал новый Gemini (у него миллион токенов контекста). И охренел!

Gemini смог:

  • Прочитать ВЕСЬ проект целиком

  • Найти реальные причины багов

  • Переписать проблемные части

  • Почистить код от мусора


Реальная польза

Сейчас пользуюсь своим таймером каждый день:

  • Реально стал делать перерывы (раньше мог 3 часа сидеть не вставая)

  • Лучше планирую время на задачи

  • Меньше выгораю от сложных задач

  • Коллеги тоже подсели, просят фичи добавить, но я пока просто собираю обратную связь и анализируюю насколько это будет сложно реализовать и внедрить

Мораль истории

Современные нейросети действительно могут сильно понизить порог входа в разработку. Даже если ты не знаешь React/Vue/Angular, можно создать полезную штуку.

Но есть нюансы:

  • Для прототипов ИИ идеален

  • Для больших проектов нужно понимать что делаешь

  • Разные ИИ лучше для разных задач

  • Git обязателен при работе с ИИ

Итог

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

Сейчас собираю обратную связь (конструктивную, не токсичную) и планирую постепенно что-то добавлять и исправлять по мере поступления интересных идей.

Кто-то ещё экспериментировал с ИИ-разработкой? Поделитесь в комментах!


P.S. Если найдёте баги или будут идеи, пишите. Обратная связь очень ценна!

UPD: Забыл добавить — если кто захочет посмотреть, что получилось: pomo25.ru и @pomo25_bot в Телеграме!

Показать полностью 5
[моё] Искусственный интеллект Нейронные сети Gemini Таймер Веб-разработка Программирование Javascript HTML Продуктивность IT Разработка Прототипирование Эксперимент Технологии Автоматизация Работа Образ жизни Длиннопост
5
Вопрос из ленты «Эксперты»
tablepedia
4 месяца назад
Web-технологии

Генерация HTML файлов с помощью Excel и бесплатного OpenOffice Calc⁠⁠

Я в феврале 2025 года работаю над проектом "Генерация HTML файлов с помощью табличного редактора". Напишите, пожалуйста, в комментариях ссылки на похожие проекты. Точнее, на файл табличного редактора для генерации HTML.

[моё] Вопрос Спроси Пикабу Программа Программирование Microsoft Excel HTML Основы HTML Windows Файл Генерация Таблица Сайт IT Web Web-программирование Приложение CSS Дизайн Веб-дизайн Графический дизайн Короткопост Текст
14
6
Antony.kark
Antony.kark
5 месяцев назад

Войти в IT⁠⁠

Всем привет!

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

У меня была мечта попасть в IT.

Дано:
- у меня нет никаких подходящих навыков
- образование электрика
- 3 года стажа на заводе
- умею разговаривать
- из техники есть мобилка Samsung серии А и динозавр ACER, который при установке Windows 8 просил убить его.

Очередное утро, чувствую, что хватит тянуть лямку на заводе, и все-таки пора попробовать воплотить в жизнь мечту. Решение нужно было принимать срочно, иначе - еще годик, еще три, еще 10 и потом и до пенсии немного останется.
Увольняюсь с завода, устраиваюсь в IT- компанию в службу поддержки оператором в чатах и звонках. Правда со второго раза, первый решил списать тестовое для спокойствия, поймали, устно ответил как будто работал там год, поняли, что просто перестраховывался и не валенок. Переработки, нервные клиенты и партнеры добивали, но перспектива завода обратно не особо привлекала. Через полгода получилось пойти на повышение до старшего смены.

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

Но стояла цель попасть в IT отдел, а чтобы до него достучаться (до небес было бы проще конечно и быстрее) нужно было начать что-то изучать.

Был выбран не самый простой путь - самообразование (какие-то уроки, задания мудрые книги и куча всего) ну и конечно ролики на You-Tube. Выбрал для себя Frontend, очень нравилось смотреть на круто сделанные сайты, и всегда хотелось начать их делать самому.

После нескольких месяцев начал уже сам писать какие-то простенькие сайты(лендинги).

Войти в IT Рекомендации, Опыт, Фриланс, Карьера, Личный опыт, Тестирование, IT, Код, Javascript, HTML, Приветствие, Длиннопост

Первый блин, почти без комочков

Войти в IT Рекомендации, Опыт, Фриланс, Карьера, Личный опыт, Тестирование, IT, Код, Javascript, HTML, Приветствие, Длиннопост

Его продолжение

Получился вот такой лендинг. Начинал с HTML, CSS. До GULP и JS в принципе еще даже не доходил, знаю много знакомых которые посвящали время только JS, а базовый HTML особо не трогали. Постепенно начал погружаться в JS. На проектах начал добавлять формы сообщений, бургер меню.

Войти в IT Рекомендации, Опыт, Фриланс, Карьера, Личный опыт, Тестирование, IT, Код, Javascript, HTML, Приветствие, Длиннопост

Мой первый бургер

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

Войти в IT Рекомендации, Опыт, Фриланс, Карьера, Личный опыт, Тестирование, IT, Код, Javascript, HTML, Приветствие, Длиннопост

На цвет клац-клац

Войти в IT Рекомендации, Опыт, Фриланс, Карьера, Личный опыт, Тестирование, IT, Код, Javascript, HTML, Приветствие, Длиннопост

Другая картинка появится тыц-тыц

Но это еще далеко не верхушка айсберга. Взял плотно в обучение GULP, REACT. В будущем планирую перейти на VUE.

Пока что я в верстке, беру небольшие проекты, кодю для себя что-то что на сайтах вижу и обучаюсь и расту дальше.

Хотел бы попросить у вас рекомендации по сообществам, где можно активно получить конструктивной критики или просто в панамку за вопросы или посты и еще почитать образовательного для себя.

И если есть желающие посмотреть код, я буду рад его закинуть посоветоваться, если так можно здесь :)

Всем хорошего времени суток!

Показать полностью 5
[моё] Рекомендации Опыт Фриланс Карьера Личный опыт Тестирование IT Код Javascript HTML Приветствие Длиннопост
13
2
cherkalexander
cherkalexander
6 месяцев назад

Всего несколько строк CSS для плавных переходов между страницами⁠⁠

Я давно не рекомендовал ничего почитать, но эта короткая статья не оставила меня равнодушным.

"Всего несколько строк CSS для плавных переходов между страницами"

  • перевод на хабре

  • оригинал

Я много раз слышал, про View Transitions API и о том, что теперь можно настраивать анимации перехода между страницами, но никогда не пробовал.

В статье автор предлагает сделать переходы между страницами плавными с помощью одной строчки кода.

@View-transition { navigation: auto; }

Чтобы понять о чём говорит автор просто посмотрите прикреплённое видео:

  • или откройте оригинал статьи и воспроизведите видео

  • или же откройте мой блог и попробуйте перейти на одну из последних статей

В SPA приложениях также есть возможность использовать View Transitions API. Можете посмотреть демки в статье: "Введение в View Transitions API".  Анимация реализуется с помощью startViewTransition

document.startViewTransition(() => updateTheDOMSomehow());

При использовании View Transitions API происходит следующее:

  • делается снимок текущего состояния страницы

  • выполняется обновление DOM (updateTheDOMSomehow)

  • делается снимок нового состояния страницы

  • переход между этими состояниями анимируется с помощью дефолтного плавного затухания или с помощью кастомной анимации

Более сложные примеры  можно узнать отсюда:

  • The View Transitions API And Delightful UI Animations (Part 1)

  • The View Transitions API And Delightful UI Animations (Part 2)

  • Никита Дубко. По-настоящему красивые переходы средствами браузера

Для блогов на Astro:

  • Документация View Transitions в доке Astro

  • Как починить темную и светлую темы после внедрения view transitions — читать тут

Показать полностью
Программирование CSS HTML Javascript IT Разработка Видео Без звука
1
AlexeyPerfilev
AlexeyPerfilev
8 месяцев назад

Жизнь фронтендера: когда твой код – это искусство, а браузер – холст⁠⁠

Привет, Пикабу! Сегодня я хочу рассказать вам о захватывающем мире фронтенд-разработки. Готовы погрузиться в пучину тегов, стилей и скриптов? Поехали!

1. HTML: скелет нашего цифрового тела

Представьте, что вы скульптор, но вместо глины у вас теги. Каждый <div> – это маленькая вселенная, а <p> – повествование целой истории. А когда вы случайно забываете закрыть тег, это как забыть застегнуть ширинку – вроде работает, но что-то не так.

2. CSS: макияж для вашего сайта

CSS – это как модный журнал для вашего HTML. Хотите, чтобы ваш сайт выглядел как топ-модель на подиуме? Просто добавьте немного flexbox и grid, и вуаля! Хотя иногда CSS больше похож на игру "Угадай, почему этот элемент съехал на 2 пикселя влево".

3. JavaScript: душа вашего сайта

Если HTML – это тело, а CSS – одежда, то JavaScript – это душа вашего сайта. Именно он заставляет всё двигаться, реагировать и иногда падать с криком "Uncaught TypeError". Но когда вы наконец-то заставляете всё работать идеально, чувствуете себя настоящим волшебником!

4. Фреймворки: когда вы устали изобретать велосипед

React, Vue, Angular – выбирайте свой яд. Эти ребята обещают сделать вашу жизнь проще, и они действительно это делают... после 10 часов настройки и 100 ошибок при сборке.

5. Отладка: детективная работа 21 века

Кто сказал, что программисты не детективы? Попробуйте найти ошибку в 1000 строк кода! Это как искать иголку в стоге сена, только стог постоянно меняет форму, а иголка превращается в стог.

Заключение

Быть фронтендером – значит быть немного художником, немного волшебником и чуточку мазохистом. Но когда вы видите, как ваш код оживает в браузере, понимаете – оно того стоило!

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

Показать полностью
[моё] IT Разработка Frontend HTML CSS Javascript Текст
5
Mr.Ducks
Mr.Ducks
8 месяцев назад
Серия PHP и веб-разработка: полезные руководства и совет

Регистрация на PHP с использованием PDO и MySQL: Полное Руководство⁠⁠

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

Мы также обсудим, почему важно использовать PDO для безопасности, как хэшировать пароли, и что такое подготовленные выражения.

Регистрация на PHP с использованием PDO и MySQL: Полное Руководство PHP, Mysql, Регистрация, HTML, Безопасность, База данных, Веб-разработка, Персональные данные, IT, Программа, Длиннопост

Шаг 1: Создание HTML-формы для регистрации

Начнем с базовой HTML-формы, которая будет собирать имя пользователя, электронную почту и пароль. Эта форма отправляет данные методом POST на PHP-скрипт (register.php), который будет обрабатывать информацию.

<!DOCTYPE html>

<html lang="ru">

<head>

<meta charset="UTF-8">

<meta http-equiv="X-UA-Compatible" content="IE=edge">

<meta name="viewport" content="width=device-width, initial-scale=1.0">

<title>Регистрация</title>

</head>

<body>

<h2>Форма регистрации</h2>

<form action="register.php" method="post">

<label for="username">Имя пользователя:</label><br>

<input type="text" id="username" name="username" required><br><br>

<label for="email">Email:</label><br>

<input type="email" id="email" name="email" required><br><br>

<label for="password">Пароль:</label><br>

<input type="password" id="password" name="password" required><br><br>

<input type="submit" value="Зарегистрироваться">

</form>

</body>

</html>

Шаг 2: PHP-скрипт для обработки данных с использованием PDO

Теперь перейдем к созданию PHP-скрипта (register.php), который будет принимать данные из формы и сохранять их в базе данных MySQL. Мы будем использовать PDO (PHP Data Objects) для подключения и работы с базой данных, что обеспечивает безопасность и удобство работы.

<?php

// Настройки подключения к базе данных

$host = 'localhost'; // Имя хоста

$dbname = 'my_database'; // Имя базы данных

$username_db = 'root'; // Имя пользователя БД

$password_db = ''; // Пароль БД (если есть)

// Подключение к базе данных через PDO

try {

$dsn = "mysql:host=$host;dbname=$dbname;charset=utf8";

$pdo = new PDO($dsn, $username_db, $password_db, [

PDO::ATTR_ERRMODE => PDO::ERRMODE_EXCEPTION, // Включаем обработку ошибок

PDO::ATTR_DEFAULT_FETCH_MODE => PDO::FETCH_ASSOC, // Массивы по умолчанию

PDO::ATTR_EMULATE_PREPARES => false, // Отключаем эмуляцию подготовленных выражений

]);

} catch (PDOException $e) {

die("Ошибка подключения к базе данных: " . $e->getMessage());

}

// Проверка отправки формы

if ($_SERVER["REQUEST_METHOD"] == "POST") {

// Получаем данные из формы

$username = $_POST['username'];

$email = $_POST['email'];

$password = password_hash($_POST['password'], PASSWORD_DEFAULT); // Хэшируем пароль

// SQL-запрос для вставки данных

$sql = "INSERT INTO users (username, email, password) VALUES (:username, :email, :password)";

// Подготовка и выполнение запроса через PDO

try {

$stmt = $pdo->prepare($sql);

$stmt->execute([

':username' => $username,

':email' => $email,

':password' => $password

]);

echo "Регистрация прошла успешно!";

} catch (PDOException $e) {

echo "Ошибка при выполнении запроса: " . $e->getMessage();

}

}

// Закрытие соединения (необязательно в PDO, но можно сделать для аккуратности)

$pdo = null;

?>

Пояснение к коду:

  • Подключение через PDO: Мы подключаемся к базе данных через PDO. Этот способ работы с базой данных считается безопасным, так как поддерживает подготовленные выражения, защищающие от SQL-инъекций.

  • Хэширование пароля: Использование функции password_hash() позволяет безопасно хранить пароли, применяя современный алгоритм хэширования. Это значительно увеличивает уровень защиты пользовательских данных.

  • Подготовленные запросы: Мы используем подготовленные запросы для передачи данных в базу. Это защищает от SQL-инъекций, так как данные передаются отдельно от структуры SQL-запроса.

Шаг 3: Создание таблицы в MySQL

Перед тем, как вы сможете зарегистрировать пользователей, вам нужно создать таблицу для хранения информации о них. Вот пример SQL-запроса для создания таблицы users в базе данных:

CREATE TABLE users (

id INT AUTO_INCREMENT PRIMARY KEY,

username VARCHAR(50) NOT NULL,

email VARCHAR(100) NOT NULL,

password VARCHAR(255) NOT NULL,

created_at TIMESTAMP DEFAULT CURRENT_TIMESTAMP

);

Пояснение к таблице:

  • id: Автоматически увеличивающийся идентификатор для каждого пользователя.

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

  • email: Электронная почта, которая также должна быть уникальной и валидной.

  • password: Хэшированный пароль пользователя.

  • created_at: Автоматическая отметка времени, когда пользователь зарегистрировался.

Преимущества использования PDO:

  1. Безопасность: PDO поддерживает подготовленные выражения, которые защищают от SQL-инъекций, одной из наиболее распространенных атак на базы данных.

  2. Кросс-базовая поддержка: PDO позволяет легко менять драйверы для работы с разными базами данных (например, MySQL, PostgreSQL, SQLite).

  3. Обработка ошибок: PDO легко настраивается для выброса исключений в случае ошибок, что помогает отлавливать и решать проблемы на ранних стадиях.

Хэширование паролей в PHP

Хэширование пароля с помощью password_hash() делает вашу систему более безопасной. Это важно, так как хранение паролей в открытом виде крайне небезопасно. При хэшировании создается "отпечаток" пароля, который невозможно восстановить до оригинала, даже если данные будут скомпрометированы.

$password = password_hash($_POST['password'], PASSWORD_DEFAULT);

Для проверки пароля при авторизации можно использовать функцию password_verify().

Заключение

Создание системы регистрации с использованием PHP и PDO — это простой, но мощный способ начать работу с безопасной аутентификацией пользователей. Мы рассмотрели основные аспекты: создание формы, работу с базой данных через PDO, использование подготовленных запросов для защиты от SQL-инъекций, а также хэширование паролей.

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

Убедитесь, что ваш сервер настроен на работу с PHP и MySQL, а также что конфигурация базы данных соответствует вашим требованиям.

Показать полностью 1
PHP Mysql Регистрация HTML Безопасность База данных Веб-разработка Персональные данные IT Программа Длиннопост
11
3
cherkalexander
cherkalexander
9 месяцев назад

Соседние селекторы в CSS⁠⁠

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

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

.new-feature-element ~ .element-with-scroll {
// тут фиксим стили, они применяются к .element-with-scroll
}



Посмотрел на разметку, понял что .element-with-scroll всегда идёт непосредственно после .new-feature-element поэтому можно поменять на +:


.new-feature-element + .element-with-scroll {
// тут фиксим стили, они применяются к .element-with-scroll
}


Основные различия + и ~:

- + выбирает только один элемент, который непосредственно следует за первым элементом.
- ~ выбирает все элементы, которые следуют за первым элементом, но не обязательно сразу за ним.

Посмотрел на разметку ещё раз и понял, что элементы видны всегда, а не по условию, поэтому просто пофиксил стили для .element-with-scroll без всяких соседних селекторов, но хоть потренировался.

https://t.me/cherkashindev/226

UPD:

cherkashin.dev

cherkashin.dev

cherkashin.dev

Показать полностью
[моё] CSS Программирование IT HTML Текст
3
6
Proglib
Proglib
10 месяцев назад
Серия Итоги недели в мире фронтенда и обзоры сервисов

Итоги недели в мире фронтенда и обзоры новых сервисов: 10 полезных JavaScript-трюков⁠⁠

Итоги недели в мире фронтенда и обзоры новых сервисов: 10 полезных JavaScript-трюков Программирование, Разработка, Шаблон, Angular, Bootstrap, CSS, Frontend, Gatsby, HTML, IT, Javascript, Laravel, React, Vue, Длиннопост

🔮 10 полезных JavaScript-трюков

Деструктуризация с переименованием (алиасингом)

Деструктуризация – это способ извлечь значения из массивов или свойства из объектов и присвоить их отдельным переменным. Алиасинг (переименование) позволяет дать новые имена этим переменным в процессе деструктуризации:

Итоги недели в мире фронтенда и обзоры новых сервисов: 10 полезных JavaScript-трюков Программирование, Разработка, Шаблон, Angular, Bootstrap, CSS, Frontend, Gatsby, HTML, IT, Javascript, Laravel, React, Vue, Длиннопост

Зачем это нужно:

  • Улучшает читаемость кода.

  • Помогает избежать конфликтов имен – если у вас уже есть переменная city, можно использовать hometown.

  • Пригодится при работе с API, если он возвращает данные с неподходящими для вашего кода именами.

Каррирование

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

Итоги недели в мире фронтенда и обзоры новых сервисов: 10 полезных JavaScript-трюков Программирование, Разработка, Шаблон, Angular, Bootstrap, CSS, Frontend, Gatsby, HTML, IT, Javascript, Laravel, React, Vue, Длиннопост

Та же функция, но с использованием каррирования:

Итоги недели в мире фронтенда и обзоры новых сервисов: 10 полезных JavaScript-трюков Программирование, Разработка, Шаблон, Angular, Bootstrap, CSS, Frontend, Gatsby, HTML, IT, Javascript, Laravel, React, Vue, Длиннопост

Зачем это нужно:

  • Обеспечивает переиспользуемость функций.

  • Повышает читаемость и модульность кода.

  • Позволяет создавать новые функции на лету, используя уже существующие, например:

Итоги недели в мире фронтенда и обзоры новых сервисов: 10 полезных JavaScript-трюков Программирование, Разработка, Шаблон, Angular, Bootstrap, CSS, Frontend, Gatsby, HTML, IT, Javascript, Laravel, React, Vue, Длиннопост

🤖🎓 Подтянуть свои знания по DS вы можете на нашем телеграм-канале «Библиотека DS для собеса»

debounce() и throttle()

Дебаунсинг и троттлинг – техники оптимизации, которые помогают контролировать частоту вызова функций. Они особенно полезны при работе с событиями, которые могут происходить очень часто, например, прокрутка страницы или ввод текста.

debounce() работает так:

  • Функция вызывается только после того, как прошло определенное время с момента последнего вызова.

  • Если функция вызывается снова до истечения этого времени, таймер сбрасывается.

В этом примере функция поиска будет вызвана только через 300 миллисекунд после того, как пользователь перестанет вводить текст. Это позволяет избежать лишних запросов к серверу при каждом нажатии клавиши:

Итоги недели в мире фронтенда и обзоры новых сервисов: 10 полезных JavaScript-трюков Программирование, Разработка, Шаблон, Angular, Bootstrap, CSS, Frontend, Gatsby, HTML, IT, Javascript, Laravel, React, Vue, Длиннопост

throttle() работает так:

  • Функция вызывается не чаще, чем раз в заданный интервал времени.

  • Если попытка вызвать функцию происходит до истечения интервала, вызов игнорируется.

В этом примере функция handleScroll будет вызываться не чаще, чем раз в 300 миллисекунд, независимо от того, сколько раз пользователь прокрутил страницу за это время:

Итоги недели в мире фронтенда и обзоры новых сервисов: 10 полезных JavaScript-трюков Программирование, Разработка, Шаблон, Angular, Bootstrap, CSS, Frontend, Gatsby, HTML, IT, Javascript, Laravel, React, Vue, Длиннопост

Мемоизация

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

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

  • Если да, мы возвращаем сохраненный результат.

  • Если нет, мы выполняем вычисление, сохраняем результат и возвращаем его.

Пример мемоизации при вычислении ряда Фибоначчи:

Итоги недели в мире фронтенда и обзоры новых сервисов: 10 полезных JavaScript-трюков Программирование, Разработка, Шаблон, Angular, Bootstrap, CSS, Frontend, Gatsby, HTML, IT, Javascript, Laravel, React, Vue, Длиннопост
  • Без мемоизации вычисление fibonacci(40) заняло бы очень много времени, потому что функция вызывала бы себя рекурсивно миллионы раз, повторяя одни и те же вычисления.

  • С мемоизацией каждое число Фибоначчи вычисляется только один раз. При повторном запросе того же числа результат берется из кэша, что значительно ускоряет работу.

Когда использовать мемоизацию:

  • Для функций с очень сложными вычислениями.

  • Когда функция часто вызывается с одними и теми же аргументами.

  • Когда функция  возвращает один и тот же результат для одних и тех же входных данных.

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

🐘🧩 Интересные задачи по PHP для практики можно найти на нашем телеграм-канале «Библиотека задач по PHP»

Proxy

Proxy позволяет нам обернуть объект и контролировать взаимодействие с ним. Мы можем перехватывать и изменять основные операции – чтение свойств, их запись, вызов функций и т. д. Proxy особенно полезен, когда нужно добавить дополнительное поведение к объектам, не изменяя их напрямую: это может быть полезно для отладки, для реализации реактивных систем (как в Vue.js), для создания умных объектов и многого другого:

Итоги недели в мире фронтенда и обзоры новых сервисов: 10 полезных JavaScript-трюков Программирование, Разработка, Шаблон, Angular, Bootstrap, CSS, Frontend, Gatsby, HTML, IT, Javascript, Laravel, React, Vue, Длиннопост

Для чего еще можно использовать Proxy:

  • Валидация – проверка данных перед их установкой в объект.

  • Логирование – отслеживание использования и изменений свойств объекта.

  • Создание вычисляемых на лету свойств.

  • Безопасность – можно контролировать доступ к свойствам объекта.

Генераторы

Генераторы – особый тип функций в JavaScript:

  • Могут приостанавливать свое выполнение и возобновлять его позже.

  • Сохраняют свое состояние между вызовами.

  • Используют ключевое слово yield для возврата значений.

Пример итерации по свойствам объекта:

Итоги недели в мире фронтенда и обзоры новых сервисов: 10 полезных JavaScript-трюков Программирование, Разработка, Шаблон, Angular, Bootstrap, CSS, Frontend, Gatsby, HTML, IT, Javascript, Laravel, React, Vue, Длиннопост

Преимущества генераторов:

  • Ленивые вычисления – вычисляют значения, когда они действительно нужны.

  • Создание бесконечных последовательностей, не занимающих бесконечный объем памяти.

  • Упрощение асинхронного кода – можно сделать асинхронный код более похожим на синхронный.

  • Создание кастомных итераторов для сложных структур данных.

Эффективное использование консоли

Помимо console.log(), консоль предоставляет несколько более наглядных методов вывода информации.

  • Ошибки и предупреждения:

Итоги недели в мире фронтенда и обзоры новых сервисов: 10 полезных JavaScript-трюков Программирование, Разработка, Шаблон, Angular, Bootstrap, CSS, Frontend, Gatsby, HTML, IT, Javascript, Laravel, React, Vue, Длиннопост
  • Вывод табличных данных:

Итоги недели в мире фронтенда и обзоры новых сервисов: 10 полезных JavaScript-трюков Программирование, Разработка, Шаблон, Angular, Bootstrap, CSS, Frontend, Gatsby, HTML, IT, Javascript, Laravel, React, Vue, Длиннопост
  • Группировка логов:

Итоги недели в мире фронтенда и обзоры новых сервисов: 10 полезных JavaScript-трюков Программирование, Разработка, Шаблон, Angular, Bootstrap, CSS, Frontend, Gatsby, HTML, IT, Javascript, Laravel, React, Vue, Длиннопост
  • Измерение времени выполнения:

Итоги недели в мире фронтенда и обзоры новых сервисов: 10 полезных JavaScript-трюков Программирование, Разработка, Шаблон, Angular, Bootstrap, CSS, Frontend, Gatsby, HTML, IT, Javascript, Laravel, React, Vue, Длиннопост
  • Условное логирование:

Итоги недели в мире фронтенда и обзоры новых сервисов: 10 полезных JavaScript-трюков Программирование, Разработка, Шаблон, Angular, Bootstrap, CSS, Frontend, Gatsby, HTML, IT, Javascript, Laravel, React, Vue, Длиннопост
  • Трассировка стека:

Итоги недели в мире фронтенда и обзоры новых сервисов: 10 полезных JavaScript-трюков Программирование, Разработка, Шаблон, Angular, Bootstrap, CSS, Frontend, Gatsby, HTML, IT, Javascript, Laravel, React, Vue, Длиннопост

🐍🎓 Подтянуть свои знания по Python вы можете на нашем телеграм-канале «Библиотека Python для собеса»

Структурированное клонирование

Структурированное клонирование – метод создания полной (глубокой) копии объекта, включающей все вложенные объекты и структуры данных. Функция structuredClone позволяет выполнять такое клонирование просто и эффективно – в  отличие от JSON.parse(JSON.stringify()), structuredClone корректно обрабатывает Date, Map, Set и другие специальные типы JavaScript:

Итоги недели в мире фронтенда и обзоры новых сервисов: 10 полезных JavaScript-трюков Программирование, Разработка, Шаблон, Angular, Bootstrap, CSS, Frontend, Gatsby, HTML, IT, Javascript, Laravel, React, Vue, Длиннопост

Структурированное клонирование стоит использовать, если:

  • Нужно создать полную, независимую копию сложного объекта.

  • Данные не должны изменяться (иммутабельность).

  • Необходимо избежать побочных эффектов при изменении данных.

Самовызывающиеся функции

Самовызывающиеся функции (IIFE) выполняются автоматически сразу после их создания. Они создают временную область видимости, в которой можно безопасно определять переменные и функции, не беспокоясь о том, что они будут конфликтовать с другими частями кода и загрязнять глобальную область видимости. Эта техника особенно полезна в старых средах JavaScript, где блочная область видимости (let и const) недоступна, или в сценариях, где требуется немедленное выполнение для инициализации:

Итоги недели в мире фронтенда и обзоры новых сервисов: 10 полезных JavaScript-трюков Программирование, Разработка, Шаблон, Angular, Bootstrap, CSS, Frontend, Gatsby, HTML, IT, Javascript, Laravel, React, Vue, Длиннопост

Теговые шаблоны

Теговые шаблоны позволяют разбирать шаблонные литералы с помощью функции. Первый аргумент такой функции содержит массив строковых значений, а остальные содержат выражения из подстановок. Здесь, например, функция sanitize заменяет опасные символы на их безопасные HTML-сущности, предотвращая выполнение нежелательного кода:

Итоги недели в мире фронтенда и обзоры новых сервисов: 10 полезных JavaScript-трюков Программирование, Разработка, Шаблон, Angular, Bootstrap, CSS, Frontend, Gatsby, HTML, IT, Javascript, Laravel, React, Vue, Длиннопост

Как можно использовать теговые шаблоны:

  • Автоматически обрабатывать пользовательский ввод, предотвращая XSS-атаки.

  • Форматировать числа, даты и т. д.

  • Безопасно формировать SQL-запросы, экранируя ввод.

  • Создавать теги для автоматического перевода строк с одного языка на другой.

🤖🧩 Интересные задачи по DS для практики можно найти на нашем телеграм-канале «Библиотека задач по DS»

📐 Единицы измерения высоты и ширины экрана в современном CSS

На протяжении многих лет разработчики использовали vh и vw, чтобы задавать размеры элементов в процентах от высоты и ширины экрана. Например, чтобы заполнить весь экран элементом, его размеры можно задать как 100vh на 100vw. Однако эти единицы могут работать ненадежно в некоторых случаях, например, при изменении видимой области экрана на мобильных устройствах из-за скрытия адресной строки браузера при прокрутке. Сейчас CSS предлагает новые единицы измерения, которые учитывают динамические изменения интерфейса браузера.

Large Viewport Units (lvh, lvw)

Эти единицы задаются относительно максимального размера видимой области, когда интерфейс браузера минимизирован (например, скрыты панели). По сути, они ведут себя аналогично классическим vh и vw, но с учетом возможных изменений интерфейса. Этот элемент будет занимать весь экран независимо от состояния интерфейса браузера:

.full-page-element {
height: 100lvh;
width: 100lvw;
z-index: -1
background: #f51;
}

Small Viewport Units (svh, svw)

Эти единицы рассчитываются относительно минимального размера видимой области, когда интерфейс браузера максимально расширен (например, когда панели видимы). Пример – статичный заголовок, занимающий 10% от минимальной видимой области:

.header {
height: 10svh;
background-color: #642;
}

Dynamic Viewport Units (dvh, dvw)

Эти единицы измеряются с учетом динамических изменений видимой области при взаимодействии пользователя с интерфейсом (например, при прокрутке страницы или появлении виртуальной клавиатуры). Есть нюансы: использование этих единиц иногда приводит к неожиданным изменениям размеров контента и ухудшению производительности. Пример – элемент, который адаптируется к изменениям высоты видимой области:

.adjustable-element {
height: calc(100dvh - 10svh);
}

Привет!

Мы запустили еженедельную email-рассылку, посвященную последним новостям и тенденциям в мире фронтенда. В наших еженедельных рассылках ты найдешь:

  • Современные JavaScript-фреймворки и библиотеки

  • HTML5 и CSS3: новые возможности и трюки

  • Оптимизация производительности веб-приложений

  • Тестирование и отладка кода

  • Лучшие практики UX/UI

  • Новые веб-стандарты и браузерные технологии

  • Тренды в веб-дизайне и интерфейсах

  • Прогрессивные веб-приложения (PWA)

📧 Подпишись, чтобы быть в числе первых, кто получит дайджест

✍️ 50 лучших ресурсов с бесплатными HTML/CSS/JS-шаблонами

  • HTMLrev – крупнейшая бесплатная библиотека шаблонов, созданных с использованием всех существующих технологий, включая HTML/CSS/JS, Bootstrap, Tailwind, Bulma, Angular, React, Vue, Next.js, Nuxt, Svelte, Astro, Laravel, Django, Gatsby, Hugo, Jekyll и BCMS.

  • HTML5 UP – бесплатная коллекция HTML-шаблонов с уникальным дизайном и высоким качеством кода.

  • StyleShout предлагает широкий выбор шаблонов для различных целей, включая SaaS, мобильные приложения, блоги, лендинги, портфолио и агентства.

  • One Page Lovе включает шаблоны на Bootstrap, Next.js, Tailwind, Carrd и Framer.

  • Cruip предлагает шаблоны на Tailwind, React, Vue, Next.js и Laravel.

Итоги недели в мире фронтенда и обзоры новых сервисов: 10 полезных JavaScript-трюков Программирование, Разработка, Шаблон, Angular, Bootstrap, CSS, Frontend, Gatsby, HTML, IT, Javascript, Laravel, React, Vue, Длиннопост

🐍🧩 Интересные задачи по Python для практики можно найти на нашем телеграм-канале «Библиотека задач по Python»

  • Templatemo – огромная коллекция бесплатных Bootstrap-шаблонов.

  • ThemeSelection – библиотека бесплатных и платных шаблонов на Vue, Next.js, Nuxt и Laravel. Специализируется на административных панелях и UI-китах.

  • Creative Tim – шаблоны на Bootstrap, Tailwind, Angular, React, Vue, Next.js, Nuxt, Svelte, Laravel, Django и Astro.

  • Themesberg предлагает широкий выбор шаблонов для административных панелей, лендингов, дизайн-систем и UI-китов.

  • TemplateDeck – небольшая библиотека креативных Bootstrap-шаблонов высокого качества.

  • Flout UI – коллекция компонентов Tailwind и готовых шаблонов Next.js.

  • Michael Andreuzza – бесплатная подборка шаблонов Astro, созданная опытным и креативным разработчиком.

  • Just Good UI – собрание бесплатных и платных шаблонов Astro.

  • Startup Landing – подборка бесплатных шаблонов Next.js и Gatsby.

  • Web3Templates – красивые шаблоны Tailwind, Astro и Next.js, оптимизированные для конверсий.

  • Landify – красивые и современные шаблоны Gatsby.

  • Nextjs Templates – широкий выбор шаблонов для разных целей, включая SaaS, стартапы, бизнес, программное обеспечение и блоги.

Итоги недели в мире фронтенда и обзоры новых сервисов: 10 полезных JavaScript-трюков Программирование, Разработка, Шаблон, Angular, Bootstrap, CSS, Frontend, Gatsby, HTML, IT, Javascript, Laravel, React, Vue, Длиннопост
  • LayoutFlow – отличные шаблоны для агентств, портфолио и сайтов услуг.

  • Template Foundation – шаблоны, ориентированные на портфолио и личные сайты.

  • Templated – продуманные шаблоны на HTML/CSS и Bootstrap.

  • Freebiesbug – высококачественные шаблоны, оптимизированные для маркетинга.

  • Start Bootstrap – широкий выбор профессиональных шаблонов для стартапов, агентств, портфолио, личных сайтов и блогов.

  • MonsterOne – современные шаблоны с несколькими страницами.

  • TemplatesJungle – шаблоны для бизнеса, агентств, сервисов, портфолио, электронной коммерции и других целей.

  • 3rd Wave Media – коллекция высококачественных шаблонов, ориентированных на ИТ-сферу.

  • Tooplate – большая коллекция стильных и современных Bootstrap-шаблонов.

  • Pixel Rocket – качественные Bootstrap- и Tailwind-шаблоны.

  • HTML Codex – широкий выбор шаблонов для бизнеса, курсов, продуктов, агентств, сервисов, портфолио, резюме и других целей.

  • W3Layouts отличается широким выбором шаблонов для бизнеса.

  • Bootstrapious – шаблоны с хорошим дизайном и продвинутыми компонентами.

  • Untree – стильные шаблоны со сложными элементами.

Итоги недели в мире фронтенда и обзоры новых сервисов: 10 полезных JavaScript-трюков Программирование, Разработка, Шаблон, Angular, Bootstrap, CSS, Frontend, Gatsby, HTML, IT, Javascript, Laravel, React, Vue, Длиннопост
  • Tailwind Toolbox – красивые шаблоны с продуманной структурой.

  • Pixelcave – современные шаблоны для сайтов и административных интерфейсов.

  • Themefisher – коллекция шаблонов для бизнеса, SaaS, блогов и других целей.

  • Tailspark – Tailwind-шаблоны для SaaS-сайтов и лендингов.

  • Red Pixel Themes – шаблоны с  хорошим дизайном и многими полезными компонентами.

  • Ari Budin – уникальные шаблоны для портфолио, агентств, журналов и дизайн-систем.

  • Treact – бесплатная библиотека React-шаблонов.

Итоги недели в мире фронтенда и обзоры новых сервисов: 10 полезных JavaScript-трюков Программирование, Разработка, Шаблон, Angular, Bootstrap, CSS, Frontend, Gatsby, HTML, IT, Javascript, Laravel, React, Vue, Длиннопост
  • DesignToCodes – шаблоны для стартапов, агентств, портфолио и административных панелей.

  • UI Lib – библиотека Bootstrap-, Tailwind-, Angular-, React- и Vue-шаблонов.

  • AdminMart – профессиональные шаблоны со множеством секций и компонентов.

  • WrapPixel – специализируется на административных панелях и UI-китах, предлагает широкий выбор шаблонов с разным дизайном и структурой.

  • Tabler – бесплатная библиотека Bootstrap-шаблонов, специализируется на административных панелях.

  • KeenThemes – современные шаблоны для админ-панелей со множеством компонентов.

Итоги недели в мире фронтенда и обзоры новых сервисов: 10 полезных JavaScript-трюков Программирование, Разработка, Шаблон, Angular, Bootstrap, CSS, Frontend, Gatsby, HTML, IT, Javascript, Laravel, React, Vue, Длиннопост

🎮 Больше полезных материалов вы найдете на нашем телеграм-канале «Библиотека разработчика игр | Gamedev, Unity, Unreal Engine»

  • EaseTemplate – подборка современных Bootstrap-шаблонов.

  • BootstrapDash – шаблоны с несколькими страницами и продвинутыми компонентами.

  • CodedThemes – профессиональные Bootstrap-, Angular-, React- и Vue-шаблоны с красивым дизайном.

  • Salvia Kit предлагает коллекцию Angular-, React-, Vue-, Nuxt- и Svelte-шаблонов. Отличается широким выбором шаблонов для административных панелей.

Итоги недели в мире фронтенда и обзоры новых сервисов: 10 полезных JavaScript-трюков Программирование, Разработка, Шаблон, Angular, Bootstrap, CSS, Frontend, Gatsby, HTML, IT, Javascript, Laravel, React, Vue, Длиннопост
  • JustBoil – Tailwind-, React-, Vue-, Next.js-, Nuxt- и Laravel-шаблоны для сайтов и админ-панелей.

  • Iqonic Design – библиотека React- и Vue-шаблонов, предлагает несколько бесплатных пакетов для создания современных интерфейсов.

Автор рассылки: Наталья Кайда

📧 Подписаться на рассылку

Показать полностью 24
Программирование Разработка Шаблон Angular Bootstrap CSS Frontend Gatsby HTML IT Javascript Laravel React Vue Длиннопост
1
Посты не найдены
О нас
О Пикабу Контакты Реклама Сообщить об ошибке Сообщить о нарушении законодательства Отзывы и предложения Новости Пикабу Мобильное приложение RSS
Информация
Помощь Кодекс Пикабу Команда Пикабу Конфиденциальность Правила соцсети О рекомендациях О компании
Наши проекты
Блоги Работа Промокоды Игры Курсы
Партнёры
Промокоды Биг Гик Промокоды Lamoda Промокоды Мвидео Промокоды Яндекс Директ Промокоды Отелло Промокоды Aroma Butik Промокоды Яндекс Путешествия Постила Футбол сегодня
На информационном ресурсе Pikabu.ru применяются рекомендательные технологии