ОБ ЭТОМ могут спросить на собеседовании ВЕРСТАЛЬЩИКА или ФРОНТЕНДЕРА

Обновляем домашний технопарк на Мегамаркете. До конца октября на маркетплейсе действует повышенный кешбэк на бытовую технику и электронику до 60% бонусами от СберСпасибо, которыми можно оплачивать до 99% от стоимости следующих покупок.
А для новых покупателей есть промокод ОСЕНЬТЕХНИКА на дополнительную скидку 3 000 рублей на первый заказ от 10 000 рублей. Подробнее здесь: clck.ru/36GMrC
На Мегамаркете - выгодно! clck.ru/36GMqN
----
В CSS появилось много новинок и одна из них - это тригонометрические функции. Теперь удивить своими знаниями на собеседовании стало проще, ведь на этом канале ты узнаешь, как сделать старые фишки, но по новым правилам.
Например, вы сможете прямо сейчас сказать, как сделать циферблат на чистом CSS? Возможно, первое, что придёт в голову - использовать position, чтобы поставить каждую цифру на своё место. Но есть метод проще!
Демо:
1) Циферблат на position - codepen.io/anna_blok/pen/xxMZLoM
2) Циферблат на position и transform - codepen.io/anna_blok/pen/mdvVBGm
3) Циферблат с sin() и cos() - codepen.io/anna_blok/pen/MWLKdmB
Статья о том, как анимировать стрелки на чистом CSS для циферблата - css-tricks.com/creating-a-clo...
Видео про тригонометрические функции CSS - • CSS этой новинкой смог...
Таймкоды:
00:00 Вступление
00:35 Для чего нужны тригонометрические функции CSS?
00:49 Циферблат с position
01:57 Мегамаркет
02:37 Циферблат с transform
03:01 Циферблат с CSS функцией sin() и cos()
🔵 Telegram - t.me/frontendblok
🔵 Чат Telegram - t.me/frontendblokchat
🔵 Instagram - / annblok
🔵 TikTok - / annblok_webdev
🔵 Дзен - zen.yandex.ru/annblok
🔵 ВК - tpverstak
🔴 Обучение - frontendblok.com
#верстальщик #фронтенд #frontend

