⁠Сохранение изменений CSS

Как делает страдающий программист:
1. Изменяет CSS в консоли разработчика в Chrome.
2. Переносит всё это вручную в нужный файл для сохранения изменений.

Как не мучаться:
1. Откройте панель Sources.
2. Выберите таб Overrides.
3. Там кликните «Select Folder For Overrides».
4. Выберите директорию, в которой вы хотите сохранять изменения.
5. В верхней части окна появится запрос на чтение и запись в выбранную директорию. Разрешите.
6. Теперь изменяйте CSS, спокойно перезагружайте страницу и всё будет сохраняться.

#css #chrome

WordPress — один из самых популярных бесплатных движков сайтов в мире. По данным сервиса W3Techs, 34% сайтов во всём интернете работают на WordPress: https://tprg.ru/STn4

Налажать при разработке сайта на WordPress так же легко, как и разработать хороший.

Технолог блога компании PromoPult поделился собственным опытом работы с WordPress-блогом и его поддержкой. Он рассказывает, зачем заранее думать о масштабировании, как по максимуму использовать стандартные решения Wordpress и не забыть при этом об адаптивности для мобилок.

Рекомендуем к прочтению: https://tprg.ru/wordpress-blog-in-2019

#фронтенд #wordpress

Адаптивная вёрстка

Благодаря таким стандартам, как Flexbox Layout и CSS Grid Layout, адаптивный дизайн перестал быть чем-то сложным. Теперь реализовать его можно быстро, просто и без привлечения сторонних библиотек.

В лекции от Школы разработки интерфейсов рассматриваются практические примеры адаптивной вёрстки с использованием базовых и продвинутых инструментов (относительные величины измерений, нефиксированные размеры, media queries, srcset, тег picture): https://www.youtube.com/watch?v=5jTDpz7OXD4

Презентация лекции: https://tprg.ru/adaptive-layout-presentation

#фронтенд #вёрстка

Front-End Checklist скажет, что нужно проверить на фронтенде, чтобы выпустить веб-проект в продакшн: https://frontendchecklist.io/

Как там с минификацией JS-файлов? Изображения оптимизировали? Про SEO не забыли? Всего около 100 пунктов для проверки.

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

#фронтенд

Пагинация в GraphQL Ruby

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

В этой статье автор рассказывает про стандартную реализацию пагинации в GraphQL Ruby и подробно поясняет не самые очевидные моменты. Почему hasPreviousPage и hasNextPage работают так странно? И почему нельзя узнать общее количество записей в базе без лишнего кода?

Ответы в статье: https://www.2n.pl/blog/graphql-pagination-in-rails

#graphql #rails

Sublime Text 3 для вёрстки

Автор видео уже много лет пользуется Sublime Text 3 для вёрстки. В видео он делится опытом, как с нуля установить и настроить редактор, а также использовать популярные плагины, которые помогут при вёрстке сайтов: https://www.youtube.com/watch?v=xWhTf_o86Lg

Все необходимые для работы ссылки — в описании. Для тех, кому удобнее читать, а не смотреть видео, есть текстовая версия: https://tprg.ru/sublime-text-3-guide

А вы каким редактором для вёрстки пользуетесь?

#инструменты #вёрстка

Angular, React или Vue?

Извечный вопрос: какой фреймворк выбрать для разработки фронтенда?

Знающие сразу начнут закидывать вас встречными вопросами (и правильно будут делать). Большое или маленькое приложение вы собираетесь разрабатывать? Насколько для вас критична производительность приложения? А гибкость?

Ух, сколько вопросов. Но на них будете отвечать вы, а автор этой статьи сравнил три популярных фреймворка, чтобы после ответа на вопросы вы смогли совершить осознанный выбор: https://tprg.ru/angular-vs-react-vs-vue

В комментах пишите, в чём согласны с автором статьи, а в чём нет.

#фронтенд #angular #react #vue

