Случайны выбор дневника Раскрыть/свернуть полный список возможностей


Найдено 2778 сообщений
Cообщения с меткой

для новичков - Самое интересное в блогах

Следующие 30  »
rss_rss_hh_new

Зачем нужен БЭМ

Среда, 20 Сентября 2017 г. 19:00 (ссылка)




htmlacademy


вчера в 19:00

Разработка





Зачем нужен БЭМ












    Следуете ли вы БЭМу, и насколько он востребован вне Яндекса?


    БЭМ расшифровывается как: блок, элемент, модификатор. Это такой набор абстракций, на который можно разбить интерфейс и разрабатывать всё в одних и тех же терминах. Как говорит сайт bem.info, БЭМ предлагает единые правила написания кода, помогает его масштабировать и повторно использовать, а также увеличивает производительность и упрощает командную работу.



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



    В основу того, что мы сейчас называем БЭМом, легла идея независимых блоков, которую Виталий Харисов сформулировал и презентовал в 2007 году на первой российской конференции по фронтенду. Это было настолько давно, что тогда даже слова «фронтенд» ещё не было, тогда это называлось клиент-сайд.



    Идея была в том, чтобы ограничить возможности CSS для более предсказуемых результатов. Использовать минимум глобальных стилей и каждый отдельный элемент страницы делать блоком со своим уникальным классом и стилями, которые полностью его описывают. Селекторы по элементам и ID, хрупкие связки вложенности — всё это заменялось на простые селекторы по классам. Каждый класс в стилях — это блок. Благодаря этому блоки можно легко менять местами, вкладывать друг в друга и не бояться конфликтов или влияния.



    #menu ul > li {
    color: old;
    }
    .menu-item {
    color: bem;
    }


    Потом появились абсолютно независимые блоки (АНБ), где у элементов внутри есть свой префикс с именем родителя, а состояния блоков снова дублируют класс, но уже с постфиксом. Подход обрёл черты современного БЭМа, одна из которых — многословность классов.



    .block {}
    .block_mod {}
    .block__element {}
    .block__element_mod {}


    Эта многословность гарантирует уникальность элементов и модификаторов в рамках одного проекта. За уникальностью имён блоков вы следите сами, но это довольно просто, если каждый блок описан в отдельном файле. Глядя на такой класс в HTML или CSS, можно легко сказать, что это, и к чему оно относится.



    Изначально АНБ, а потом и БЭМ, решали задачу важную для вёрстки любых масштабов: предсказуемое поведение и создание надёжного конструктора. Вы же хотите, чтобы ваша вёрстка была предсказуемой? Вот и Яндекс тоже. Ещё это называется «модульность» — о ней хорошо написал Филип Уолтон в «Архитектуре CSS», ссылка на перевод в описании.



    Через пару лет в Яндексе окончательно сформулировали нотацию БЭМ. Любой интерфейс предлагалось разделять на блоки. Неотделимые части блоков — элементы. У тех и других есть модификаторы.








    Например, блок поиска по сайту. Он может быть в шапке и в подвале — значит это блок. В нём есть обязательные части: поле поиска и кнопка «найти» — это его элементы. Если поле нужно растянуть на всю ширину, но только в шапке, то блоку или элементу, который отвечает за это растягивание, даётся модификатор.



    Для полной независимости блоков мало назвать классы правильно или изолировать стили, нужно собрать всё, что к нему относится. В проекте по БЭМу нет общего script.js или папки images со всеми картинками сайта. В одной папке с каждым блоком лежит всё, что нужно для его работы. Это позволяет удобно добавлять, удалять и переносить блоки между проектами. Потом, конечно, все ресурсы блоков при сборке объединяются в зависимости от задач проекта.



    Когда БЭМ вышел за пределы Яндекса, сначала его воспринимали как магию и старались воспроизводить дословно, вплоть до префиксов b- у каждого блока. Такой смешной карго-культ.



    .b-block {}
    .b-block--mod {}
    .b-block__element {}
    .b-block__element--mod {}


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



    .block {}
    .block--mod {}
    .block__element {}
    .block__element--mod {}


    А зачем вообще все эти нотации — я ведь один верстальщик на проекте, помните? Помню. А ещё помню, как сам верстал до БЭМа: в каждом проекте придумывал что-нибудь такое новенькое. А потом открывал код годичной давности и удивлялся — какой идиот это написал?



    Возьмём, к примеру, русский язык. Мы же пишем с прописной имена людей, названия и прочее такое? Пишем. Чтобы легко потом считывалось: это Надя или надежда на лучшее? Уж не говоря про знаки препинания и другие полезные договорённости. Вот буква «ё», например, смягчает… так, о чём мы? Да, БЭМ.



    До БЭМа были проекты с портянками стилей, которые нельзя трогать. Они копились годами, слой за слоем, как обои в древней коммуналке. Их просто подключали первыми, а потом перезаписывали что мешало. Когда у вас есть div { font-size: 80% } — это даже уже не смешно.



    /* Не смешно */

    div {
    font-size: 80%;
    }


    БЭМ продолжил развиваться в Яндексе и вырос за пределы вёрстки: появились уровни переопределения, богатый инструментарий, JS-библиотека для работы с БЭМ-классами, шаблонизаторы и целый БЭМ-стэк. БЭМу даже жест придумали, но это совсем другая история, специфичная для Яндекса.



    Были и другие методологии: OOCSS Николь Салливан, SMACSS Джонатана Снука, вариации БЭМа и целые фреймворки. Даже у нас на продвинутом интенсиве можно было выбрать любую методологию для вёрстки учебного проекта.



    Но выжил только БЭМ и его вполне можно назвать стандартом де-факто современной разработки интерфейсов. И что — это финальная ступень эволюции? Нет конечно. Как ни автоматизируй, многое в БЭМе приходится делать руками, и возможны конфликты.



    Модульность и изоляцию стилей блока можно решить ещё лучше. Есть веб-компоненты, CSS-модули, куча решений CSS-в-JS и даже, прости господи, атомарный CSS. Но нет единого решения накопившихся проблем на следующие 10 лет, каким когда-то стал БЭМ. Что это будет? Посмотрим. Я ставлю на веб-компоненты.



    А пока, если вы опишете интерфейс по БЭМу — код будет организован, предсказуем, расширяем и готов для повторного использования. Не только для вас, но и для других.



    Видеоверсия







    Вопросы можно задавать здесь.



    Original source: habrahabr.ru (comments, light).

    https://habrahabr.ru/post/337286/

    Метки:   Комментарии (0)КомментироватьВ цитатник или сообщество
    Ledidans

    Шитье. Самый полный и понятный самоучитель

    Вторник, 19 Сентября 2017 г. 13:45 (ссылка)


    3726595_newproject (456x551, 289Kb)


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



    Превью 2 (562x700, 452Kb)Превью 3 (560x700, 295Kb)Превью 4 (559x700, 209Kb)Превью 5 (560x700, 262Kb)Превью 6 (561x700, 259Kb)Превью 7 (561x700, 228Kb)Превью 8 (544x700, 464Kb)Превью 9 (561x700, 391Kb)Превью 10 (544x700, 315Kb)Превью Безымянный (518x700, 309Kb)



    Читать далее...
    Метки:   Комментарии (0)КомментироватьВ цитатник или сообщество
    rss_rss_hh_new

    Математика для программиста

    Четверг, 14 Сентября 2017 г. 19:00 (ссылка)




    htmlacademy


    сегодня в 19:00

    Разработка





    Математика для программиста












      Нужна ли математика программисту?


      Нужна. А, кроме неё, нужна сферическая геометрия, география, музыка и банковское дело. И я сейчас не шучу.



      Дело в том, что программисты редко решают задачи для самих себя: мы работаем в банковских сервисах, сервисах бронирования отелей, картографических сервисах и прочих Яндекс.Почтах. Получается, что мы решаем задачи наших пользователей.



      Для решения чисто программистских задач у нас есть алгоритмы и паттерны: если посмотреть на код интернет-магазина цветов и банковского сайта он будет очень похож. Будут использоваться одинаковые условия, одинаковые циклы и даже паттерн MVC будет один и тот же.



      Важнее то, что стоит за этими вещами: понимание как работает система в целом. Если посмотреть на вещи с этой стороны, то станет понятно, что программист — это младший специалист в области, в которой работает сайт.



      Ещё пять лет назад Артём Поликарпов доказал, что каждый фронтендер немного дизайнер. Нам нужно понимать как устроены шрифты: что такое гротеск, чем он отличается от антиквы, что такое интерлиньяж, кернинг, разрядка, капитель. Понимать, что такое сетки и что такое композиция. Кроме этого, разбираться в UX — мы должны знать что такое оптимистичный UI, где поставить прелоадер и зачем это всё нужно пользователю.



      Но быть только дизайнером — мало. Дело в том, что пользователи взаимодействуют с нашими сайтами: в интернет-магазинах они вводят данные своих банковских карт, на картографических сервисах прокладывают маршруты и измеряют расстояния, на музыкальных сайтах они транспонируют тональность песен и настраивают гитару по тюнеру. И всё это должен кто-то запрограммировать. Получается, что у программиста должны быть специальные знания.



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



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



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



      Кстати, о трансформациях. Помните CSS-фильтр matrix? Те самые числа в странном порядке, которые непонятно как влияют на поведение вашего блока? Это матрицы перехода из линейной алгебры. Если разобраться что такое матрицы и как перемножать их между собой, то вы сможете очень эффективно писать трансформации не пользуясь алиасами.



      .neo {
      transform: matrix(0, -1, 1, 0, 50px, 50px);
      }


      С кругозором понятно — изучайте всё, что хотите, потому что в любом случае это вам пригодится. Но есть ли какая-то общая область, которая нужна всем программистам? Да, такая область есть, она называется «дискретная математика». Наука, которая лежит в основе информатики.



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



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



      Ещё одна хорошая тема из дискретки — это графы. Очень многие программистские задачи решаются с помощью графов. Даже скучный и привычный DOM — это дерево, частный случай графа. И здесь неплохо бы понимать хотя бы как по деревьям можно ходить.



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










      const firstDiv = document.querySelector('div');
      firstDiv.id === 'underdog';


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



      const people = [
      { name: 'Иван', height: 183 },
      { name: 'Марья', height: 155 },
      ];


      Первое решение, которое может прийти в голову — это с помощью метода map собрать другой массив, массив ростов этих людей, а потом с помощью метода reduce посчитать их сумму и поделить на количество.



      const averageHeight = people
      .map(it => it.height)
      .reduce((acc, it) => acc + it) / people.length;


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



      const averageHeight = people
      .reduce((acc, it) => acc + it.height) / people.length;


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



      Итого: учите всё подряд, что попадётся вам под руку. Для начала изучите дискретку, потому что она будет вашим основным инструментом в работе, а потом сосредоточьтесь на задачах вашего бизнеса и вы откроете для себя очень много нового в бизнесе, математике, строительстве и медицине.



      Видеоверсия







      Вопросы можно задавать здесь.



      Original source: habrahabr.ru (comments, light).

      https://habrahabr.ru/post/337952/

      Метки:   Комментарии (0)КомментироватьВ цитатник или сообщество
      Nina-lan

      Краткий словарь начинающих лирушников

      Вторник, 18 Апреля 2017 г. 19:16 (ссылка)

      Это цитата сообщения Шадрина_Галина Оригинальное сообщение

      Краткий словарь начинающих лирушников.

      NPxtAzzzCtuPnbtm0l79-CFRKFI.png
      0_a12c0_188a1747_S.gif
      Краткий словарь начинающего лирушника. Добавление терминов и уточнения значений принимаются.

      Аватар (аватара)
      – картинка рядом с именем пользователем. На ЛиРу может иметь размер 150 х 150 пикселей или менее.
      То же самое, что и юзерпик. В индийской мифологии аватар – это преображение божества в различные формы земного бытия для искупления последнего.

      a.k.a. (aka) – Also Known As – "также известный под именем...." Пример: Валентин Любимов aka Valez…

      Аноним - а). Незарегистрированный пользователь, не имеющий своего ника и дневника. б). Зарегистрированный пользователь случайно или намеренно оставляющий комментарий анонимно.

      NPxtAzzzCtuPnbtm0l79-CFRKFI.png



      Серия сообщений "Шпаргалки":

      Часть 1 - Как сделать бегущую строку и бегущее изображение в дневнике
      Часть 2 - Несколько оригинальных формул и ссылок для дневника
      ...
      Часть 24 - Бродилка по урокам по ЛиРу
      Часть 25 - html коды для текста
      Часть 26 - Краткий словарь начинающих лирушников.


      Метки:   Комментарии (0)КомментироватьВ цитатник или сообщество
      Ledidans

      Удачное начало: игра в бесплатном онлайн казино Вулкан

      Понедельник, 04 Апреля 2017 г. 02:03 (ссылка)


      Уже свыше двух десятков лет азартные игровые аппараты Вулкан на http://vulkan-net.com поддерживают престиж и подтверждают честность красно - голубого бренда среди гемблеров постсоветского пространства. Популярность и долголетие заведения объясняются просто – сочетание своевременных выплат с возможностью играть в бесплатно - безрегистрационном режиме.



      интернет казино вулкан/3899041_newproject_2_ (645x528, 392Kb)


      Игра именно в casino vulcan



      Почему здесь? Причин несколько:

      ✔ конфиденциальная информация клиентов казино надежно защищена;

      ✔ заработанное выплачивается буквально за сутки посредством надежных платежных систем;

      ✔ игорное заведение не ограничивает выигрыш, получить можно хоть миллион, если постараться.



      Демо - игра без вложений



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



      Зарегистрированный пользователь может быть на 100 % уверен в строгой конфиденциальности своих данных и транзакций, все шифровано с помощью самых современных защищенных алгоритмов.



      Именитые бренды азартного игрософта



      Игровые автоматы Вулкан сотрудничают с известными производителями и мировыми лидерами азартной индустрии:

      ✔ Гаминатор;

      ✔ Игрософт;

      ✔ Нет Ент.



      VIP - клуб собирает друзей



      Программа лояльности казино – это личный менеджер, приоритет по услугам администрации, cashback, почет и место в зале славы заведения. Служба поддержки всегда, в любой день и час онлайн, компетентно ответит на ваши вопросы через удобную вам связь ( чат, электронная почта, телефон).



      Члены клуба принимают участие во множестве занимательных дел (турниры, лотереи, розыгрыши призов, акции). Есть и очень приятное - подарки ко дню рождения (30$ на счет) и к праздникам. Приветственный подарок выбирается из приведенного ниже:

      ✔ множитель комппоинтов;

      ✔ бонус на первый депозит;

      ✔ 100 компоинтов на счет.



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

      Метки:   Комментарии (1)КомментироватьВ цитатник или сообщество
      Нестарая_Сова

      урок для новеньких на ЛИ.ру

      Суббота, 25 Марта 2017 г. 16:02 (ссылка)
      liveinternet.ru/users/46694...383761575/

      Урок для новеньких как не заблудиться на Ли.ру

      Иногда новенькие, обзаведясь дневником на Liveinternet, исчезают навсегда или надолго. Они просто не могут попасть в свой дневник. Теряют дорогу. Да еще и на Liveinternet стали перекидывать блоггеров по разным административным лирушным страницам... делается это, конечно, с благими намерениями, чтобы человек был в курсе жизни на ресурсе, но для новеньких Liveinternet может превратиться в лабиринт. Поэтому первое, что нужно сделать, заведя дневник,
      Метки:   Комментарии (0)КомментироватьВ цитатник или сообщество
      Bernardita

      Посадка клубники весной пошаговая инструкция для новичков

      Среда, 22 Февраля 2017 г. 21:45 (ссылка)

      Если вы хотите высадить на своем участке клубнику (садовую землянику), но не знаете, как это сделать – читайте нашу статью.

      Саженец клубники не должен быть сильно заглублен в почву

      Читать далее...
      Метки:   Комментарии (0)КомментироватьВ цитатник или сообщество

      Следующие 30  »

      <для новичков - Самое интересное в блогах

      Страницы: [1] 2 3 ..
      .. 10

      LiveInternet.Ru Ссылки: на главную|почта|знакомства|одноклассники|фото|открытки|тесты|чат
      О проекте: помощь|контакты|разместить рекламу|версия для pda