Пікірлер: 65

  • @annblok_webdev
    @annblok_webdev7 ай бұрын

    Насколько, по вашему мнению, новый метод проще привычных вариантов решений?

  • @eugenefromfl5666
    @eugenefromfl56667 ай бұрын

    Спасибо большое Анна! Весьма познавательно, и в любой момент может пригодиться!

  • @user-we9zj3nc7n
    @user-we9zj3nc7n7 ай бұрын

    Как то очень неожиданно от css перешли к электрогрилю))

  • @ITentrepreneur
    @ITentrepreneur6 ай бұрын

    Офигеть. Это была самая неожиданно ворвавшаяся рекламная интеграция что я когда либо видел)) Браво Аня -- Блок, и причесалась хорошо, настоящая уральская екатеринбургская красота, Ройзман бы гордился тобой (если б видел)

  • @trywongndeso6283
    @trywongndeso62837 ай бұрын

    Где ты находишь все эти обновления?

  • @vip.ted100
    @vip.ted1007 ай бұрын

    Объясните пожалуйста, а как так вы написали в одном классе переменную и потом везде её используете, а не в :root{}

  • @user-dx2fe3mu5v
    @user-dx2fe3mu5v7 ай бұрын

    Странно, что вы пишете border-radius: 100%. Хотя браузер и масштабирует это значение до 50%, всё-таки правильнее было бы изначально писать border-radius: 50%.

  • @jaanuthebiker
    @jaanuthebiker7 ай бұрын

    Спасибо за видео больше!

  • @Streetfoodkatarka
    @Streetfoodkatarka7 ай бұрын

    Когда следующий стрим?

  • @TheFryOS
    @TheFryOS7 ай бұрын

    как давно вы видели вакансию верстальщика?

  • @mcsergey
    @mcsergey7 ай бұрын

    Со школы помню что градусы считаются против часовой. А так прикольно, но в каком то смысле, бесполезно.

  • @viktormoskalev2269
    @viktormoskalev22697 ай бұрын

    Очень длинный код вышел мне кажется проще сделать расчеты на js и тег стайл в цикле заполнить , слава богу next js на большинстве проектов)

  • @lanstromedamusic4976
    @lanstromedamusic49767 ай бұрын

    никогда не давалась мне тригонометрия, походу и полярные координаты пригодятся в будущем)

  • @StonHenge
    @StonHenge7 ай бұрын

    Моё мнение, что это точно не уровень джунов-верстальщиков.

  • @bape155

    @bape155

    Ай бұрын

    А чей это уровень? Школьников?

  • @via754
    @via7547 ай бұрын

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

  • @annblok_webdev

    @annblok_webdev

    7 ай бұрын

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

  • @alexperemey6046

    @alexperemey6046

    7 ай бұрын

    Для начала ты должен знать, что такие свойства существуют. Иначе ты просто даже не будешь их гуглить. Так и будешь все время подбирать пиксели по x и y осям методом тыка. В данном случае конечно юзается rotate с тем же успехом, но задачи бывают разные, например если катет по диагонали нужно посчитать, то без тригонометрии уже неудобно.

  • @SwordToothTiger
    @SwordToothTiger7 ай бұрын

    В конце про подгонку не понял... как догадались что нужно именно на 30px смещать?

  • @annblok_webdev

    @annblok_webdev

    7 ай бұрын

    30px это просто ширина контейнера для цифр. Можно было указать другое значение, главное, чтобы по ширине 12 (верхнее значение на циферблате) поместилось. Можно также сделать контейнер в других единицах измерения. В идеале ещё и font-size сделать адаптивным.

  • @SwordToothTiger

    @SwordToothTiger

    7 ай бұрын

    @@annblok_webdev т.е. 12 элементов тайм нужно отцентрировать так что бы их центры располагались на границе блока который содержит все элементы тайм?

  • @loltv7902
    @loltv79027 ай бұрын

    Вакансию верстальщика сейчас очень редко встретишь

  • @rubenwildrift
    @rubenwildrift7 ай бұрын

    Мне это в кошмарах снится будет, опять это математика😢

  • @SwordToothTiger

    @SwordToothTiger

    7 ай бұрын

    Это ещё до задач про землекопов или бассейна не дошли.

  • @mimimizhka

    @mimimizhka

    7 ай бұрын

    На самом деле эти синусы и косинусы фронтенд разработчику знать необязательно, и серьёзные компании их использовать не будут, так как они не поддерживаются всеми браузерами. А вот что надо знать по мимо css и html это JavaScript, TypeScript, React, Vue js, bootstrap

  • @SwordToothTiger

    @SwordToothTiger

    7 ай бұрын

    @@mimimizhka я тоже думаю что это всё через JS решается.

  • @alexperemey6046

    @alexperemey6046

    7 ай бұрын

    @@SwordToothTiger Нет, через rotate.

  • @dmitrykovalchuk6549
    @dmitrykovalchuk65497 ай бұрын

    Если на собесе начнут спрашивать такую дичь, то можно уходить сразу же.

  • @thehokage421
    @thehokage4217 ай бұрын

    Анна, как ты в этом вообще разбираешься? Я только открыл статьи о том, чтобы узнать больше о синусах/косинусах в цсс и уже мозг расплавился. А ты так быстро видео на эту тему выпускаешь, я в шоооке

  • @ViKTorulez

    @ViKTorulez

    7 ай бұрын

    Ты смеешься? Синусы/косинусы в школе проходят... Что вы все в it прёте то...

  • @user-nx2nq9po4x

    @user-nx2nq9po4x

    7 ай бұрын

    @@ViKTorulez да кто это в школе учит, а потом еще и не забыть же нужно всю эту муть не думаю что это все пригодится верстальщику слишком замудрено можно сделать проще!

  • @ViKTorulez

    @ViKTorulez

    7 ай бұрын

    @@user-nx2nq9po4x об это я и пишу, продажники/менеджеры судорожно лезут в it за зарплатами, есть такие индивидуумы, которые даже принтер настроить не могут (сам с такими коллегами сталкивался). Кому надо и кто этим заинтересован в школе это учит и запоминает

  • @ripclan5553
    @ripclan55537 ай бұрын

    Мне показалось, что старые методы проще. Или я ошибаюсь?

  • @user-vu6hn4ul2i

    @user-vu6hn4ul2i

    7 ай бұрын

    В данном случае - да. Я бы делал через transform rotate, а сам текст через rotate с таким же углом, но со знаком минус. Да, там нужны ещё обертки для цифр, но разве это проблема? Но, наверное, есть задачи, где синусы удобнее

  • @msa6193
    @msa61937 ай бұрын

    Об этом не будут спрашивать на собеседовании🤣 Прежде чем писать такие заголовки автору канала рекомендую самой пройти пробное собеседование, что бы знать что спрашивают)

  • @alexperemey6046

    @alexperemey6046

    7 ай бұрын

    Кликбейт же

  • @umnyicoder

    @umnyicoder

    7 ай бұрын

    Меня спрашивали

  • @user-pt2uz5st7i
    @user-pt2uz5st7i7 ай бұрын

    Работаю верстальщиком, очень тяжелая подача материала

  • @bazoff
    @bazoff7 ай бұрын

    Она жена Андрея Блока?

  • @mimimizhka
    @mimimizhka7 ай бұрын

    Верстальшики уже не нужны, таких вакансий почти нету. Нужны фронтенд разработчики которые по мимо html и css знают JavaScript, TypeScript, React, Vue js, bootstrap. Вот как то так…

  • @alexperemey6046

    @alexperemey6046

    7 ай бұрын

    Во-первых bootstrap - это как раз верстка. Во-вторых - это уже устаревшая библиотека, хоть и поддерживается. Ну и в-третьих - какой из тебя "фронтендер", если ты не знаешь верстки?

  • @mimimizhka

    @mimimizhka

    7 ай бұрын

    @@alexperemey6046 во вторых, какой из тебя фронтендер если ты знаешь только css и html?

  • @mimimizhka

    @mimimizhka

    7 ай бұрын

    @@alexperemey6046 и в третих, bootstrap и tailwindcas это два самых популярных фреймворка в мире, назови хоть что то что было бы популярнее?

  • @marselforester7317
    @marselforester73177 ай бұрын

    синусы и кАсинусы я понЯл тока с появлением ютуба :) Учителей не хейтю за это потому как не было у них времени все разжевывать, а может они и сами не совсем понимали что к чему XD

  • @alexperemey6046

    @alexperemey6046

    7 ай бұрын

    Просто ко времени ютуба ты сам чуть подрос и стал не таким тупеньким.

  • @marselforester7317

    @marselforester7317

    7 ай бұрын

    да неееее я и щас тупой XD@@alexperemey6046

  • @randomgamer910
    @randomgamer9107 ай бұрын

    А где еще синусы и косинусы могут пригодиться на сайтах?

  • @annblok_webdev

    @annblok_webdev

    7 ай бұрын

    Для создания паттернов и новых вариаций для анимаций

  • @mimimizhka

    @mimimizhka

    7 ай бұрын

    @@annblok_webdev Паттерны и анимацию лучшее сделать по другому с помощью встраиваемых svg, а эти svg рисовать в Adobe illustrator и анимации в adobe animation. CSS синусы и косинусы плохо поддерживаются браузерами …

  • @alexperemey6046

    @alexperemey6046

    7 ай бұрын

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

  • @mimimizhka

    @mimimizhka

    7 ай бұрын

    @@alexperemey6046 так это можно сделать без синусов и косинусов, вот пример: .outer-container { width: 200px; /* Ширина внешнего контейнера */ height: 200px; /* Высота внешнего контейнера */ background-color: #ccc; /* Цвет фона внешнего контейнера */ position: relative; /* Позиционирование элемента */ } .inner-element { width: 100px; /* Ширина внутреннего элемента */ height: 100px; /* Высота внутреннего элемента */ background-color: #f00; /* Цвет фона внутреннего элемента */ position: absolute; /* Абсолютное позиционирование */ top: 0; /* Верхний край */ left: 0; /* Левый край */ transform: translateY(100%) rotate(45deg); /* Применяем трансформации */ }

  • @omxian408
    @omxian4087 ай бұрын

    Я бы наверное лучше с помощью джава скрипта и канваса этот циферблат писал))

  • @alexperemey6046

    @alexperemey6046

    7 ай бұрын

    Все, что можно сделать на css лучше делать на css. Быстрее работает.

  • @user-nx2nq9po4x

    @user-nx2nq9po4x

    7 ай бұрын

    @@alexperemey6046 на пол секунды, а мороки горы)

  • @josh1832
    @josh18327 ай бұрын

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

  • @alexperemey6046

    @alexperemey6046

    7 ай бұрын

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

  • @skippop938
    @skippop9387 ай бұрын

    я начал учить хтмл и цсс, но боюс идти на собесы памагите

  • @rubenwildrift

    @rubenwildrift

    7 ай бұрын

    А как же джаваскпип? Ну у тебя только эти языки? И сколько времени учишь?

  • @user-vu6hn4ul2i

    @user-vu6hn4ul2i

    7 ай бұрын

    Просто не жди ничего от первых собесов, там, оффер и т.п.

  • @mimimizhka

    @mimimizhka

    7 ай бұрын

    Выучи еще JavaScript, Typescript, bootstrap и vue js и можешь уверенно идти на собеседование

  • @user-nx2nq9po4x

    @user-nx2nq9po4x

    7 ай бұрын

    @@mimimizhka да хотябы джиэс уже отлично будет

  • @wivi2777
    @wivi27777 ай бұрын

    Кстати тоже эту статью видео, но твоё объяснение даже лучше дало понять, в чем суть этих углов, а то там просто формула дана и всё, сиди разбирайся с этой чепухой ппц

  • @kylex127
    @kylex1277 ай бұрын

    лайк за рекламу гриля

  • @stqcyv
    @stqcyv7 ай бұрын

    О чем спросят, видели ли мы твой плагиат на чужое творчество? А, ок

  • @alexperemey6046

    @alexperemey6046

    7 ай бұрын

    Да какой плагиат, лол. Это все равно, что сказать, что объяснение теоремы Пифагора имеет право давать только сертифицированная математическая организация, а все остальные его воруют. Задаче о циферблате больше 15 лет. Я помню как ее еще крутили на js через те же sin - cos, потом появилось rotate, стало проще. Сейчас вот еще и sin, cos из css можно использовать.