HTML5Boilerplate - фронтенд-шаблон для создания веб-приложений

Это готовый HTML5 шаблон, который поможет создать быстрые, надежные и адаптивные веб-сайты и приложения. Сайты на основе этого шаблона будут работать даже в IE8.

В этом шаблоне собраны все лучшие инструменты для адаптивной кроссбраузерной разработки. HTML5Boilerplate включает в себя инструменты для сброса всех встроенных стилей браузера, настройки Apache и многое другое.

Сайтодел | #инструмент

REST Client - расширение VS Code для тестирования API

Это расширение сможет значительно упростить работу с API, заменив несколько инструментов одним. Расширение уже имеет больше 1.5 миллиона скачиваний и довольно высокий рейтинг.

REST Client позволяет прямо из вашего редактора кода отправлять HTTP-запросы и просматривать ответы на них. Для отправки запросов используются простые и короткие синтаксические конструкции.

Сайтодел | #расширение #vscode

Chartist.js - библиотека для создания графиков

Это JavaScript библиотека c открытым исходным кодом для создания графиков и диаграмм. От других подобных библиотек её отличает минималистичность и отличная документация. Такая библиотека отлично подойдёт для новичков.

Chartlist весит всего 10КБ и содержит только 3 типа графиков - Line, Bar и Pie. Этого достаточно для большинства простых проектов. Кроме того все графики адаптируются под любые разрешения экрана любых браузеров. Для отрисовки графиков используется SVG.

#библиотека #javascript

Remote SSH - плагин VS Code для удаленного подключения

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

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

Сайтодел | #расширение #vscode

Figma - инструмент для прототипирования веб-сайтов и приложений

Это один из самых популярных современных инструментов для создания прототипа веб-сайта или приложения. С помощью этого инструмента вы сможете быстро собрать макет сайта, приложения и даже преобразовать его в HTML-код.

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

Сайтодел | #инструмент

Haml - HTML-препроцессор и шаблонизатор

Это упрощенный язык разметки, который потом может быть скомпилирован в HTML. Он поможет вам писать более красивую и лаконичную HTML-разметку для ваших проектов.

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

Сайтодел | #инструмент #html

Heroku - облачная платформа для хранения веб-приложений

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

Heroku поддерживает множество языков - Ruby, Java, Node.js, Scala, Clojure, Python и PHP. Платформа содержит в себе огромное количество инструментов мониторинга и анализа. Вы можете управлять кешированием, определять производительность вашего приложения, оформлять рассылки и многое другое.

Сайтодел | #сайт

Rallax.js - библиотека для создания parallax-эффектов

Эта библиотека поможет вам быстро начать создавать плавные фоновые parallax-эффекты. Она написана на чистом JavaScript без зависимостей, проста в использовании и подойдёт для изучения любому желающему.

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

Сайтодел | #библиотека #javascript

Flask - фреймворк для создания сайтов на Python

Это один из самых популярных микрофреймворков в среде разработчиков Python. Устанавливается посредством пакетного менеджера PyPI, а совместим как с Python 2.7, так и Python 3.3 и старшими модели.

Последняя версия 2.0 вышла 16 мая 2021 года. В его основе - модульная структура. Включает в себя встроенный сервер, дебагер, шаблонизатор Jinja2 и другие необходимые технологии для минимального сайта.

Сайтодел | #фреймворк #python

⌨️ Базовый HTML шаблон

DOCTYPE — кодировка документа. В данном случае html.

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

meta — метатеги для браузеров и поисковых систем. Указана кодировка документа utf-8 и стандартный viewport для определения размеров страницы.

title — тег заголовка страницы.

body — тело документа страницы, которое видит пользователь.

Сайтодел | #сниппет #html

Selenium - инструмент автоматизации действий на сайтах

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

Selenium поддерживается большинством веб-браузеров(Chrome, Firefox, Edge, IE, Safari, Opera), а сценарии на нем можно писать почти на всех популярных языках программирования.

Что интересно - его можно использовать даже с браузерами, у которых нет графического интерфейса. Например "HTMLUnit" и "PhantomJS".

Сайтодел | #инструмент

Ember.js - фреймворк для амбициозных разработчиков

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

Ember.js - это MVC-фреймворк, который поддерживает новые стандарты и функции JavaScript. Работает исключительно на фронтенде. Он многофункционален: почти все, что нужно для создания приложения, уже содержится в коробке.

