Разработка одностраничного приложения с помощью Flask и Vue.js

Ловите пошаговое руководство по настройке базового CRUD-приложения с помощью Vue и Flask. Здесь вы начнёте с создания каркасов нового приложения Vue, а затем перейдёте к выполнению основных операций CRUD с помощью внутреннего RESTful API, работающего на Python и Flask.

К концу работы над проектом вы научитесь работать с Flask, Vue, RESTful API, подключать фронтенд к бэкенду, использовать маршрутизацию и многое другое. Начинаем здесь:

https://testdriven.io/blog/developing-a-single-page-app-with-flask-and-vuejs/

#flask #vue #spa

​Основные команды SQL, которые должен знать каждый программист

Собрали в одном месте 20+ самых популярных SQL-команд, элементов запроса, агрегатных функций и вложенных подзапросов с примерами использования: https://tproger.ru/translations/sql-recap/

#sql

​Muuri — продвинутые интерактивные макеты для ваших веб-страниц

Сегодня можно создавать довольно сложные макеты без единой строки JavaScript. Но иногда CSS просто недостаточно, тогда здесь появляется Muuri. По сути, Muuri — это движок для создания макетов, который ограничен только вашим воображением.

Он создает адаптивные, сортируемые, фильтруемые и перетаскиваемые макеты. Подробнее об инструменте:

https://muuri.dev/

#инструменты #фронтенд

Userstory как способ поиска ошибок в интерфейсе

При разработке UI не избежать ошибок. Обычно они выявляются и устраняются с помощью тестов. Но сегодня речь пойдёт о способе, который поможет найти ошибки ещё на стадии проектирования интерфейса.

В этой статье вы узнаете о том, как предусмотреть многие сложности с помощью простых правил и Figma:

https://tprg.ru/rj07

​Turbopack: преемник webpack на основе Rust

Когда-то в веб-разработке для создания веб-страниц для интерактивности требовались только HTML, CSS и немного JavaScript. Сегодня в проектах используются кучи различных библиотек, а сам JS применяется как для создания фронтенда, так и на бэке. Как же правильно подключать и настраивать все эти библиотеки с их зависимостями, сохранять все настройки для переноса проекта и следить за всеми переплетениями кода? В этом помогают упаковщики.

Долгое время чуть ли не стандартом являлся webpack, но сегодня появляются более современные решения. Одним из таких является Turbopack, написанный на Rust. Подробнее о нём:

https://blog.logrocket.com/introducing-turbopack-rust-based-successor-webpack/

#rust #turbopack

​Генератор градиентного фона

Хотите создавать действительно крутой градиент, а не полоски из 2-3 цветов? Тогда присмотритесь к Mesher — инструменту, который позволяет создавать очень сложные комбинации цветов, смешивая их так, как нужно именно вам.

Убедитесь сами:

https://csshero.org/mesher/

#инструменты #фронтенд

Немного уличной магии

​Работа с GraphQL с помощью ванильного JavaScript

GraphQL — это язык запросов и серверная среда выполнения для API. Он разработан для того, чтобы сделать API быстрыми, гибкими и удобными для разработчиков. С момента его появления многие API перешли на поддержку GraphQL. Сегодня существуют различные библиотеки для работы с GraphQL, но иногда они могут быть избыточны для проекта.

Вы можете обойтись без лишних зависимостей, положившись на ванильный JS. Вот как это можно сделать:

https://blog.openreplay.com/working-with-graphql-with-vanilla-javascript/

#javascript #api #graphql

​JavaScript localStorage: что такое и как использовать?

LocalStorage в JavaScript позволяет хранить пары ключ/значение в браузере. Но в отличие от обычных переменных, всё, что мы запишем в localStorage, останется там после перезагрузки страницы и закрытия браузера.

В статье рассказали, как работает и как использовать localStorage в JS

#js

​Cборщики (бандлеры) — просто о сложном во Frontend-разработке

