Возможно, вам довольно быстро надоедают видео типа «Освоить CSS Flexbox за 30 минут!». Есть вариант повеселее.

Просто играйте в эту игру: http://flexboxfroggy.com/#ru

Суть игры — усадить лягушек на нужные кувшинки. Делать это, конечно же, нужно не руками, а css-свойствами. Игра затягивает, ведь так хочется помочь всем лягушкам в браузере. Всё бесплатно.

#фронтенд #css

Подробное введение в разработку веб-приложений при помощи фреймворка Flask на примере блога с использованием Python 3.

В посте — первый урок, полный видеокурс — на канале автора в YouTube: https://tprg.ru/SlxA

#бэкенд #python #видео

Git: подборка материалов

Здесь есть и какие-то классические книги типа «Pro Git», и статьи покороче. Много интерактивных курсов и видеокурсы. А в конце — много структурированных шпаргалок: https://tprg.ru/BgQZ

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

⁠MongoDB 4.2 и шифрование

В MongoDB 4.2 добавили поддержку шифрования данных на уровне полей (field-level encryption, FLE).

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

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

Подробности — в блоге MongoDB: https://tprg.ru/IK9B

#бэкенд #mongodb

Чтобы писать хороший код, надо его аккуратно оформлять. При работе в командах это ещё более важно.

И, конечно, есть инструменты, которые помогают с этим. Например, такой вот сайт, на котором можно отформатировать HTML, JSON, JavaScript и много другого кода: http://www.htmlformatter.in

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

Веб-сокеты в Django

Небольшой видеокурс по работе с веб-сокетами в Django с использованием библиотеки Django Channels: https://tprg.ru/LQti

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

#сокеты #django #видео

ООП на JavaScript

ООП обычно реализуется с помощью классов или прототипов. Большинство объектно-ориентированных языков (Java, C++, Python) используют наследование на основе классов.

JavaScript реализует ООП через прототипное наследование. В этой статье мы рассмотрим оба эти подхода в JavaScript, обсудим их преимущества и недостатки: https://tprg.ru/FAmU

Есть ещё и третий вариант — вообще без ООП. Его тоже рассмотрим.

#javascript #ооп

​​Смотрите, реактивная NoSQL база данных: https://github.com/pubkey/rxdb/blob/master/README.md

RxDB можно использовать для различных проектов на JavaScript: как веб-, так и гибридных и нативных приложений, например, на Electron.

Часто в веб-приложениях нужно отражать изменения состояния в режиме реального времени. Реактивность RxDB позволяет подписываться на все изменения состояния хранимых данных. Например, можно следить, как меняется выдача по заданному запросу или значения поля документа.

RxDB основана на PouchDB и поддерживает протокол репликации CouchDB, что позволяет удобно реплицировать данные между несколькими клиентами и серверами.

#бд #nosql #javascript #бэкенд

Как благодаря WebAssembly получилось ускорить приложение в 20 раз

https://tproger.ru/translations/wasm-site-speed-up/

WebAssembly — это формат инструкций, который можно исполнять в браузере так же, как и JavaScript.

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

#javascript #wasm

Ближайшие ивенты

На этой неделе в Москве состоится два ивента, которые могут быть интересны веб-разработчикам.

26 июня пройдёт Panda Meetup, посвящённый фронтенду. Продвинутые специалисты и тимлиды поговорят об архитектуре современных веб-решений, безопасности в JS, фреймворках и лучших практиках: https://tproger.ru/events/panda-meetup-19-frontend/

А 29-30 июня состоится первый русско-японский хакатон Hanabi Hack. Ждут веб-разработчиков, дизайнеров, специалистов по машинному обучению и облачным вычислениям в командах до 4 человек. Хакатон с ночёвкой: https://tproger.ru/events/hanabi-hack/

#ивенты

Компания Stripe открыла исходный код проекта Sorbet, системы статической проверки типов для языка Ruby: https://sorbet.org/blog/2019/06/20/open-sourcing-sorbet

В состав проекта входит:
— ядро для статической проверки типов;
— инструментарий для создания новых проектов с использованием Sorbet;
— инструментарий для поэтапного перевода на применение Sorbet существующих проектов;
— runtime с предметно-ориентированным языком для написания аннотаций о типах;
— репозиторий с готовыми определениями типов для различных gems-пакетов на Ruby.

О возникающих проблемах можно писать в GitHub Issues. А можно там же и помогать их чинить: https://github.com/sorbet/sorbet

#ruby

Подборка материалов по паттернам

Классические книги, практические курсы, статьи, шпаргалки и задачки: https://tprg.ru/39e0

В комментариях делитесь другими хорошими ресурсами на эту тему.

#программирование #паттерны

Пару дней назад официальный сайт Node.js стал доступен на русском языке: https://nodejs.org/ru/

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

Доработать существующий перевод и добавить поддержку русского языка, например, в документацию можно на GitHub с исходным кодом Node.js: https://github.com/nodejs/nodejs.org

#бэкенд #nodejs

Введение в CSS Shapes

CSS Shapes позволяет создавать интересные и уникальные фигуры, изображения и градиенты, вокруг которых может обтекать текст.

Рекомендуем статью, автор которой помогает понять, нужен ли такой дизайн вашему проекту, и если нужен, то как его сделать: https://tprg.ru/J5t1

#фронтенд #css

Freemium — это подборка инструментов и ресурсов для веб-разработчиков и веб-дизайнеров. Картинки, трекеры багов, приложения для заметок, источники вдохновения. Некоторые из них — полностью бесплатные, другие — только частично: https://freemium.cc/

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

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

Разбираемся с Async/Await в JavaScript на примерах

https://tproger.ru/translations/understanding-async-await-in-javascript/

Для выполнения нескольких асинхронных операций в JavaScript были придуманы промисы. Но у промисов есть проблема: они оставляют за собой кучу цепочек .then/.catch.

Избежать этих цепочек помогает конструкция async/await. И с её помощью возможно организовать работу с асинхронным кодом в синхронном стиле.

На примерах показываем, как это сделать.

#javascript

Шпаргалка с кратким обзором новых функций JavaScript в ES2015, ES2016, ES2017, ES2018 и более поздних версиях: https://devhints.io/es6

#javascript #ecmascript

Смотрите, какая симпатичная форма для выполнения пошаговых действий: https://codepen.io/kaueburiti/pen/YNZGZO

#фронтенд #дизайн

Рекомендуем несколько видеоуроков, в которых вы узнаете, как HTTP стал основой интернета, как он работает и как его правильно использовать: https://tprg.ru/http-protocol

#сети #http

GraphQL теперь в Postman

Postman — масштабное приложение, которое помогает проектировать и тестировать API, и до сих пор оно работало только с концепцией RESTful.

А теперь ребята добавили поддержку стандарта GraphQL — говорят, это была вторая по популярности просьба у них на гитхабе. Предыдущее обновление уже принесло поддержку schemas, так что теперь можно создавать и хранить GraphQL-схемы прямо в Postman.

Как начать работать в приложении с этим языком запросов, понятно расписали в блоге.

Наше руководство по самому GraphQL, кому надо.

#api #тестирование #инструменты

Оказывается, у гугла (ну, Google Developers) есть сайт web.dev с лучшими практиками по «строительству современного веба», как они сами это называют.

Там есть их любимый инструмент по анализу скорости загрузки сайта, бложек с советами и, что для нас тут наверное самое крутое, платформа-обучалка: несколько коллекций step-by-step материалов по этому самому «строительству веба». Можно пойти делать приложения на React, а можно просто про SEO читнуть.

В общем, https://web.dev/