К старту курса по Frontend-разработке делимся переводом подборки различных инструментов: от генератора CSS, который рассчитывает пространство так, что брейкпоинты (контрольные точки) заменяются переменными, до редактора анимации прямо в браузере, а также средства масштабирования для отзывчивости в SVG и даже визуализатора специфичности CSS, который пригодится при анализе больших таблиц стилей. Мы структурировали и, где это было возможно, расширили оригинал, добавив информацию и примеры из репозиториев и официальных описаний инструментов.
Web Разработчик
Почему мы предпочитаем CSS(--variable) переменным SASS($variable)?
Как успешно пройти собеседование на английском в ИТ?
У нас в компании много иностранных проектов. Пройти интервью не всегда легко, даже если много и регулярно общаешься на английском. Поэтому наша команда преподавателей создала курс Project Interviews in English, который мы решили сделать доступным для всех желающих. Меня зовут Инна, я координировала создание курса и сегодня поделюсь полезными советами из него.
Модульный PHP монолит: рецепт приготовления
Статья написана по мотивам моего доклада на митапе. В нем я рассказываю историю того, как мы взяли и не распилили монолит на микросервисы, и что сделали вместо этого.
На тот момент наша команда работала над приложением, начало которому было положено еще в 2009 году не искушенными в архитектуре студентами. К 2018 это уже был типичный big ball of mud (большой ком грязи), или, этакий «монолит-копролит», как выразился один наш коллега. Думаю, многим знакомо.
Карманная книга по TypeScript. Часть 2. Типы на каждый день
Мы продолжаем серию публикаций адаптированного и дополненного перевода "Карманной книги по TypeScript
".
Другие части:
- Часть 1. Основы
- Часть 2. Типы на каждый день
- Часть 3. Сужение типов
- Часть 4. Подробнее о функциях
- Часть 5. Объектные типы
- Часть 6. Манипуляции с типами
- Часть 7. Классы
- Часть 8. Модули
Обратите внимание: для большого удобства в изучении книга была оформлена в виде прогрессивного веб-приложения.
Примитивы: string
, number
и boolean
В JS
часто используется 3 примитива: string
, number
и boolean
. Каждый из них имеет соответствующий тип в TS
:
string
представляет строковые значения, например,'Hello World'
number
предназначен для чисел, например,42
.JS
не различает целые числа и числа с плавающей точкой (или запятой), поэтому не существует таких типов, какint
илиfloat
— толькоnumber
boolean
— предназначен для двух значений:true
иfalse
Обратите внимание: типы String
, Number
и Boolean
(начинающиеся с большой буквы) являются легальными и ссылаются на специальные встроенные типы, которые, однако, редко используются в коде. Для типов всегда следует использовать string
, number
или boolean
.
Гексагональные тайловые миры
Тайловость в играх – очень распространенное явление, особенно в играх инди сегмента. Чаще всего используют квадратные тайлы – в них проще всего задать необходимые данные, будь то карта уровня или инвентарь. Однако на квадратных и прямоугольных формах возможности подобной системы не ограничиваются.
В топовых играх конца девяностых - начала нулевых часто можно увидеть шестиугольную сетку заместо квадратной – в то время это смотрелось очень интересно, в особенности в сочетании с изометрией. Именно о работе с такими сетками и пойдет речь.
Прямоугольные тайловые миры
Тайлы - пожалуй один из самых удобных способов построения игровой логики. Все происходит максимально дискретно, никаких тебе физик с просчетом коллизий и прочими трудностями.
Огромное множество игр на самом деле содержат тайлы - так просто проще представлять игровой мир. Такая упорядоченность помогает геймдизайнерам строить игровые механики, упрощает жизнь художников и делает код программистов понятнее. Самих видов тайлов тоже огромное количество - сегодня поговорим о прямоугольных и изометрических.
Простые советы по написанию чистого кода React-компонентов
Быть тимлидом, ч2: Технологии
Всем привет, меня зовут Семён и я руковожу разработкой витрины объектов недвижимости в ДомКлик. В прошлой части этой серии статей мы поговорили про самую трудоёмкую область работы тимлида — работу с людьми. Сегодня я расскажу про не менее важную тему для любого тимлида — технологии. Насколько «крут» должен быть тимлид технически? Должен ли он писать код? Отвечает ли тимлид за техническое состояние своего «хозяйства»? Кого заинтересовал, прошу под кат.
Чего я не знал о CSS
Это ещё в 1999 году, когда мы писали
<font size="4" color="#000000">
и т. д., а DHTML был модным.Когда появился CSS, мой подход к обучению не отличался. Но я действительно жалею, что не потратил время, чтобы изучить CSS должным образом — и пропустил много фундаментальных понятий.
Вот некоторые вещи, которых я не знал, но хотел бы узнать раньше.
Генеральный конструктор vs Скрам-мастер
«Каспийский монстр» — советский экраноплан, который весил 544 тонны, что делало его самым тяжелым летательным аппаратом в мире. Сделан с нуля за два года. Думай об этом, закачивая лэндинг по продаже трусов «всего» за полгода.
Я бы хотел рассказать о некоторых приемах древнего(доскрамового периода) менеджмента, которые позволяли добиваться таких результатов. Поднять в воздух на новом принципе железную бандуру размером с хрущевку и разогнать ее до пятисот киломtnров в час, по мне — это более творческая и технически сложная задача, чем открытие очередного интернет магазина, поэтому возможно стоит перенять опыт предков.
Как работать с джуниорами?
Рассказывать будет Серёжа Попов, CEO Лига А. и директор по талантам в HTML Academy. В Лига А. работа с джуниорами поставлена на поток: половина фронтендеров компании — это выпускники HTML Academy. Выпускники приходят в компанию на стажировку, где им помогают развиваться, а 95% тех, кто после стажировки ищет другую работу — трудоустраивается.
Серёжа уже больше 3 лет выполняет роль наставника для джуниор-фронтендеров и научился работать с ними так, чтобы новички быстро росли до крутых специалистов и приносили пользу компании. Нюансами, принципами, правилами и секретами работы, он поделился в докладе на TeamLead Conf 2020, а мы расшифровали.
Деревья квадрантов и распознавание коллизий
Эта неделя была короткой, в понедельник и вторник я продолжал работать над системой 2D-освещения. Остальное время я потратил на реализацию деревьев квадрантов (quadtree).
В этой статье я поделюсь своей реализацией и мыслями, возникшими в процессе её проектирования.
Во-первых, мне нужно сказать, почему я решил реализовать дерево квадрантов.
Quadtree — это структура данных разбиения пространства. Её основное преимущество по сравнению с другими структурами данных заключается в адаптивности. Оно обеспечивает хорошую производительность при вставке, удалении и поиске. То есть мы можем использовать это дерево в динамическом контексте, где данные часто меняются. Более того, эту структуру довольно легко понять и реализовать.
Если разбиение пространства для вас новая тема, то рекомендую прочитать эту статью Роберта Нистрома. Если вы хотите более подробно узнать о деревьях квадрантов, то прочитайте эту или эту статьи.
Как проводить Code Review по версии Google
Вопросы код-ревью меня интересуют очень давно. Много раз возникали те или иные проблемы то с качеством кода, то с климатом в коллективе. И действительно, code review — это если не единственное, то одно из самых главных мест для возникновения конфликтов в коллективе разработчиков.
И вот недавно при подготовке к очередному выпуску подкаста "Цинковый прод" я узнаю, что Google опубликовал свод правил по проведению Code Review, битком набитый ценными мыслями. Весь материал довольно объемный и не влезет в одну статью, поэтому я постараюсь выделить наиболее интересные (мне) мысли.
Итак, поехали
Нетривиальная расстановка элементов на flexbox без media-запросов
Однако, недавно у меня возникло стойкое ощущение, что нужно поделиться одним нетривиальным и, на мой взгляд, полезным приёмом, связанным с flexbox. Написать пост побудил тот факт, что ни один знакомый (из учеников, верстальщиков и просто людей, близких к web), не смог решить задачку, связанную с flexbox, хотя на это нужно всего 4-6 строк.
Нейронаука: когда лучше всего работает наш мозг и как технологии могут ему помочь
Вы полностью сосредоточены. Вы потеряли счет времени. Ничего другого в мире не существует. Вы живете в данный момент.
Хотя это похоже на описание медитации, точно так же можно определить состояние потока — ощущение того, что вы настолько сильно вовлечены в работу, что полностью теряете себя в ней, но в то же время значительно увеличиваете свою продуктивность.
Это Святой Грааль, к которому мы все стремимся в любом занятии, будь то хобби или проект на работе. Однако достигать наилучших результатов и максимально раскрывать потенциал в любой момент может быть трудно.
Наши коллеги поговорили с доктором Джеком Льюисом, нейробиологом, который с увлечением изучает, как работает наш мозг, чтобы узнать, что побуждает нас выполнять нашу работу наилучшим образом и какую роль в этом могут играть технологии, культура и рабочая среда.
Как CSS Grid меняет представление о структурировании контента
<div>
— являются важным строительным блоком для контроля над макетом.HTML5 представил новые семантические элементы, чтобы помочь в этом. И хотя они являются фантастическим дополнением к языку, они немного похожи на украшение к нашему супу из
<div>
элементов.С приходом CSS Grid, нам больше не нужно полагаться на элементы
<div>
для создания структуры страницы или даже более сложного компонента. Структура буквально определяется родительским элементом, а не тем, как расположено содержимое внутри него.Это значит, что мы можем получить хороший простой макет, который структурирует содержимое, не обращая внимание на то, как оно изначально организовано с помощью элементов
<div>
.[в закладки] PDF- и ePUB-версия руководства по React
Для новых читателей нашего блога — два бонуса внутри.
Что можно и нельзя выжать из веб-компонентов
Только не говорите, что вы таким не были или мой взгляд на обучение
Всем привет. Я хотел бы рассказать свое мнение по поводу современного обучения программированию. В статье речь пойдет про 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");
}
?>
Information
- Rating
- Does not participate
- Location
- Екатеринбург, Свердловская обл., Россия
- Date of birth
- Registered
- Activity