Frontend + Web

С этим тегом используют

IT Программирование Javascript IT юмор Веб-разработка Программист Web-программирование Сайт Дизайн Все

122 поста сначала свежее

DELETED

4 года назад

Примитивный аккордеон⁠⁠

Рассмотрим два варианта создания аккордеона на примере списка вопросов и ответов. Сделаем это через:

— JavaScript;

— Тег Details;

JavaScript

Создадим простую разметку:

<button class="question">What is question?</button>
<div class="answer">
Lorem ipsum dolor, sit amet consectetur adipisicing elit. Dolorem dicta blanditiis eum dolorum sit voluptatum impedit eius similique quasi obcaecati! Mollitia reprehenderit magni ex. Eaque modi corrupti placeat labore possimus.
</div>

И сразу же добавим стили:

.answer {
height: 0;
overflow: hidden;
}

.is-active + .answer {
height: auto;
}

Как все будет работать:

— В кнопке с классом question храним сам вопрос;

— В div с классом answer храним ответ, задаем ему нулевую высоту;

— При нажатии на кнопку присваиваем ей класс is-active;

— Раскрываем answer через соседний селектор.

Зададим добавление класса is-active через JavaScript:

// Находим кнопку с вопросом
const question = document.querySelector('.question');

// Добавляем слушатель на клик
question.addEventListener('click', ({ target }) => {
// Меняем состояние кнопки
target.classList.toggle('is-active');
});

Все, пара строк кода и аккордеон готов?

С одной стороны да, но данный вариант имеет один недостаток — ответ появляется «резко», без плавного раскрытия.

Связано это с тем, что height: auto; нельзя анимировать через transition, необходимо знать точное значение.

Что с этим делать — обсудим в следующей статье, а пока можете ознакомиться с полной версией кода в codepen.

Тег Details

Этот способ еще проще предыдущего:

<details>
<summary>How to create accordion without JavaScript?</summary>
Lorem ipsum dolor sit amet consectetur, adipisicing elit. Facilis id recusandae tempore nam placeat ratione accusantium maiores nobis velit, incidunt, hic, omnis dolorem possimus. Hic porro tenetur fugiat blanditiis iste.
</details>

Все, копипасть и в продакшен?

Есть ньюансы.

Во-первых, details имеет тот же недостаток, что и первый вариант — нельзя анимировать активное состояние аккордеона.

Во-вторых, отсутствует поддержка IE.

Во всех остальных случаях можно смело использовать, а если вам нравится как я копирую документацию, то можете еще раз сходить в codepen :)

Показать полностью

[моё] Аккордеон Спойлер Frontend Web IT Javascript HTML Текст

IPdoor

4 года назад

И ТУТ ОНИ⁠⁠

[моё] Javascript Программирование IT Frontend IT юмор Юмор Web Web-программирование

DELETED

4 года назад

Анимированный пузырь / SVG⁠⁠

Сегодня научимся создавать вот такие вещи без javascript и canvas:

Рисуем пузырь

— Заходим на figma.com и создаем новый файл;

— Выбираем Pen или жмем клавишу P.

Рисуем прямоугольник — жмем Done.

Удалим обводку и заполним прямоугольник веселым цветом.

Давайте наконец сделаем из квадрата то, что нам нужно.

Жмем кнопку Edit Object.

Теперь Bend Tool

Жмем на сторону квадрата. Должны появится вот такие точки:

Тянем одну из них вверх:

Как видим — фигура искривляется. На этом мои глубокие познания в figma и векторной графике кончаются. Поэтому просто проделываем подобный трюк для всех четырех точек.

Отлично, пузырь готов. Он будет нашей «стартовой» позицией.

Скопируем его и поставим рядом.

Снова жмем Edit Object — Bend Tool и немного меняем пузырь справа.

То что получилось — это состояние фигуры, к которой будет стремится изначальная:
start → finish → start → finish → ∞

Скачаем, то что получилось:

— Выделяем вектора;

— Выбираем svg как расширение;

— Жмем Export.

Скачиваем и распаковываем архив

Объедим два SVG в один анимированный

Откроем скачанные svg и создадим один новый:

Скопирую содержимое start в result:

В result.svg сделаю тег <path /> парным — <path></path>:

