Коротко о вчерашних событиях с Facebook

CCS Практика и Исходники

📜 Практика по CSS:
https://vladilen.notion.site/CSS-f650a04f167346c9a75ed833e360ea4e

🔗 Исходники начала урока:
https://github.com/vladilen-courses/cv

🔗 Финальные иходники:
https://github.com/vladilen-courses/css

💥 Сайт в результате:
https://vladilen-courses.github.io/css/

Фреймворк для терминала

#useful

Недавно нам прислали ранний доступ до инструмента Fig.

Позволяет существенно упростить и улучшить работу с консолью.

Поддерживает такие инструменты, как: Git, npm, Docker, Kubernetes и другие

Получить ранний доступ можете на сайте

Посчитать слова

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

Примеры:
wordCount("hello there") => 2
wordCount("I'd like to say goodbye") => 6

Любимые фреймворки разработчиков на Jamstack в 2021 году

JAMstack – это современная архитектура веб-разработки, основанная на клиентском JavaScript, повторно используемых API и предварительно созданной разметке.

Читать далее: https://css-tricks.com/jamstack-developers-favorite-frameworks-of-2021/

#jamstack #frontend

On / Off Switch

Для создания этого переключателя автор использует возможности препроцессора SCSS. Анимации реализуются при помощи библиотеки gsap.

#scss

Responsive House

При изменении положения слайдера изменяются значения дата-атрибутов, которые влияют на отображаемый контент.

#responsive

console.trace();

Выводит трассировку стека в консоль.

function foo() {
function bar() {
console.trace();
}
bar();
}
foo();

В консоли отобразится следующая трассировка:

bar
foo
<anonymous>

#console #js

Лучшие практики Angular — знаете ли вы их?

5 советов для Angular разработчиков, чтобы писать код оптимально и красиво.

Читать статью

JavaScript Algorithms

Автор: Oleksii Trekhleb and Sophia Shoemaker
Год издания: 2019

#JavaScript #english

Сокращаем CSS-свойство background

background-color: #000;
background-image: url(images/bg.gif);
background-repeat: no-repeat;
background-position: left top;

можно сократить до одного объявления:

background: #000 url(images/bg.gif) no-repeat left top;

Сокращенная форма фактически эквивалентна приведенным выше полным свойствам плюс background-attachment: scroll.

#css

Функции transform в CSS

Небольшая подборка transform свойств в css для тех кто подзабыл, ну или не знал.

rotate(<угол>) — поворачивает элемент на заданный угол

scale(sx, sy) — изменяет масштаб элемента по горизонтали sx и вертикали sy

translate(tx, ty) — Сдвигает элемент на заданное значение по горизонтали tx и вертикали ty

skewX(<угол>) и skewY(<угол>) — Наклоняют элемент на заданный угол по вертикали и горизонтали соответственно

#css

О дивный новый Реакт 18! Что нас ждет?

Смотреть видос

Error Page

Здесь автор использует canvas и particlesJS для создания анимированных эффектов на странице.

Всплывающие подсказки в CSS

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

Сделать такую подсказку очень просто, даже без использования JavaScript. Самым простым решением будет прописать текст подсказки в data-атрибуте HTML-кода, например, data-tooltip="…". Теперь можно использовать CSS для отображения текста подсказки в функции attr()

Пример кода

.tooltip::after {
content: attr(data-tooltip);
/* styles... */
}

#css

Задача. Дан массив arr из N целых чисел, где значение arr[i] - находится в диапазоне [1, N].

Необходимо найти все целые числа в диапазоне [1, N], которые не входят в исходный массив.

Входные данные: N == arr.length, 1 <= N <= 10^5.

Вывод: список пропущенных элементов

Ответ

JavaScript Algorithms

Автор: Oleksii Trekhleb and Sophia Shoemaker
Год издания: 2019

#js #english

CSS Математика - это новый подход в адаптивной верстке?

На ютубе вышел клевый видос на тему математических функций CSS. Автор видео рассказывает о таких функциях как: calc, min, max, clamp и показывает как их применить на практике.

Смотреть...

Анимированные иконки, выполненные на чистом CSS без использования JavaScript.

#css #frontend