Если небольшой проект на гитхабе со временем разрастается, то его документации становится тесно в рамках README. У Google есть более 2000 таких проектов, и для них это стало реальной проблемой.

Поэтому они сделали Docsy. С его помощью можно быстро создать сайт с технической документацией своего проекта.

На сайте Docsy можно посмотреть, как это выглядит, и там же найти руководство по созданию и настройке своего сайта: https://www.docsy.dev/docs/

⁠Подборка из более чем 800 публичных API

API разбиты на 70 категорий для разных целей: https://public-apis.xyz

Можно написать свой Кинопоиск на основе API с фильмами. А можно сделать приложение, которое расскажет всё о комиксах Marvel. Или возьмите API для распознавания текста/картинок/музыки и напишите что-нибудь оригинальнее обычного списка.

Есть даже API с биографией знаменитых слонов (что, простите?). Не хватает только API к этой подборке API.

Самое то, чтобы создать интересную приложуху для портфолио: https://public-apis.xyz

Если вдруг у вас не будет работать ссылка, то есть немного урезанный вариант этой же подборки на гитхабе: https://github.com/public-apis/public-apis

#api

Распространённые заблуждения про безопасность IPv6

Некоторые думают, что версия протокола IPv6 — это просто IPv4 с адресами подлиннее. Другие — что она намного безопаснее, чем IPv4.

В статье разбираемся с этими заблуждениями и смотрим на более серьёзные с технической точки зрения ошибки в сравнении версий.

https://tproger.ru/translations/common-misconceptions-about-ipv6-security/

#безопасность #сети

Как писать хорошие Dockerfiles? Рассказывают в блоге Docker: https://blog.docker.com/2019/07/intro-guide-to-dockerfile-best-practices/

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

#docker

Недавно из беты вышла TestMace — бесплатная тулза для работы с API: https://client.testmace.com/ru/

Инструмент может упростить работу разработчикам и тестировщикам. С его помощью можно создавать и выполнять единичные запросы и их последовательности, писать тесты, документировать API. Если у вас есть какие-то наработки в Postman, то вы сможете их импортировать в TestMace.

Есть руководство по быстрому старту: https://tprg.ru/Q7HN

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

Уроки по Vue.js

Рекомендуем два часовых урока по Vue.js с приятной и доступной подачей материала. Например, некоторые особенности фреймворка автор объясняет на примерах с футболом или петросянами.

Первый урок посвящён знакомству с Vue.js, сравнению его с другими подобными инструментами и изучению основных понятий фреймворка: https://www.youtube.com/watch?v=b6Ac0jcqJIg

Второе видео продолжает эту тему и посвящено Vue CLI, инструментарию для разработки на Vue.js: https://www.youtube.com/watch?v=4O1twLpg-7A

#фронтенд #vuejs

Konstellate — это бесплатный пользовательский интерфейс для создания, редактирования и управления взаимосвязями и ресурсами Kubernetes-приложений.

С его помощью можно легко создавать сложные YAML-структуры и экспортировать их в чарты Helm или шаблоны Kustomize.

На GitHub лежат открытые исходники. Также там можно почитать больше о возможностях инструмента и узнать, как его запустить на своей машине: https://github.com/containership/konstellate

А здесь можно поиграться с демо альфа-версии: https://containership.github.io/konstellate/

#развёртывание #kubernetes

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

Сотрудники компании отнеслись к ситуации именно так, очень быстро всё подняли, а теперь ещё и технический директор Джон Грэм-Камминг написал офигенный постмортем — «Подробности отказа в работе Cloudflare 2 июля 2019».