Перезагрузка страниц в Ember.js интерактивная, за счет чего процесс разработки становится быстрее. При реализации модели создаются URL-маршруты, благодаря чему полностью поддерживаются глубокие ссылки.

Сайтодел | #фреймворк #javascript

🌐 Git Live – расширение VS Code для командной работы

Это расширение позволяет работать над одним проектом в команде. В редакторе кода появляется вкладка с коллегами. Можно посмотреть, кто из них онлайн, над какими проектами и в каких ветках они работают. Изменения в коде отражаются на экране в режиме реального времени.

В Git Live можно делать видеозвонки и демонстрировать экран с помощью LiveShare. Очень удобно, когда есть возможность позвонить коллегам прямо из VS Code.

Сервис Git Live был разработан студентом Anish Athalye из Массачусетского университета. Целью проекта была возможность видеть активности разработчиков во всем мире.

Сайтодел | #расширение #vscode

⌨ Cвойство "justify-content" в CSS

Отвечает за выравнивание элементов вдоль главной оси у флекс элементов. Применяется в паре со свойством "display: flex".

flex-start – элементы прижаты к началу контейнера по главной оси.

flex-end – содержимое находится в конце контейнера по главной оси.

center – выравнивание по центру.

space-between – элементы равномерно распределены по контейнеру. Первый элемент прижат к началу, а второй – к концу контейнера.

space-around – содержимое располагается почти так же, как и при space-between, только имеются отступы от начала и конца контейнера.

Сайтодел | #код #css

👨‍💻 [УРОК 65] Pixel Perfect - расширение Chrome для качественной верстки

Статья покажет вам, как установить и работать с расширением Pixel Perfect для браузера Chrome и как избежать распространенных ошибок при работе с ним. После прочтения этой статьи вы сможете верстать сайты с точностью до пикселей и научитесь сверять макет дизайнера с версткой при помощи Pixel Perfect.

📘 ИЗУЧИТЬ УРОК 📚 ВСЕ УРОКИ | #статья

🌐 Beautify – расширение для VS Code, которое облегчает чтение кода

Это расширение форматирует код и делает его более чистым с помощью де-минимизации и создания подходящих отступов в разметке. Beautify работает с JavaScript, HTML, CSS, Sass и JSON.

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

Beautify входит в число 20 самых популярных разрешений для VS Code и имеет более 5 млн скачиваний.

Сайтодел | #расширение #vscode

⌨ Cлияние веток в Git

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

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

git branch new_branch

Теперь перейдем на ветку master:

git checkout master

Выполним слияние:

git merge new_branch

Готово! Мы выполнили мердж новой ветки в master. Тем не менее, следует отличать вливание новой ветки в основную и вливание основной ветки в новую.

Сайтодел | #код #git

🌐 Vim – легендарный редактор кода

Перед вами мощный текстовый редактор с огромными возможностями настройки. Vim был создан на основе редактора Vi 1976 года. Редактор поддерживает большинство языков программирования, имеет множество полезных плагинов, многооконный режим работы, подсветку кода, а также функцию сравнения файлов.

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

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

Сайтодел | #редактор #код

🌐 Web Developer Checklist – расширение для проверки SEO

Это расширение помогает веб-разработчику узнать, соответствует ли сайт основным принципам SEO. C помощью Web Developer Checklist можно легко и быстро подготовить сайт к запуску.

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

Web Developer Checklist показывает не только параметры SEO, но и проверяет качество кода HTML и CSS, безопасность подключения и неработающие ссылки. Расширение проверяет совместимость HTML5 и CSS3.

Сайтодел | #расширение #разработка #seo

⌨ Стрелочные функции в Javascript

В современном JavaScript появился сокращенный вариант - стрелочные функции. Они делают синтаксис проще и короче. Само обозначение выглядит интуитивно понятнее и занимает меньше места по сравнению с более традиционным вариантом.

Структура стрелочной функции выглядит следующим образом:

(argument1, argument2, ... argumentN) => { // тело функции}

Это отличается от обычного представления функции, где сначала пишется слово function:

function showMessage() {
alert( 'Всем привет!' );
}

На картинке показаны функции, которые открывают и закрывают модальное окно.

Сайтодел | #код #javascript