⚡️ Промисы + async/await ⚡️

🟢 В JavaScript можно отложить выполнение определенных участков кода на неопределенное время, например, с помощью функции setTimeout(), прослушивателя событий или сетевых запросов с использованием fetch API.

🟢 Промисы представляют собой способ делать асинхронный код в JavaScript предсказуемым. Они позволяют разрешать код, созданный при помощи async. Успешное выполнение кода обрабатывается через метод .then(), а ошибки - через метод .catch().

🟢 Async/await представляет собой улучшенный синтаксис для работы с промисами, который позволяет делать асинхронный код выглядеть как синхронный.

// Асинхронный код; 'done' журналирован после данных о положении, несмотря на то что 'done' предполагается
    // исполнить в коде позже
    navigator.geolocation.getCurrentPosition(position => {
      console.log(position);
    }, error => {
      console.error(error);
    });
    console.log("done");

    // Асинхронный код обработан после промиса; мы получаем желаемый результат — данные о положении
    // журналированы, затем журналировано 'done'
    const promise = new Promise((resolve, reject) => {
      navigator.geolocation.getCurrentPosition(resolve, reject);
    });

    promise
      .then(position => console.log(position))
      .catch(error => console.error(error))
      .finally(() => console.log('done'));

    // Асинхронный код с async/await выглядит как синхронный, наиболее удобочитаемый способ 
    // работы с промисами
    async function getPosition() {
      // async/await работает только в функциях (пока)
        const result = await new Promise((resolve, reject) => {
      navigator.geolocation.getCurrentPosition(resolve, reject);
      });
        const position = await result;
        console.log(position);
        console.log('done');
    }

    getPosition();

CodeBase | Frontend | #js

🗣 Каждый программист должен знать ключевые концепции JavaScript, такие как типы данных, примитивные типы, стек вызовов, методы map, reduce, filter и многое другое.

➡️ Всего в репозитории 33 пункта, к каждому из которых есть множество статей и видеоматериалов.

➡️ Репозиторий составлен на русском языке.

🔗 Ссылка

CodeBase | Frontend | #js

Flexer - визуальный конфигуратор CSS Flexbox, который отлично подходит для начинающих для изучения и понимания работы flexbox.

🔗 Ссылка

CodeBase | Frontend | #resource

🗣Интерактивное описание планет Солнечной системы, созданное с использованием SCSS, а не JavaScript.

🔗 Ссылка

CodeBase | Frontend | #scss

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

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

🐱 GitHub
🔵 Сайт

CodeBase | Frontend | #react

⚡️ Создание сайта с крутой анимацией скролла ⚡️

🗣 Технологии: HTML, CSS, JS

Будет полезно новичкам, да и старичкам тоже.

🔗 Ссылка на урок

CodeBase | Frontend | #lesson #js

🖥 CSS Flexbox. Полный курс

В данном видеокурсе мы с вами рассмотрим технологию Flexbox. Flexible Box Layout Module (Flexbox) - представляет собой способ компоновки элементов, в основе лежит идея оси. Другими словами все элементы можно располагать вдоль основной и поперечной осей, или вертикально и горизонтально. Технология позволяет буквально в пару свойств создать гибкий лэйаут, или гибкие UI элементы.

➡️ Ссылка на курс

CodeBase | Frontend | #css

⚡️ One Page Love — это платформа, где собрано множество одностраничных сайтов и лендингов.

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

CodeBase | Frontend | #templates

⚡️ Крутой способ анимировать вашу навигацию на сайте ⚡️

🟢 Технологии: HTML, CSS, JS

🔗 Ссылка

CodeBase | Frontend | #animate #js

🖥 Flexbox Froggy - это игра, которая позволит на практике разобраться, как использовать свойства CSS flexbox для выравнивания элементов. Вы можете играть в игру онлайн и смотреть примеры кода для каждого уровня.

Годная вещь для новичков, которые хотят разобраться с флексами 🔥

CodeBase | Frontend | #css #ресурсы

⚡️ Создаем свою игру на JavaScript ⚡️

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

🔵 Конечно, иногда приходится обходить устаревшие решения, но преимущества языка перевешивают — на чистом JavaScript можно создать практически любую программу.

🔵 В этом гайде мы покажем, как написать 2D игру «Змейка». Однако, учтите, что этот гайд не предназначен для изучения JavaScript с нуля, поэтому вам понадобятся базовые знания.

🔵 Также потребуется знание HTML (включая HTML5 canvas) и CSS, хотя основное внимание будет уделено именно JavaScript.

🔗 Ссылка на код

CodeBase | Frontend | #pet #js

⚡️ Свойство mask ⚡️

➡️ Настройка маски в CSS позволяет установить изображение в качестве маски для элемента с использованием свойства mask.

При этом можно указать:

⏺ mask-clip — область распространения маски;

⏺ mask-size — размер маски;

⏺ mask-position — позиционирование маски относительно элемента;

⏺ mask-repeat — повторение маски;

⏺ mask-composite — операцию композиции для маски и других слоев;

⏺ mask-mode — ссылку на маску;

⏺ mask-origin — начало координат маски.

CodeBase | Frontend | #css

🔥 Space Journey - это космическое путешествие, созданное с помощью CSS и JavaScript.

🔗 Ссылка

CodeBase | Frontend | #js #animate

⚡️CAPTCHA генератор ⚡️

Система автоматической генерации случайных CAPTCHA с проверкой корректности введенного кода.

Технологии: HTML, CSS, JS

🔗 Ссылка

CodeBase | Frontend | #js

⚡️ React-animations ⚡️

React-animations — это библиотека, основанная на анимациях из animate.css. Она легко осваивается и предлагает большое количество анимаций.

React-animations совместима с любыми inline-style библиотеками, которые поддерживают определение ключевых кадров анимации через объекты, такими как Radium, Aphrodite или styled-components.

Теперь давайте разберём, как это работает на примере анимации подпрыгивания.

➡️ Для начала необходимо импортировать нужную анимацию из react-animations.

const Bounce = styled.div`animation: 2s ${keyframes`${bounce}} infinite;

➡️ После создания компонента нужно обернуть любой HTML-код или компонент для применения анимации.

<Bounce><h1>Hello Animation Bounce</h1></Bounce>

➡️ Пример:

import React, { Component } from 'react';
import styled, { keyframes } from 'styled-components';
import { bounce } from 'react-animations';
import './style.css';

const Bounce = styled.div`animation: 2s ${keyframes`${bounce}} infinite;

export default class ReactAnimations extends Component {
    render() {
        return (
            <Bounce><h1>Hello Animation Bounce</h1></Bounce>
        );
    }
}

Анимация успешно работает, она проста и легко настраивается.

Для использования анимации при прокрутке можно воспользоваться отличным решением — библиотекой react-animate-on-scroll.

CodeBase | Frontend | #react

⚡️ BLUEFISH IDE ⚡️

Bluefish — это многофункциональный редактор кода.

Обладает рядом полезных функций:

🔵 проверка орфографии с учётом специфики языков программирования

🔵 автодополнение кода

🔵 поддержка сниппетов

🔵 управление проектами

🔵 автоматическое сохранение.

💡 Этот редактор идеально подходит для веб-разработчиков, но не удовлетворит потребности дизайнеров, которым необходим веб-ориентированный или WYSIWYG-редактор.

CodeBase | Frontend | #ide