Senior Frontend - javascript, html, css
10.3K members
226 photos
63 videos
115 links
Senior Front - канал для frontend программистов, практические задачки, проверки знаний, интересные статьи
Условия рекламы - https://clck.ru/QSivo
IT Alliance - https://clck.ru/QSab8

Контакты: @seniorFrontPromo, @maria_seniorfront
Download Telegram
to view and join the conversation
This media is not supported in your browser
VIEW IN TELEGRAM
Шар с жидкостью

Анимация в виде градиентной жидкости, перемещающейся внутри шара, на SVG. Интересным применением было бы сделать из этого шара loader, который заполняется по мере загрузки страницы.
Функции в TypeScript

В TypeScript можно передавать тип аргумента функций и указывать тип возвращаемого значения. Как это выглядит:

function printState(state: State): void {
console.log(`The song state is ${state}`)
}

function add(num1: number, num2: number): number {
return num1 + num2
}

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

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

add(2, 5)
add(1) // "Error to few parameters"
add(5, '2') // "Error the second argument must be type number"
Какое значение свойства color у элемента span?
Anonymous Quiz
61%
yellow
7%
red
19%
green
13%
black
Опциональные и Read-only свойства в TypeScript

При реализации интерфейса можно реализовывать не все его свойства. Чтобы сделать свойство необязательным, после имени свойства нужно поставить оператор ?. Пример:
interface Person{
name: string
age?: number
}
const person: Person = {name: 'Frank', age: 28}
const person2: Person = {name: 'Gabriel'}
В этом коде создаются два свойства: обычное и необязательное. Теперь при реализации интерфейса в переменной person2 исключение вызываться не будет.

Read-only свойства используются тогда, когда нужно изменять свойство только в самом начале, при реализации, а потом свойство становится доступным только для чтения. Для этого используйте ключевое слово readonly.

interface Person{
name: string
readonly id: number
age?: number
}
const person: Person = {name: 'Gabriel', id: 3127831827}
person.id = 200 // Изменить значение уже не получится
This media is not supported in your browser
VIEW IN TELEGRAM
Кактус

Выполнен в виде svg картинок, анимированных на JS.
Для того, чтобы увидеть анимацию, нажмите на кактус.
This media is not supported in your browser
VIEW IN TELEGRAM
Красивый фон

Автор использует CSS свойство clip-path для создания изменяющегося фона. При наведении на разные части изображения применяются разные свойства
Какое значение примет result?
Anonymous Quiz
19%
[]
8%
toString
31%
[object Object]
14%
[Object]
27%
[object Array]
🔥 Новости от команды Лектрума🔥

Конец октября будет интересным и полезным об этом нам рассказали в Лектруме. Ребята будут проводить два онлайн-ивента в 19:30 по Киеву и 20:30 по Москве.

Для всех бесплатно! А кто хочет всего и побольше есть пакет «Расширенный» и там профита в разы больше. 💪

Выбирайте интересную тему и нажимайте на кнопки для регистрации ⬇️⬇️⬇️

💥 27 октября вебинар «Знакомство с профессией JavaScript⁠-⁠разработчика»

💥 28 октября воркшоп «React на практике: киноафиша»

Лектрум всегда готов прокачать на новый уровень!
React props

Props представляет коллекцию значений, которые ассоциированы с компонентом. Эти значения позволяют создавать динамические компоненты, которые не зависят от жестко закодированных статических данных.

Функциональный подход:
function Hello(props) {
return <div>
<p>Имя: {props.name}</p>
<p>Возраст: {props.age}</p>
</div>;
}

props, который передается в функцию компонента, инкапсулирует свойства объекта. В частности, свойство name и age. При рендеринге мы можем создать набор компонентов Hello, но передать в них разные данные для name и age. И таким образом, получим набор однотипной разметки html, наполненной разными данными.

Используем компонент Hello в классовом виде:
class Hello extends React.Component {
render() {
return <div>
<p>Имя: {this.props.name}</p>
<p>Возраст: {this.props.age}</p>
</div>;
}
}
ReactDOM.render(
<Hello name="Tom" age="33" />,
document.getElementById("app")
)
При рендеринге React передает значения атрибутов в виде единого объекта "props". То есть значение из атрибута name="Tom" перейдет в свойство props.name.
This media is not supported in your browser
VIEW IN TELEGRAM
Анимированные кнопки

С помощью CSS свойств transform и animation автор создает анимированные оригинальные кнопки социальных сетей
This media is not supported in your browser
VIEW IN TELEGRAM
Переключатель-клубок

Выполнен на canvas и JavaScript с использованием CreateJS.
Модификаторы доступа в TypeScript

Модификаторы доступа позволяют сокрыть состояние объекта от внешнего доступа и управлять доступом к этому состоянию. В TypeScript три модификатора: public, protected и private.

Если к свойствам и функциям классов не применяется модификатор, то такие свойства и функции расцениваются как будто они определены с модификатором public. Элементы с этим модификатором доступны отовсюду без каких-либо ограничений.
class User {
public name: string;
public year: number;
}

Если же к свойствам и методам применяется модификатор private, то к ним нельзя будет обратиться извне при создании объекта данного класса.
class User {
private _name: string;
private _year: number;
}
Cвойства _name и _year используются с модификатором private, поэтому мы не можем их использовать вне класса

Модификатор protected во многом аналогичен private - свойства и методы с данным модификатором не видны из вне, но к ним можно обратиться из классов-наследников.
Какое значение примет result?
Anonymous Quiz
11%
ReferenceError
3%
"null"
17%
"number"
55%
"function"
13%
"undefined"
This media is not supported in your browser
VIEW IN TELEGRAM
Хомяк

Выполнен без использования JS. Автор использует много различных анимаций для оживления картинки
Напишите функцию, которая принимает отсортированный список чисел и возвращает список, в котором есть отдельные числа, а также диапазоны чисел, в которых первое число отделено от второго знаком "-". Диапазон должен включать в себя как минимум 3 числа. Пример диапазона: ("12, 13, 15-17")

Пример:
([-6, -3, -2, -1, 0, 1, 3, 4, 5, 7, 8, 9, 10, 11, 14, 15, 17, 18, 19, 20]);

// returns
"-6,-3-1,3-5,7-11,14,15,17-20"
Ты тоже сможешь написать свой сервис доставки еды на JavaScript 🍕

И это гораздо проще, чем ты думаешь!

Присоединяйся и сделай свой Delivery Food на чистом JS всего за 4 дня.

Что тебя ждет

1 День
— Познакомимся с переменными и запишем в них полученные элементы со страницы, с которыми будем взаимодействовать.
— Реализуем авторизацию на нашем сайте (без обработки сервера)
— Научимся работать с функциями и хвостовой рекурсией

2 День
— Реализуем рендеринг карточек магазинов и товаров с помощью JavaScript
— Познакомимся с интерполяцией, современными методами вставки элементов и верстки на страницу

3 День
— Напишем функцию запроса данных, познакомимся с технологиями fetch и async/await
— Напишем функционал который позволит рендерить карточки с информацией с сервера
— Поработаем с дата атрибутами и деструктуризацией

4 День
— Сделаем корзину товаров
— Реализуем добавление продуктов в корзину, рендер списка и общую стоимость + возможность менять количество товаров в корзине
— Разберемся с методом поиска в массиве и методом удаление из массива данных

Жми на ссылку и получи приглашение:
https://telegram.me/gloacademy_bot?start=5f9359a54514dc000e962cff
This media is not supported in your browser
VIEW IN TELEGRAM
Кубы

Бесконечно-появляющиеся кубы на чистом JS и canvas.