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

Пример кода:

class {
onCreate() {
this.state = { count:0 };
}
increment() {
this.state.count++;
}
}

<div.count>
${state.count}
</div>
<button.example-button on-click('increment')>
Click me!
</button>

#HTML #JavaScript

Sapiens — большая бесплатная библиотека иллюстраций людей для Вашего проекта с прекрасным инструментом кастомизации любой части тела и экспортом в SVG/PNG.

#Графика

PerfectPixel — расширение для Google Chrome, которое позволяет «наложить» на веб-страницу полупрозрачную сетку и сверять по ней заданные расстояния.

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

👨‍💻 P.S. Всех с днем программиста!

#Расширения #Chrome

Be1 - комплекс инструментов для продвижения сайтов. Среди них есть инструмент «Расширение семантического ядра», который позволяет ввести URL своего сайта, а также до 10 сайтов конкурентов. Инструмент покажет запросы, по которым ранжируются конкуренты. Результат с полученными запросами можно скачать в csv. 

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

🔥 Лучшее на канале за последнюю неделю

1) Gulp 4 - Актуальное и исчерпывающее руководство для самых маленьких.
2) Swiper - современный бесплатный мобильный сенсорный слайдер.
3) Eva Icons - это пакет из более чем 480 красиво оформленных иконок с открытым исходным кодом для пользовательского интерфейса.
4) Sapiens — большая бесплатная библиотека иллюстраций людей для Вашего проекта.
5) Editor X — новый веб-конструктор, который включает в себе передовые технологии для верстки и прототипирования.

Рекомендуйте наш канал, по возможности, друзьям. Всем успешной разработки!

#Лучшее

Идеи для проектов на JavaScript. Часть 2.

1. Приложение для прогноза погоды
При создании этого приложения, помимо обычного набора технологий, используется Dark Sky API — для сбора информации о погоде. Так что это отличная возможность научиться взаимодействовать с API.

2. Поиск книг
Приложение для поиска книги по запросу (название, автор и т. д.). Список книг отображается со всей информацией о них. Можно использовать Google Books API.

3. Карточная игра
Игра на время, в которой после клика по карточке, появляется изображение. Необходимо найти такую же картинку среди других карточек.

4. Список дел
Классическое приложение, где пользователь может записать все мысли, задачи и цели, чтобы не забыть.

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

#Статьи

Project Filter Tabs - простая реализация фильтрации контента по вкладкам на HTML и CSS без использования JavaScript.

#HTML #CSS

CSS Values ​​- это простое одностраничное веб-приложение (SPA), которое позволяет искать практически любое свойство CSS и получать простой список возможных значений.

#CSS

Фича 3. Гибкая настройка border-radius

При помощи свойства border-radius можно закруглять углы рамок. Однако, мало кому известно о возможности задавать значения закругления отдельно по оси X и Y.

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

.wrapper { border-radius: 30px 30px 30px 30px / 50px 50px 50px 50px; }

#Фичи #CSS

Spacedesk позволяет вам преобразовать iPad, старый ноутбук с Wi-Fi, или даже телефон во второй монитор для вашей основной машины.

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

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

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

Неоморфные элементы пользовательского интерфейса выглядят так, как будто они связаны с фоном, как если бы элементы выдавливались из фона или вставлялись в фон. Некоторые описывают их как «мягкий интерфейс» из-за того, как для создания эффекта используются мягкие тени.

#Статьи #CSS

Chakra UI - это простая, модульная и доступная библиотека компонентов, которая дает вам все строительные блоки, необходимые для создания ваших приложений React.

#React

Представим, что вы захотели поправить CSS прямо в браузере, но после этого пришлось перезапустить страницу. Все ваши наработки пропали, и приходится вносить изменения заново. Используйте User CSS, который будет сохранять ваши стили. Больше не нужно переживать по поводу того, что CSS исчезнет. Функциональность расширения позволит тестировать написанный CSS при переходе на другие страницы.

#Расширения #Chrome

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

1) Курс Bootstrap 5: полное руководство (шаг за шагом).
2) Создавайте новые и современные адаптивные веб-сайты.
3) Классификатор изображений с Django и React.
4) Современный JavaScript для React JS - ES6.

#Курсы

100 days css - испытайте себя и станьте экспертом CSS за 100 дней. Проявите творческий подход, представьте свой результат и проверьте, что создали другие.

#CSS

Heroku - бесплатное серверное решение для проектов. Если вы хотите сразу начать приложение, без большой настройки архитектуры, выберите Heroku.

Основные особенности:
- Облачная платформа (PAAS)
- Хорошая документация
- Имеет встроенные инструменты и архитектуру.
- Контроль над архитектурой при разработке приложения.
- Развертывание выполняется (автоматически через GitHub или вручную с помощью команд git или CLI).
- Не требует много времени.

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

Slide Sign In/Sign Up form - интересная реализация формы регистрации/авторизации с плавным анимированным переключением между ними в виде слайдера.

#HTML #CSS #JavaScript

Colorpoint - бесплатный инструмент для дизайнеров и разработчиков в виде красивых цветовых палитр.

Эта коллекция поможет вам получить творческую силу и выполнять свою работу лучше, эффективнее и просто ускорить вашу работу.

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

🔥 Лучшее на канале за последнюю неделю

1) Простая реализация фильтрации контента по вкладкам на HTML и CSS.
2) Spacedesk - утилита, которая позволяет вам преобразовать ваш гаджет во второй монитор для вашей основной машины.
3) Идеи для проектов на JavaScript. Часть 2.
4) Интересная реализация формы регистрации/авторизации с плавным анимированным переключением.
5) CSS Values - гайд по CSS свойствам.

Всем успешной разработки!

#Лучшее

npm – это менеджер пакетов, который входит в состав Node.js. В течение многих лет Node широко использовался разработчиками JavaScript для обмена инструментами, установки различных модулей и управления их зависимостями. Вот почему людям, работающим с Node.js, очень важно понять, что такое npm.

Эта утилита помогает в установке и удалении пакетов, управлении версиями и зависимостями, необходимыми для запуска проекта. Чтобы использовать npm, нужно сначала установить node.js, так как они связаны.

Убедитесь, что node.js и npm установлены, выполнив несколько простых команд. Это покажет Вашу версионность,

node -v
npm -v

#Статьи

Headroom.js - это легкий высокопроизводительный JS-плагин без зависимостей, который позволяет вам реагировать на прокрутку.

Таким образом Вы можете сделать фиксированную шапку на сайте. При прокрутке вниз она ускользает из поля зрения и возвращается обратно при прокрутке вверх.

#JavaScript