34421
FullStack-материалы от Senior-разработчика для WEB-специалистов Сотрудничество: @CodingLead Разработка сайтов любой сложности 👨🏻💻
⌨ Простые типы данных в JavaScript
В языке JavaScript переменная может принимать значения разных типов.
К простым типам относятся:
◽ Строковый (String) – последовательность символов, стоящая в кавычках. Строковые символы могут быть не только буквами и прочими символами, но и цифрами, поэтому следует отличать их от числовых данных.let a = prompt (“Введите число”);
Строковый тип можно превратить в числовой, поставив в начале плюс:let a = +prompt (“Введите число”);
◽ Числовой (Number) – целые или дробные числа.Console.log (12345);
◽ Логический, или булевый (Boolean) – принимают занчения true/false.let test = true;
if (test === true) {
alert('верно');
} else {
alert('неверно');
}
◽ Пустой (Null) – не имеет значения.
◽ Неопределенный (Undefined) – значение не присвоено.
Узнать тип данных можно при помощи оператора typeof:Print (typeof 123)
Print (typeof 't.me/sitodel')
Сайтодел | #код #javascript
⌨ Hover-эффект – изменение цвета
Сегодня мы рассмотрим, как сделать интересный hover-эффект, когда при наведении курсора объект становится зеленым.
Для начала создадим блок div с классом box, внутри которого будет текст. Зададим CSS-стили этому блоку:.box {
background-color:white;
width: 100px;
height: 80px;
font-family: Roboto;
font-weight:700;
text-align:center;
}
Затем создадим собственно сам hover-эффект:
.box:hover {
background-color: #53ea93;
}
Готово! Теперь при наведении мышки на объект цвет его фона будет меняться на светло-зеленый оттенок.
Сайтодел | #код #css
👨💻 [УРОК 67] SVG.js - библиотека для работы с SVG-графикой
Статья покажет вам, как работать с библиотекой JavaScript SVG.js. Вы узнаете о плюсах использования этой библиотеке в своей практике и узнаете, как ее установить. В уроке вы найдете информацию о создании простых геометрических фигур при помощи SVG.js.
Вы познакомитесь с функционалом библиотеки и с ее основными плагинами. В статье также указаны браузеры, которые поддерживают SVG.js.
📘 ИЗУЧИТЬ УРОК 📚 ВСЕ УРОКИ | #статья
🌐 JavaScript Fight Club – тренажер для навыков кода
В этой игре вы потренируете навыки написания кода на JavaScript. По сюжету сражаются две армии – синяя и красная. Задача игрока – управлять персонажами и выполнять действия с помощью JavaScript.
Каждый день код будет извлекаться из вашего репозитория hero-starter на Github. Как только вы настроите свой репозиторий, подключите свою учетную запись Github к игре, чтобы ввести персонажа в следующую битву.
На официальном сайте можно увидеть текущие сражения и список наиболее успешных игроков за последнее время. Изучать JavaScript в игровой форме – это захватывающе и наглядно!
Сайтодел | #игра #javascript
🌐 Avocode – удобный инструмент для работы с макетом сайта
Avocode – альтернатива программам вроде Photoshop, Sketch, Zeplin, которые используют веб-дизайнеры для создания макетов. Этот инструмент очень удобен для разработчика, поскольку он поддерживает большинство форматов безо всяких плагинов. В Avocode также встроена частичная интеграция с Figma.
После того, как дизайнер завершает свою работу, макет превращается в спецификацию с CSS-стилями и изображениями. Avocode помогает дизайнерам и разработчикам работать в команде и является связующим звеном между командами дизайна и разработки.
Программа существует в виде сайта и приложения для ПК и предусматривает пробный бесплатный период. Интерфейс у Avocode простой и интуитивно понятный.
Сайтодел | #инструмент #макет
👨💻 [УРОК 66] Backbone.js – фреймворк для разработки сложных веб-приложений
Статья покажет вам, как работать с фреймворком backbone.js. Вы узнаете о преимуществах и недостатках библиотеки, научитесь устанавливать backbone.js и разберетесь в его структуре.
Вы прочтете о моделях и коллекциях backbone.js и посмотрите на примеры кода, где они создаются.
📘 ИЗУЧИТЬ УРОК 📚 ВСЕ УРОКИ | #статья
⌨ Свойства margin и padding в CSS: отличия
Оба свойства используются для создания отступов. Margin и padding можно задать как для всех сторон сразу, так и по отдельности. Например, свойство margin для верхнего края будет записываться как margin-top, для нижнего края - margin-bottom, для левого и правого краев свойство выставляется как margin-left и margin-right.
То же самое правило действует и для padding. Отличие состоит в том, что margin определяет внешние отступы, а padding – внутренние.
Разберем пример. Eсть кнопка «отправить». Между текстом и границей кнопки есть внутренние отступы (padding). Снаружи, за пределами кнопки, тоже есть отступы (margin). Например, над кнопкой находится картинка. Margin-top определяет расстояние от кнопки до картинки.
Пусть внутренний отступ слева и справа будет равен 20px, сверху и снизу – 10рх. Внешний отступ по бокам равен 200рх, сверху – 100рх, снизу – 300рх. Код показан на картинке. Результат – мы создали кнопку с отступами margin и padding.
Сайтодел | #код #css
⌨ Стрелочные функции в Javascript
В современном JavaScript появился сокращенный вариант - стрелочные функции. Они делают синтаксис проще и короче. Само обозначение выглядит интуитивно понятнее и занимает меньше места по сравнению с более традиционным вариантом.
Структура стрелочной функции выглядит следующим образом:
(argument1, argument2, ... argumentN) => { // тело функции}
Это отличается от обычного представления функции, где сначала пишется слово function:function showMessage() {
alert( 'Всем привет!' );
}
На картинке показаны функции, которые открывают и закрывают модальное окно.
Сайтодел | #код #javascript
🌐 Vim – легендарный редактор кода
Перед вами мощный текстовый редактор с огромными возможностями настройки. Vim был создан на основе редактора Vi 1976 года. Редактор поддерживает большинство языков программирования, имеет множество полезных плагинов, многооконный режим работы, подсветку кода, а также функцию сравнения файлов.
Vim имеет достаточно сложный интерфейс, понятный только разработчикам. Для новичков предусмотрены инструкции по пользованию программой.
В редакторе есть несколько десятков горячих клавиш, которые позволяют работать практически без мыши. При таком способе работы действия выполняются молниеносно.
Сайтодел | #редактор #код
🌐 Beautify – расширение для VS Code, которое облегчает чтение кода
Это расширение форматирует код и делает его более чистым с помощью де-минимизации и создания подходящих отступов в разметке. Beautify работает с JavaScript, HTML, CSS, Sass и JSON.
Расширение поддерживает глубокую настройку. Например, можно задать размеры отступов и указать, нужен ли перевод строки в конце файла. Beautify подойдет для тех, кто работает с разными языками программирования, ведь для каждого из них можно применять отдельные настройки.
Beautify входит в число 20 самых популярных разрешений для VS Code и имеет более 5 млн скачиваний.
Сайтодел | #расширение #vscode
⌨ Cвойство "justify-content" в CSS
Отвечает за выравнивание элементов вдоль главной оси у флекс элементов. Применяется в паре со свойством "display: flex".flex-start – элементы прижаты к началу контейнера по главной оси.flex-end – содержимое находится в конце контейнера по главной оси.center – выравнивание по центру.space-between – элементы равномерно распределены по контейнеру. Первый элемент прижат к началу, а второй – к концу контейнера.space-around – содержимое располагается почти так же, как и при space-between, только имеются отступы от начала и конца контейнера.
Сайтодел | #код #css
Ember.js - фреймворк для амбициозных разработчиков
Это бесплатный фреймворк JavaScript для разработки веб-приложений. Он позволяет создавать многофункциональные интерфейсы, которые подходят для разных устройств.
Ember.js - это MVC-фреймворк, который поддерживает новые стандарты и функции JavaScript. Работает исключительно на фронтенде. Он многофункционален: почти все, что нужно для создания приложения, уже содержится в коробке.
Перезагрузка страниц в Ember.js интерактивная, за счет чего процесс разработки становится быстрее. При реализации модели создаются URL-маршруты, благодаря чему полностью поддерживаются глубокие ссылки.
Сайтодел | #фреймворк #javascript
⌨️ Базовый HTML шаблонDOCTYPE — кодировка документа. В данном случае html.html — основной контейнер документа с английским в качестве параметра языка.meta — метатеги для браузеров и поисковых систем. Указана кодировка документа utf-8 и стандартный viewport для определения размеров страницы.title — тег заголовка страницы.body — тело документа страницы, которое видит пользователь.
Сайтодел | #сниппет #html
Rallax.js - библиотека для создания parallax-эффектов
Эта библиотека поможет вам быстро начать создавать плавные фоновые parallax-эффекты. Она написана на чистом JavaScript без зависимостей, проста в использовании и подойдёт для изучения любому желающему.
Rallax предлагает отличный API, с помощью которого можно создавать как и простые эффекты, так и нестандартные. Библиотека хорошо кастомизируется - например можно в процессе регулировать скорость изменения параллакса. Также эффекты будут адаптированы под мобильные устройства.
Сайтодел | #библиотека #javascript
Haml - HTML-препроцессор и шаблонизатор
Это упрощенный язык разметки, который потом может быть скомпилирован в HTML. Он поможет вам писать более красивую и лаконичную HTML-разметку для ваших проектов.
Haml предлагает не только упрощенный синтаксис, но и новые языковые конструкции - циклы, операторы и другое. С Haml вы сможете создавать уникальные проекты, а также ускорить процесс разработки веб-сайтов и приложений.
Сайтодел | #инструмент #html
🌐 Premonish - библиотека JavaScript для предсказывания действий пользователя
Эта библиотека чувствительна к движениям курсора. Она помогает понять, с какими элементами пользователь собирается взаимодействовать.
Premonish позволяет внедрять в сайт различные триггеры анимации, основываясь на поведении пользователя. С помощью библиотеки можно определить, какие фрагменты сайта представят наибольший интерес для посетителя и в соответствии с этим расставлять акценты.
Premonish помогает понять, где разместить призывы к действию, учитывая движение курсора по экрану. Таким образом можно анализировать пользовательские интересы, чтобы сделать сайт более удобным и продающим.
Сайтодел | #библиотека #javascript
🌐 CodeStream – расширение для комментирования кода
Расширение представляет собой целую платформу для разработчиков, где можно общаться в режиме реального времени, не выходя из привычной рабочей среды.
CodeStream дает возможность обмениваться комментариями с коллегами, задавать вопросы в процессе создания кода и быстро получать ответы. Расширение поддерживает IDE, поэтому решать проблемы можно не выходя из редактора кода.
Чтобы начать использовать CodeStream, выберите нужный фрагмент кода и напечатайте комментарий или вопрос в появившемся окне. Обсуждения также можно перенести в Slack.
Сайтодел | #расширение #код
⌨ Как вставить картинку с помощью HTML и CSS?
Есть два способа разместить картинку на сайте. Можно использовать тег <img> в HTML-документе, а можно применить свойство background-image в CSS-файле. Нужно запомнить, что расширения файлов для первого и второго способа разные!<img src="img/picture.png" alt="picture" class="picture">
У тега <img> есть обязательные атрибуты: src показывает путь к картинке, alt показывает альтернативный текст в случае, если картинка не загрузится. По желанию тегу <img> можно задать класс.
div {
background-image: url(img/picture.png);
}
CSS-свойство background-image находит путь к картинке с помощью указания url. Если картинка является важной частью контента, используется тег <img>. Если же она используется как фоновое изображение, применяют свойство background-image.
Сайтодел | #код #html #css
⌨ JavaScript: преобразование строки в число
Превращать строчные данные в числовые бывает актуально, когда пользователь вводит числа во всплывающем окне. Простейший пример – создание калькулятора на JavaScript. Человек вводит одно число, затем – второе и получает сумму. Для этого мы пишем: let a = prompt (“Введите число”);
Для того, чтобы преобразовать полученные данные в числовой формат, применим выражение:let a = prompt (“Введите число”);
a = parseInt (a);
Такой способ возможен, но он довольно длинный. Есть и другой вариант преобразования:let a = +prompt (“Введите число”);
Мы просто добавили знак + перед prompt.
Сайтодел | #код #javascript
🌐 Fontanello – расширение Chrome для работы со шрифтами
Это расширение браузера позволяет узнать параметры шрифта на любой странице. Просто щелкните правой кнопкой мышки по тексту и выберите Fontanello в выпадающем меню. Расширение покажет название шрифта, жирность, размер, цвет и другие реже используемые CSS-свойства.
Fontanello полезен как для разработчиков, так и для дизайнеров. С помощью этого расширения дизайнер может добавлять себе в «копилку» интересные шрифты, на которые он случайно наткнулся в интернете.
Для веб-разработчиков Fontanello необходим, когда нужно сверстать сайт, а готового макета нет и нужно найти какой-то шрифт, похожий на образцы.
Сайтодел | #расширение #шрифты
🌐 Flexbox Froggy – игра для изучения CSS Flexbox
Эта игра поможет закрепить изучение свойств flexbox на наглядных примерах. С помощью Flexbox Froggy вы научитесь позиционировать элементы на веб-странице. Задача – с помощью кода поместить лягушонка Фрогги на лилию.
В игре 24 уровня, каждый из которых сложнее предыдущего. Для всех свойств flexbox можно посмотреть значения и выбрать подходящие. На продвинутых уровнях появляется много лягушат и лилий разных цветов.
Игра подходит для начинающих веб-разработчиков, которым нужно визуализировать свойства flexbox, чтобы понять их работу. Игра абсолютно бесплатная и проходится довольно легко.
Сайтодел | #код #css
🌐 D3.js – библиотека Javascript для визуализации данных
D3.js дает большой выбор для визуализации данных и позволяет добавить интерактивность любой сложности. В библиотеке есть несколько десятков модулей, которые помогают строить фигуры, работать с элементами сайта, форматировать и масштабировать данные, а также визуализировать математические функции в виде графиков.
D3.js может создать геометрическую фигуру, добавить ей цвет. В отличие от других библиотек в этой не используется jQuery для управления структурой DOM.
Библиотека использует формат SVG для работы с векторной графикой. Он позволяет изменять форму объектов, позиционировать их и даже функционирует вместе с CSS.
Сайтодел | #библиотека #javascript
🌐 Web Developer Checklist – расширение для проверки SEO
Это расширение помогает веб-разработчику узнать, соответствует ли сайт основным принципам SEO. C помощью Web Developer Checklist можно легко и быстро подготовить сайт к запуску.
Результаты показываются пользователю в виде чек-листа, где отображаются выполненные и невыполненные пункты. По каждому из них даются рекомендации, а ошибки можно сразу исправить.
Web Developer Checklist показывает не только параметры SEO, но и проверяет качество кода HTML и CSS, безопасность подключения и неработающие ссылки. Расширение проверяет совместимость HTML5 и CSS3.
Сайтодел | #расширение #разработка #seo
⌨ Cлияние веток в Git
При слиянии двух веток в git происходит перенос данных из одной ветки в другую. Технически отправлять код можно на любые ветки, но обычно его сливают в master, то есть главную ветку.
Для начала создадим новую ветку под названием new_branch, которую будем сливать с основной:git branch new_branch
Теперь перейдем на ветку master:git checkout master
Выполним слияние:git merge new_branch
Готово! Мы выполнили мердж новой ветки в master. Тем не менее, следует отличать вливание новой ветки в основную и вливание основной ветки в новую.
Сайтодел | #код #git
👨💻 [УРОК 65] Pixel Perfect - расширение Chrome для качественной верстки
Статья покажет вам, как установить и работать с расширением Pixel Perfect для браузера Chrome и как избежать распространенных ошибок при работе с ним. После прочтения этой статьи вы сможете верстать сайты с точностью до пикселей и научитесь сверять макет дизайнера с версткой при помощи Pixel Perfect.
📘 ИЗУЧИТЬ УРОК 📚 ВСЕ УРОКИ | #статья
🌐 Git Live – расширение VS Code для командной работы
Это расширение позволяет работать над одним проектом в команде. В редакторе кода появляется вкладка с коллегами. Можно посмотреть, кто из них онлайн, над какими проектами и в каких ветках они работают. Изменения в коде отражаются на экране в режиме реального времени.
В Git Live можно делать видеозвонки и демонстрировать экран с помощью LiveShare. Очень удобно, когда есть возможность позвонить коллегам прямо из VS Code.
Сервис Git Live был разработан студентом Anish Athalye из Массачусетского университета. Целью проекта была возможность видеть активности разработчиков во всем мире.
Сайтодел | #расширение #vscode
Selenium - инструмент автоматизации действий на сайтах
Обычно его применяют для тестирования веб-приложений. Но так же его используют для задач автоматизации действий в браузерах - лайки, комменты, автопостинг либо просто просмотры.
Selenium поддерживается большинством веб-браузеров(Chrome, Firefox, Edge, IE, Safari, Opera), а сценарии на нем можно писать почти на всех популярных языках программирования.
Что интересно - его можно использовать даже с браузерами, у которых нет графического интерфейса. Например "HTMLUnit" и "PhantomJS".
Сайтодел | #инструмент
Flask - фреймворк для создания сайтов на Python
Это один из самых популярных микрофреймворков в среде разработчиков Python. Устанавливается посредством пакетного менеджера PyPI, а совместим как с Python 2.7, так и Python 3.3 и старшими модели.
Последняя версия 2.0 вышла 16 мая 2021 года. В его основе - модульная структура. Включает в себя встроенный сервер, дебагер, шаблонизатор Jinja2 и другие необходимые технологии для минимального сайта.
Сайтодел | #фреймворк #python
Heroku - облачная платформа для хранения веб-приложений
Это отличная платформа для хранения ваших проектов в облаке. Небольшие проекты можно хранить бесплатно. Главное преимущество этой платформы в том, что платформа берет на себя все вопросы на сервере. Это позволяет вам сконцентрироваться только на своём проекте.
Heroku поддерживает множество языков - Ruby, Java, Node.js, Scala, Clojure, Python и PHP. Платформа содержит в себе огромное количество инструментов мониторинга и анализа. Вы можете управлять кешированием, определять производительность вашего приложения, оформлять рассылки и многое другое.
Сайтодел | #сайт
Figma - инструмент для прототипирования веб-сайтов и приложений
Это один из самых популярных современных инструментов для создания прототипа веб-сайта или приложения. С помощью этого инструмента вы сможете быстро собрать макет сайта, приложения и даже преобразовать его в HTML-код.
Figma предоставляет интуитивно понятный интерфейс, с которым очень просто работать. Кроме того, в состав этого инструмента входит огромное количество плагинов на самые разные темы - от создания анимаций до просмотра CSS-кода макета.
Сайтодел | #инструмент