DevGang
Авторизоваться

Анимированный Fluid CSS градиент для текста

CSS предоставляет возможность создавать потрясающую анимацию. Разработчики не только делают великолепные произведения цифрового искусства, но также дают нам возможность добавлять гибкие элементы дизайна прямо к нам на веб-страницы. Недавно я включил CSS-градиентную анимацию во многие ссылки на мои блоги, чтобы придать им живой, плавный вид. Смотрите как преобразился модуль «Recent essays» ниже на гифке

https://res.cloudinary.com/practicaldev/image/fetch/s--izmoDRPj--/c_limit%2Cf_auto%2Cfl_progressive%2Cq_66%2Cw_880/https://thepracticaldev.s3.amazonaws.com/i/dgbkiccdcmzkaaqjp78l.gif

Совместное использование состояния с помощью React's Context API

Глобальное состояние в React является синонимом таких библиотек, как Redux. Если вам когда-либо приходилось делить состояние, например текущий маршрут или данные из API, с несколькими компонентами, то вы, возможно, использовали Redux.

Более новые версии React (16.3+) включают встроенный способ совместного использования состояния, что означает отсутствие необходимости извлекать внешнюю библиотеку. Это известно как React Context API, и его может быть немного сложно понять. Я надеюсь предоставить упрощенное объяснение и учебное пособие, чтобы вы могли быстро добавить глобальное состояние в любое из ваших приложений на React.

Расставляем Sass точки остановки правильно

Я люблю оставлять @media аннотации в точках остановки запроса. Пожалуй, для меня это самая важная особенность Sass. Я выбираю метод и пишу код:

Развертывание React Native приложения на iOS (Часть первая)

На прошлой неделе я развернул React Native приложение для iOS в App Store. В общей сложности я потратил около 2х часов - это был скучный процесс сбора снимков экрана и значков и тестирования TestFlight. 

А теперь сравните это опыт, с первым разом, когда я развернул приложение React Native для iOS. Мне кажется, что я потратил около 3 недель, чтобы во всем правильно разобраться!

Подключение React Native компонентов в релизной сборке Android

Не так давно я подключал компоненты React Native к нашему существующему приложению и потратил на это изрядное количество времени. 

Связано это было с дополнительными требованиями к сборкам релизов, требующих создания bundle файла.

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

5 основных навыков, которые должен освоить каждый разработчик Front End интерфейса в 2019 году

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

Итак, какие навыки вы должны получить что-бы называть себя полноценным веб-разработчиком в 2019 году?

Полезные функции CSS Media Query 

Типичный медиа-запрос состоит из медиа-типа (screen, print, speech и т.д.) и одного или нескольких выражений, включающих медиа-функции, которые могут принимать значения true или false.

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

Если тип носителя не указан, по умолчанию используется тип all, т.е. соответствующие стили будут применимы для всех устройств.

Расширенные манипуляции с массивами в JavaScript 

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

В действительности почти все языки ООП, включая JavaScript, предоставляют нам методы для достижения этой цели.

Если вы начнете с JavaScript, эта статья должна быть действительно полезной, для других она будет отличным напоминанием

Атрибут CSS :placeholder-shown

Одним из первых плагинов, который появился в новом фреймворке на ранних этапах разработки на JavaScript, был placeholder плагин, поэтому мы так обрадовались приходу, атрибута placeholder в HTML5. Тогда любители CSS, вроде меня, были в восторге от того, что спецификация CSS позволила нам стилизовать плэйсхолдеры.

Не так давно я столкнулся с проблемой, когда хотел применить специфичный шрифт font-family  к элементу , только лишь тогда, когда он был заполнен (содержал) текст. Изначально я планировал установить шрифт font-family на , а затем повторно применить шрифт body's блока для  ::placeholder, но, идеально не вышло - выглядело как будто страницу должны закрыть на техническую доработку. 

Я запостил проблему в Твиттере, надеясь найти лучшее решение, и, к счастью, Факундо Коррадини предложил :placeholder-shown. Атрибут :placeholder-shown предоставлен элементу псевдокласса только тогда, когда он сам появляется, поэтому можно выбрать только placeholder , но не текст ввода:

React добавляем inderterminate чекбоксу

Мне нравится React, рендеринг на основе состояния и логический рабочий процесс позволили мне увидеть свет в этой современной среде. Это не значит, что я иногда не расстраиваюсь, что «простые» вещи кажутся сложнее, чем они должны быть. Получение ссылки на элемент и изменение его свойств раньше было простым, но теперь вы должны принять во внимание, что у вас обычно нет ссылок на элементы - вам нужно думать по-другому. Я узнал об этом, когда мне нужно было установить свойство inderterminate чекбоксу, свойство, не распознаваемое с помощью атрибута, которое требует дескриптора элемента и установки свойства напрямую.

Присоединяйся в тусовку

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

Попробовать

В этом месте могла бы быть ваша реклама

Разместить рекламу