Удалю атрибуты width и height чтобы не мешались.

Во viewBox установлю максимально возможные значения высоты и ширины:

— в start.svg ширина = 363, а в finish.svg = 364. Беру 364;

— в start.svg высота = 302, а в finish.svg = 311. Беру 311.

Ключевой момент: анимировать будем с помощью тега animate.

Обратите внимание на поддержку браузеров!

Вкладываем его внутрь path:

Коротко по атрибутам:

— repeatCount — сколько раз произойдет анимация. Устанавливаем indefinite чтобы задать бесконечное число итераций;

— attributeName — имя атрибута, который будем анимировать. В нашем примере это d, где хранятся координаты фигуры;

— dur — длительность анимации.

Добавим еще один — values. Скопипастим в него значение атрибута d из текущего тега path:

Добавим в него же значение атрибута d из файла finish.svg:

Третьей строку копипастим из первой дабы замкнуть анимацию:

<animate repeatCount="indefinite" attributeName="d" dur="10s"
values="M314 46.0001C253 0 137 -28 52.9999 46.0001C-31.0001 120 -1.0002 202 52.9999 248C107 294 247 340 314 248C381 156 375 92.0001 314 46.0001Z;
M302.348 71.5969C209 -48 69.1956 6.19389 41.3478 71.5969C13.5 137 -35.5 223 41.3478 273.597C118.196 324.194 233.195 322.694 302.348 273.597C371.5 224.5 395.695 191.194 302.348 71.5969Z;
M314 46.0001C253 0 137 -28 52.9999 46.0001C-31.0001 120 -1.0002 202 52.9999 248C107 294 247 340 314 248C381 156 375 92.0001 314 46.0001Z;"></animate>

Результат:

Как выглядит вы можете посмотреть в самом начале статьи.

Сюда же я скину сам svg:
<svg viewBox="0 0 364 311" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M314 46.0001C253 0 137 -28 52.9999 46.0001C-31.0001 120 -1.0002 202 52.9999 248C107 294 247 340 314 248C381 156 375 92.0001 314 46.0001Z" fill="#FFCC00">
<animate repeatCount="indefinite" attributeName="d" dur="10s"
values="M314 46.0001C253 0 137 -28 52.9999 46.0001C-31.0001 120 -1.0002 202 52.9999 248C107 294 247 340 314 248C381 156 375 92.0001 314 46.0001Z;
M302.348 71.5969C209 -48 69.1956 6.19389 41.3478 71.5969C13.5 137 -35.5 223 41.3478 273.597C118.196 324.194 233.195 322.694 302.348 273.597C371.5 224.5 395.695 191.194 302.348 71.5969Z;
M314 46.0001C253 0 137 -28 52.9999 46.0001C-31.0001 120 -1.0002 202 52.9999 248C107 294 247 340 314 248C381 156 375 92.0001 314 46.0001Z;"></animate>
</path>
</svg>

И codepen, где можно наглядней с ним ознакомится.

Показать полностью 18

[моё] Svg Animated Frontend IT Web Анимация Верстка Web-программирование Гифка Длиннопост

TheGodRA

5 лет назад

Web-технологии

Всем привет. Начал изучать программирование и тут встал вопрос, frontend или backend? Понятие backend и что от него требуется я сразу понял. А вот понять frontend я не могу. Я понимаю это то, что мы видим с вами - картинки, буквы, кнопки итд. Но вот вопрос, если я начну изучать front-end, то нужно ли мне так же быть креативным в творчестве, дизайне, а также изучать иллюстрации и Фотошоп? Или фронтенд это чисто кто видит сайт под уже готовый шаблон сайта? Объясните мне пожалуйста. Просто не могу понять куда идти, тк творчески я не сильно развит, по мне как лучше это циферки. Всем спасибо за ответ

Web Web-программирование Frontend Backend Программирование Текст

DELETED

5 лет назад

Ручная оптимизация изображений⁠⁠

Если вы хотите поднять значение Google PageSpeed Tools, то 80% времени вам придется заниматься оптимизацией изображений.

I. Squoosh

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

Ручная оптимизация изображений Svg, Оптимизация, JPEG, Png, Web, IT, Frontend, Оптимизация сайтов, Длиннопост

II. TinyPNG

