• Чего я не знал о CSS

    • Перевод
    Рисовать сайты я учился по старинке: глядя на исходный код и пытаясь воспроизвести увиденное. Плюс взял странную книгу для невидимых вещей (типа PHP/MySQL) — и вперёд.

    Это ещё в 1999 году, когда мы писали <font size="4" color="#000000"> и т. д., а DHTML был модным.

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

    Вот некоторые вещи, которых я не знал, но хотел бы узнать раньше.
    Читать дальше →
  • Генеральный конструктор vs Скрам-мастер

      image

      «Каспийский монстр» — советский экраноплан, который весил 544 тонны, что делало его самым тяжелым летательным аппаратом в мире. Сделан с нуля за два года. Думай об этом, закачивая лэндинг по продаже трусов «всего» за полгода.

      Я бы хотел рассказать о некоторых приемах древнего(доскрамового периода) менеджмента, которые позволяли добиваться таких результатов. Поднять в воздух на новом принципе железную бандуру размером с хрущевку и разогнать ее до пятисот киломtnров в час, по мне — это более творческая и технически сложная задача, чем открытие очередного интернет магазина, поэтому возможно стоит перенять опыт предков.
      Читать дальше →
    • Как работать с джуниорами?

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



        Рассказывать будет Серёжа Попов, CEO Лига А. и директор по талантам в HTML Academy. В Лига А. работа с джуниорами поставлена на поток: половина фронтендеров компании — это выпускники HTML Academy. Выпускники приходят в компанию на стажировку, где им помогают развиваться, а 95% тех, кто после стажировки ищет другую работу — трудоустраивается.

        Серёжа уже больше 3 лет выполняет роль наставника для джуниор-фронтендеров и научился работать с ними так, чтобы новички быстро росли до крутых специалистов и приносили пользу компании. Нюансами, принципами, правилами и секретами работы, он поделился в докладе на TeamLead Conf 2020, а мы расшифровали.
        Читать дальше →
      • Деревья квадрантов и распознавание коллизий

        • Перевод
        image

        Эта неделя была короткой, в понедельник и вторник я продолжал работать над системой 2D-освещения. Остальное время я потратил на реализацию деревьев квадрантов (quadtree).

        В этой статье я поделюсь своей реализацией и мыслями, возникшими в процессе её проектирования.

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

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

        Если разбиение пространства для вас новая тема, то рекомендую прочитать эту статью Роберта Нистрома. Если вы хотите более подробно узнать о деревьях квадрантов, то прочитайте эту или эту статьи.
        Читать дальше →
        • +46
        • 12,8k
        • 7
      • Как проводить Code Review по версии Google

          Вопросы код-ревью меня интересуют очень давно. Много раз возникали те или иные проблемы то с качеством кода, то с климатом в коллективе. И действительно, code review — это если не единственное, то одно из самых главных мест для возникновения конфликтов в коллективе разработчиков.

          И вот недавно при подготовке к очередному выпуску подкаста "Цинковый прод" я узнаю, что Google опубликовал свод правил по проведению Code Review, битком набитый ценными мыслями. Весь материал довольно объемный и не влезет в одну статью, поэтому я постараюсь выделить наиболее интересные (мне) мысли.


          Итак, поехали

          Читать дальше →
        • Нетривиальная расстановка элементов на flexbox без media-запросов

          Казалось бы, какой пост может быть о CSS Flexbox в 2019 году? Верстальщики уже несколько лет активно используют данную технологию, и все тайны должны быть разгаданы.

          Однако, недавно у меня возникло стойкое ощущение, что нужно поделиться одним нетривиальным и, на мой взгляд, полезным приёмом, связанным с flexbox. Написать пост побудил тот факт, что ни один знакомый (из учеников, верстальщиков и просто людей, близких к web), не смог решить задачку, связанную с flexbox, хотя на это нужно всего 4-6 строк.
          Читать дальше →
        • Нейронаука: когда лучше всего работает наш мозг и как технологии могут ему помочь

          • Перевод


          Вы полностью сосредоточены. Вы потеряли счет времени. Ничего другого в мире не существует. Вы живете в данный момент.

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

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

          Наши коллеги поговорили с доктором Джеком Льюисом, нейробиологом, который с увлечением изучает, как работает наш мозг, чтобы узнать, что побуждает нас выполнять нашу работу наилучшим образом и какую роль в этом могут играть технологии, культура и рабочая среда.
          Читать дальше →
          • +10
          • 7,5k
          • 5
        • Как CSS Grid меняет представление о структурировании контента

          • Перевод
          Каждый, кто хотя бы немного занимался созданием веб-сайтов, знает, что теги <div> — являются важным строительным блоком для контроля над макетом.

          HTML5 представил новые семантические элементы, чтобы помочь в этом. И хотя они являются фантастическим дополнением к языку, они немного похожи на украшение к нашему супу из <div> элементов.



          С приходом CSS Grid, нам больше не нужно полагаться на элементы <div> для создания структуры страницы или даже более сложного компонента. Структура буквально определяется родительским элементом, а не тем, как расположено содержимое внутри него.

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

          Читать дальше →
        • [в закладки] PDF- и ePUB-версия руководства по React

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



            Для новых читателей нашего блога — два бонуса внутри.
            Читать дальше →
            • +52
            • 21,5k
            • 9
          • Что можно и нельзя выжать из веб-компонентов

              Это не туториал и не вполне обзор — скорее заметки по горячим следам после собирания библиотеки компонентов. Начиналось всё с обычной обыденной истории: есть легаси-код, к легаси нужно прикрутить пипмочек и финтифлюшек, переписывать ничего нельзя, некогда, и вообще не трогайте тут ничего руками; большие и страшные пакеты тоже на всякий случай не трогайте, да и вообще, почему бы вам просто не взять самый прекрасный фреймворк Vanilla JS и не начать на нём писать, как завещали деды?
              Но конечно же всё оказалось не так просто...
            • Только не говорите, что вы таким не были или мой взгляд на обучение

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


              Помните свой первый код на PHP?


              Нет, не этот:


              <?
                  echo "Hello world"; // и в браузере у нас скачивается index.php :)
              ?>

              А вот этот:


              <?
                  include "db.php";
                  if ($_GET['id'] > 0){
                      mysql_query("SELECT * FROM `posts` WHERE id = {$_GET['id']}");
                  }else{
                      mysql_query("SELECT * FROM `posts` ORDER BY `id` DESC");
                  }
              ?>
              Читать дальше →
            • Создание простой кликер-игры с нуля

              В последние несколько лет набирают большую популярность игры такого жанра, как «кликеры». Мне самому очень интересно играть в них, но не менее интересно создавать игру — кликер самому. Благодаря такому движку как Unity, создать свой шедевр не составит труда даже простому новичку. Давайте перейдем к делу.

              Что нужно сделать?


              1. Подумать, почему и на что мы должны кликать?
              2. Что должно произойти, когда мы кликнем?
              3. Что должно произойти, если не кликнем?

              Как ответил я на эти вопросы:

              1. Мы должны кликать в любое место на экране.
              2. При клике должен смениться объект.
              3. При игнорировании — проигрыш.

              О чем будет игра?


              Игроку нужно вовремя выбрать либо меч, либо щит, в зависимости от того, что будет падать сверху. То есть, падает меч — выбираем меч, падает щит — выбираем щит. При неправильном выборе игрок просто проиграет. На словах всё довольно просто, а в реализации еще проще.
              Читать дальше →
              • +10
              • 19,1k
              • 4
            • Структуры данных для программистов игр: bulk data

              • Перевод
              image

              Любому программисту будет полезно понимание различных структур данных и способов анализа их производительности. Но на практике мне ни разу не пригождались АВЛ-деревья, красно-чёрные деревья, префиксные деревья, списки с пропусками, и т.д. Некоторые структуры данных я использую только для одного конкретного алгоритма и ни для чего больше (например, кучи для реализации очереди с приоритетом в алгоритме поиска пути A*).

              В повседневной работе я обычно обхожусь на удивление малым количеством структур данных. Чаще всего мне пригождаются:

              • Общие массивы данных (Bulk data) — способ эффективного хранения большого количества объектов.
              • Слабые ссылки (Weak reference) (или дескрипторы (handle)) — способ обращения к объектам в bulk data без сбоев программы в случае, если объект удалён.
              • Индексы — способ быстрого доступа к отдельным подмножествам в bulk data.
              • Массивы массивов — способ хранения объектов bulk data с динамическими размерами.

              Я посвящу несколько статей тому, как я обычно реализую все эти структуры. Давайте начнём с простейшей и самой полезной — bulk data.
              Читать дальше →
            • Бумажная настольная игра DoodleBattle

                Всем привет! Представляем вам свою первую настольную игру с бумажными фигурками. Это такой варгейм, но только бумажный. И всю игру пользователь делает сам :) Хотел бы сразу сказать, что это не очередная адаптация, а полностью нами разработанный проект. Все иллюстрации, фигурки, правила до каждой буквы и пиксела мы сделали и придумали сами. Такие дела :)

                image

                DoodleBattle: FlatArms — это пошаговый варгейм с полем битвы и линейками, где два отряда выполняют опасные миссии, побеждают и проигрывают в безумной борьбе за обладание секретной информацией и технологиями. Конечно же, игра снабжена всем необходимым из конверта: фигурки, поле, постройки, правила, набор миссий, линейки и кубики.
                Читать дальше →
              • Революция или боль? Доклад Яндекса о React Hooks

                  Меня зовут Артём Березин, я разработчик нескольких внутренних сервисов Яндекса. Последние полгода я активно работал с React Hooks. По ходу дела возникали некоторые сложности, с которыми приходилось бороться. Теперь хочу поделиться этим опытом с вами. В докладе я разобрал React Hook API с практической точки зрения — зачем нужны хуки, стоит ли переходить, что лучше учитывать при портировании. В процессе перехода легко наделать ошибок, но избежать их тоже не так сложно.



                  — Хуки — это просто еще один способ описывать логику ваших компонентов. Он позволяет добавить к функциональным компонентам некоторые возможности, ранее присущие только компонентам на классах.

                  Читать дальше →
                • Задание для саморазвития: HTML-форма со списком случайных строк и отбором по ним

                    Предлагаю вниманию хабровчан и гостей Хабра задание для саморазвития во frontend-стороне разработки. Задание ориентировано на исполнителей, начинающих разбираться с frontend-программированием и настроенных тесно познакомиться с базовыми механизмами программирования в браузере. Необходимые технологии: HTML, CSS, JavaScript (Vanilla).

                    image

                    Задание специально составлено так, чтобы как можно больше разобраться в базовых технологиях при минимальном подключении каких-либо дополнительных средств. По сути, требуется только браузер и редактор кода; никаких предварительных манипуляций, без необходимости обработки на backend-стороне. Кому интересно ознакомиться с постановкой — Добро пожаловать под кат!
                    Читать дальше →
                  • Как мы дорабатываем продукт под конкретного клиента

                      image

                      Итак, мы продали клиенту программный B2B продукт.

                      На презентации ему все нравилось, но в ходе внедрения выяснилось, что кое-что все-таки не подходит. Можно конечно сказать что нужно следовать “best practice”, и изменить себя под продукт, а не наоборот. Это может сработать, если у вас есть сильный бренд (например, из трех больших букв, и вы можете послать всех на три маленькие буквы). В противном случае, вам быстро объяснят, что заказчик добился всего благодаря своим уникальным бизнес-процессам, и давайте-ка, лучше меняйте свой продукт, или ничего не получится. Есть вариант отказаться и сослаться на то, что лицензии уже куплены, и с подводной лодки деваться уже некуда. Но на относительно узких рынках такая стратегия долго работать не будет.

                      Приходится дорабатывать.
                      Читать дальше →
                    • Телеграм-каналы о разработке игр

                      Привет! Я инди-разработчик и автор канала о разработке игр. Решил поделиться с вами интересными геймдев ресурсами в Телеграме, которые сам регулярно читаю. За последние 3 года появилось много классных сообществ и авторских блогов о разработке, которые раньше были только в ВК. Надеюсь, будет полезно!


                      Читать дальше →
                    • Что должен делать тимлид: роли, обязанности и навыки


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


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


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

                        Читать дальше →
                      • Лучшие практики Node.js — советы по структуре проектов


                        Привет, Хабр! Представляю вашему вниманию адаптированный перевод первой главы "Node.js Best Practices" автора Yoni Goldberg. Подборка рекомендаций по Node.js размещена на github, имеет почти 30 т. звезд, но до сих пор никак не упоминалась на Хабре. Предполагаю, что эта информация будет полезна, как минимум, для новичков.
                        Глава 1. Советы по структуре проектов
                        • +26
                        • 25,1k
                        • 6