Если вы новичок в разработке, то могли пока и не столкнуться с этим важным инструментом. Опытные разработчикии же вряд ли смогут обойтись без сборщика, работая над реальным проектом. Сборщики — это инструменты, которые помогают объединять и управлять модулями и зависимостями в проекте. Они особенно полезны в больших проектах, где есть множество файлов JavaScript, стилей и других ресурсов.

Подробнее о них:

https://tproger.ru/articles/cborshhiki-bandlery-prosto-o-slozhnom-frontend/

#фронтенд

​3 альтернативы GitHub Copilot

GitHub Copilot позволяет нам писать код на основе кода других проектов. Это ускоряет и упрощает разработку. Но сегодня могут быть проблемы с доступом к этому инструменту, да и, возможно, вам захочется попробовать альтернативные инструменты, которые понравятся ещё больше.

Здесь вы увидите 3 реальные альтернативы:

https://blog.openreplay.com/three-alternatives-to-github-copilot-to-keep-an-eye-out-for/

#ии #инструменты

​Pinball Physics

Развлекательно-познавательного контента вам в ленту. На codepen есть проект, который представляет собой полноценную игру Pinball, в которую вы можете поиграть, а когда поставите очередной рекорд изучить её код и даже попробовать повторить.

Взгляните сами:

https://codepen.io/lonekorean/pen/KXLrVX

#codepen

​С локального хостинга в облако: деплоим сайт с Next.js, Django и Kubernetes

Представьте, вы разработали потрясающий сайт и теперь пришло время сделать его доступным для всего мира. Но процесс развёртывания может показаться сложным. Kubernetes вам поможет. Благодаря своим мощным функциям и интеллектуальному управлению контейнерами Kubernetes устраняет сложность развёртывания веб-сайта.

В этом руководстве вы детально пройдёте через процесс развёртывания веб-сайта без особых усилий:

https://dev.to/chetanam/from-localhost-to-cloud-nextjs-django-ssl-github-actions-dns-ultimate-website-deployment-tutorial-34hp

#nextjs #django #kubernetes

​Руководство по наложению изображений в CSS

Обычно мы создаём наложения в CSS, чтобы получить изображения за текстом, значками или другими изображениями. Это руководство покажет вам, как красиво наносить слои как на фоновые изображения, так и на обычные <img> элементы в CSS. 

Подробнее:

https://blog.logrocket.com/guide-image-overlays-css/

#css #фронтенд

Главное, что не 500

В Figma появился режим для разработчиков

Теперь макеты интерфейсов будет ещё удобнее переносить в вёрстку. Команда Figma анонсировала Dev Mode в Figma для получения кода CSS, Swift UI и Compose из макетов. Он пригодится как веб-, так и мобильным разработчикам.

Подробнее о новшестве мы рассказали тут:

https://tproger.ru/articles/figma-dobavila-dev-mode-dlya-veb-razrabotchikov

#дизайн #вёрстка

​А как вы получили свою первую работу?

Вы долго готовились и ходили по собеседованиям или сразу согласились на первое же предложение? Это было сложно или проще простого?

Поделитесь опытом, а мы опубликуем вашу историю на сайте и её увидят читатели Типичного программиста: https://tproger.ru/articles/kak-vy-poluchili-svoyu-pervuyu-rabotu-rasskazhite-nam-o-svoyom-opyte/

​Как работает Next Image в Next.js

Если вы работали с Next.js, скорее всего, вы сталкивались с компонентом Next Image. Он позволяет оптимизировать изображения, при этом поддерживает современные форматы, такие как webp и avif, а также генерирует несколько версий, адаптированных под различные размеры экранов.

При этом «из коробки» всё работает максимально просто при минимуме кода. Такая простота достигается благодаря внутренней сложности компонента: он состоит из трёх других компонентов React Next Image, API изображений и оптимизатора изображений. Но обо всём по порядку:

https://tproger.ru/articles/veshhi-o-kotoryh-vy-mogli-ne-znat-o-next-image

#nextjs #бэкенд