У tinypng есть API, плагины для фотошопа и модули для разных CMS, но речь пойдет о сайте.

В бесплатном тарифе есть возможность одновременно загружать не более 20 изображений. И если вам не нужно пережимать сотни картинок, то можете воспользоваться этим сервисом. Соотношение: Качество → Размер очень хорошее.

III. Jpegoptim & OptiPNG

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

Jpegoptim:

jpegoptim *.jp*g

Optipng:

optipng *.png

Для всех файлов всех подпапок можно делать вот так:

find -type f -name "*.jpg" -exec jpegoptim --strip-all {} \; ; find -type f -name "*.png" -exec optipng {} \;

Если у вас больше 1000 файлов — этот вариант вам подойдет. По крайней мере с него можно начать.

IV. SVGO

Векторные изображения тоже нуждаются в оптимизации. И лучшего инструмента чем svgo я не знаю.

svgo --disable='removeViewBox' --enable='removeDimensions' ./

V. SVGOMG

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

Показать полностью 3

Svg Оптимизация JPEG Png Web IT Frontend Оптимизация сайтов Длиннопост

STINGRAY.DEVELOP

5 лет назад

Во все тяжкие: Веб-разработчик с нуля. 14 месяцев⁠⁠

Цель — Senior Frontend Developer.

Язык: JavaScript / TypeScript.

Возраст: 29 лет.

Работа (настоящее время): Junior Frontend Developer в компании "Корус Консалтинг СНГ".

Локация: г. Санкт-Петербург.

Привет! Как дела? Я смотрю тебя возмутил мой предыдущий пост. Ну да ладно, не серчай. Просто на самом деле не было никаких изменений, никаких новостей. Новости должны были быть на следующий день, но перевирать я не хотел.

Какие новости должны были быть на следующий день? Я к тому времени закончил 10-ти дневную стажировку в боевом проекте компании Корус, прошел аттестацию и ждал ответа - берут меня в компанию или не берут.

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

Я уже месяц работаю над довольно непростым и большим проектом. Стек: TypeScript, React на хуках, Redux, Saga. Первое время я вешался, так как мы на учебе мало времени уделяли реакту и сопутствующим технологиям. Еще и typescript... Я смотрел на папки в проекте, потом на то, что внутри и мне хотелось плакать. Плакать от того, что я вообще не понимал что происходит. Реакт вроде понятен, TypeScript тоже. А в целом - ничего не понятно. Десятки файлов, все раскидано, десятки импортов, экспортов. Вспоминал проект американской компании, о котором писал раньше. В общем весело.

Сейчас уже в структуре разобрался, все понятно, что за что отвечает, но все равно некоторые таски еще делаю долго из за сложности технологий. Да, сложно. Сложно еще от того, что я не успел поработать на обычном реакте без Redux и Saga. А тут сразу всё это. Ну лады, поглядим.

В нашей команде 15 человек, есть все. От аналитиков до датабэйсеров или как там их еще называют. Три фронтенд разработчика, в том числе и я. Каждый день код ревью, два созвона(да, работаю удаленно), каждый день старший разработчик подсказывает мне бест практис и просто указывает на ошибки. Игорь, золотой ты человек! Мне бы твоего терпения и уровня программирования!

Сравнивая мою работу в Автоконтиненте и работу здесь в Корусе(удаленно), хотя можно пойти и в офис - это просто две разные вещи, как небо и земля. Поэтому да, компания компании рознь. Уровень проектов разный, уровень заинтересованности в проекте разный, в целом уровень организации работы.

Единственное, что на данный момент плохо и из-за чего у меня возникают определенные мысли - это заработная плата в Корусе. Уровень зп и сложность проекта ну совсем не коррелируются. Так как обещали одно после прохождения стажировки, а по факту другое, постоянно кормят завтраками. И с каждым днем желания работать и ломать голову над такими задачками за зарплату стажера(продавца в пятерочке) не хочется. В целом глядя на hh.ru уровень зарплат фронтов в Корусе довольно не хилый. Но меня как джуна пока это не коснулось. Делаем выводы. Не буду забегать в перед, будут изменения - обязательно сообщу. Но намёк вы поняли.