Что оттуда можно почерпнуть:
1. Как честно общаться с клиентами и воспринимать их как ну просто людей, а не как обезличенные кошельки.
2. Как устроены процессы разработки и деплоя в огромной компании, которая ежедневно пропускает через себя тонны трафика.
3. Какая комбинация проблем привела к отказу (они для себя выделили 11 штук), как и кто эти проблемы решал. С графиками, пулл-реквестами и скринами из джиры. Прям сериал «Чернобыль», только в тексте и про IT.
4. Узнать побольше об особенностях регулярных выражений — одной из проблем была именно ошибка в регулярке, которая в итоге сожрала все ресурсы процессора. Все технические подробности есть в статье: пошаговое руководство как-не-делать.

И начинается текст очень мило — с переписки девятилетней давности, где Камминг (будучи тогда только клиентом клаудфлеры) спрашивает у CEO Мэтью Принса «чего там с моим DNS-сервером», а тот ему подробно рассказывает, что случилось — прямо как сейчас Камминг рассказывает нам.

Кроссбраузерная библиотека для CSS-анимаций: https://github.com/daneden/animate.css

Просто скачивайте css-файл, добавляйте его в свой проект и используйте разнообразные анимации. Примеры использования в коде можно посмореть на гитхабе, а сами анимации — на демо-сайте: https://daneden.github.io/animate.css/

#css

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

Два неравнодушных фронтендера перелопатили кучу источников и написали Солидбук. Весь код написан на TypeScript, в каждой главе есть паттерны и антипаттерны, примеры из идеального мира и реальной жизни, а также интерактивные тесты для самопроверки: https://ota-solid.now.sh/

#typescript #ооп #solid

⁠Open source проекты на React

Как правило, когда программист достигает определённого дзена в разработке, у него появляется желание применить знания вне основной работы. Например, в open source проектах. Это полезно и для профессионального развития, и для разработчиков вокруг.

В этой статье автор рассказывает, как выбрать хороший open source проект, в который можно контрибьютить и не бояться потратить свои силы впустую.

Также он рассказывает про лучшие проекты с открытыми исходниками, основанные на React. Можно выбрать инструменты для разработки, а можно какие-нибудь компоненты для вёрстки: https://flatlogic.com/blog/best-react-open-source-projects/

#javascript #react

Нововведения Postgres 12

Этой весной на конференции HighLoad++ Олег Бартунов, разработчик Postgres, генеральный директор Postgres Professional, рассказал про Postgres 12, который оказался очень богатым на фичи: https://www.youtube.com/watch?v=uhvqly8MtoI

Их простое перечисление выглядело бы очень уныло, поэтому он выбрал некоторые из них, о которых и рассказал более подробно. Например, в 12 версии ожидаются поддержка KNN для SP-GiST и B-tree (для тех, кто не знает или не помнит, что такое SP-GiST и KNN, спикер рассказывает).

#базыданных #postgresql

Разработка веб-серверов на Go

При помощи стандартных компонентов языка можно разрабатывать серверные приложения. В статье рассказываем, как это сделать, начиная с «Hello World!»: https://tproger.ru/translations/go-web-server/

В итоге получится приложение, которое:
— использует Let’s Encrypt для HTTPS;
— выполняет маршрутизацию запросов к API;
— реализует промежуточную обработку запросов;
— раздаёт статические файлы;
— корректно завершает свою работу.

Если вам интересно посмотреть сразу на готовый код, то заходите на GitHub: https://github.com/jordan-wright/http-boilerplate

#бэкенд #go

⁠Хуки в React

В последней версии React 16.8 появились хуки, цель которых — упростить процесс разработки компонентов.

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

В официальной русскоязычной документации React есть раздел, посвящённый хукам. Там есть правила и примеры использования готовых хуков, пример создания кастомных и ответы на популярные вопросы по теме: https://ru.reactjs.org/docs/hooks-faq.html#which-versions-of-react-include-hooks

А чтобы закрепить тему на настоящей практике, рекомендуем статью, в которой разрабатывается чат с использованием хуков React: https://css-tricks.com/build-a-chat-app-using-react-hooks-in-100-lines-of-code/

#reactjs #pwa