А что кроме работы? К счастью или к несчастью, но у меня стало меньше времени. У меня нет как раньше свободных вечеров для прокачки доп. навыков и осваивания доп. технологий. Параллельно я ставлю другой навык, это новый проект, если можно так сказать( но его не будет ни на пикабу, ни где-либо еще). Тот проект направлен не на финансовую составляющую, как этот, всё же по большей части, о котором вы читаете. Да, у меня в эталоне многофункциональность. Я считаю, что человек должен много чего уметь делать. Но и осевой навык тоже должен быть.

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

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

Вот такие дела. Как у вас дела? Кто уже устроился на работу и стал миддлом, пока я тяну кота за яйца и выбираюсь из "трясины джунства"?

До встречи через месяц!

Артем OWIII.

Контакты: Instagram, Github.

Репозиторий с тестовыми заданиями для frontend разработчика.

Показать полностью

[моё] IT Программирование Карьера Javascript Веб-разработка Frontend Web Длиннопост

DELETED

5 лет назад

Задаем соотношение сторон изображению / HTML&CSS⁠⁠

I. Через фоновое изображение

- Создаем div;

- Задаем ему нулевую высоту;

- Задаем ему фоновое изображение;

- Обнуляем размер фонового изображения;

- Создаем псевдоэлемент before;

- Наследуем фон от родителя;

- Делим высоту на ширину и умножаем результат на сто чтобы получить значение для padding-top;

- В результате получаем следующие стили:

.image {
background-size: 0 0;
}

.image:before {
content: '';
display: block;
padding-top: 56.25%;
background-image: inherit;
background-repeat: no-repeat;
background-size: cover;
}

Пример на codepen.

II. Через свойство object-fit.

Если поддержка браузеров вас устраивает и вы знаете значение одной из сторон картинки, то вы можете использовать свойство:

object-fit: cover;

Если ширина картинки равна 500px, а соотношение сторон должно быть 4:3, то все что остается сделать это:

(3 / 4) * 500 = 375

В итоге стили будут выглядеть примерно так:

img {
width: 500px;
height: 375px;
object-fit: cover;
}

Если вам интересно то, о чем я пишу - можете заглянуть ко мне в группу вк или телеграм канал.

Показать полностью

[моё] HTML CSS Верстка Frontend Картинки Web-программирование Пропорции Web Текст

DELETED

5 лет назад

Resource Override⁠⁠

В этой заметке я попытаюсь сделать краткий обзор браузерного расширения Resource Override.

Для чего предназначен?

Подменять стили указанного сайта своими.

Зачем?

Дебаг css и js на боевом сайте.

Установка

Переходим по ссылке и жмем на кнопку установить.

Подробнее

Resource Override CSS, Javascript, Frontend, Web, Web-программирование, IT, Верстка, Видео, Длиннопост

На странице настроек доступы четыре действия:

— Подменить файл другим через URL;

— Подменить файл другим через файл;

— Вставить свой файл;

— Подменить заголовки.

Последним я не пользовался, поэтому расскажу о первых трех.

Через URL

Допустим вы разрабатываете на локалке. У вас настроен сборщик, который поднимает сервер.

В итоге URL выглядит как-то так — localhost:3000

Стили компилируются в один bundle — styles.min.css, который также используется на боевом сайте. Это значит, что мы можем посмотреть, как будут выглядеть новые стили на проде.

Для этого достаточно добавить в группу новое правило: URL → URL

В поле from указываем на каком сайте мы хотим подменить стили, а в to — местоположение наших стилей:

https://site.com/styles.min.css → localhost:3000/styles.min.css

Через файл

Аналогично предыдущему способу, только вместо locahost:3000/styles.min.css необходимо вставить код во встроенный текстовый редактор расширения. Это удобно только для маленьких файлов.

Вставить свой файл

Уже без привязки к URL.

Если лень писать Chrome расширения — можно просто вставить кусок JS кода.

Если это вас заинтересовало и вы хотите узнать о расширении поподробнее, то советую посмотреть видео Kyle Paulsen:

Посты на эти и другие темы публикую в канале: https://t.me/filimonovvadim

И в группе вк: https://vk.com/filimonovvadim

Показать полностью 1 1

[моё] CSS Javascript Frontend Web Web-программирование IT Верстка Видео Длиннопост

Посты не найдены

4 5 6 7 8 9 10 11 12 13 14