Предлагаем вашему вниманию подборку с ссылками на новые материалы из области фронтенда и около него.
Рубрика «javascript» - 149
Дайджест свежих материалов из мира фронтенда за последнюю неделю №339 (12 — 18 ноября 2018)
2018-11-18 в 21:56, admin, рубрики: angular, css, ES6, html, html5, javascript, JS, React, vue, браузеры, дайджест, подкасты, Разработка веб-сайтов, ссылки, фронтендВалидация сложных форм React. Часть 1
2018-11-18 в 19:03, admin, рубрики: javascript, React, react-validation-boo, react.js, ReactJSДля начала надо установить компонент react-validation-boo, предполагаю что с react вы знакомы и как настроить знаете.
npm install react-validation-boo
Чтобы много не болтать, сразу приведу небольшой пример кода.
import React, {Component} from 'react';
import {connect, Form, Input, logger} from 'react-validation-boo';
class MyForm extends Component {
sendForm = (event) => {
event.preventDefault();
if(this.props.vBoo.isValid()) {
console.log('Получаем введённые значения и отправляем их на сервер', this.props.vBoo.getValues());
} else {
console.log('Выведем в консоль ошибки', this.props.vBoo.getErrors());
}
};
getError = (name) => {
return this.props.vBoo.hasError(name) ? <div className="error">{this.props.vBoo.getError(name)}</div> : '';
};
render() {
return <Form connect={this.props.vBoo.connect}>
<div>
<Input type="text" name="name" />
{this.getError('name')}
</div>
<button onClick={this.sendForm}>
{this.props.vBoo.isValid() ? 'Можно отправлять': 'Будьте внимательны!!!'}
</button>
</Form>
}
}
export default connect({
rules: () => (
[
['name', 'required'],
]
),
middleware: logger
})(MyForm);
От var b до собеседования
2018-11-17 в 16:07, admin, рубрики: 1С-Битрикс, C#, javascript, unity3d, поиск работы в it, разработка приложений, собеседованиеВы почти закончили универ или колледж? Вас пригласили на собеседования, но вы идете туда без подготовки? У вас нет образования (высшего), но хотите работать программистом или в сфере IT? Речь пойдёт по большей степени о поиске работы, я буду говорить лишь за свой город (Челябинск) т.к. искал работу именно здесь.
Приручить зверя. С чем мы столкнулись при разработке приложения для ведения личного дневника на React Native
2018-11-16 в 13:39, admin, рубрики: android development, Google Drive API, javascript, open source, react native, ReactJS, Realm, личный дневник, личный опыт, мобильное приложение, разработка мобильных приложений, Разработка под androidВ предыдущей статье я подробно рассказал о нашем опыте создания веб-сервиса/мобильного приложения для ведения личного дневника. Актуальная версия приложения (минимальная работоспособная версия уже выложена в Google Play) разрабатывается на React Native, и вот на нем мы и остановимся подробно сегодня.
Рассказываем о собственном опыте работы с фреймворком, способах расширения функционала, «подводных камнях» (куда ж без них!) и как мы их обошли.
О фреймворке в целом
Немного о виновнике торжества — React Native. Он все-таки хорош!
Для тех, кто в достаточной степени знает JavaScript и тем более NodeJS — он очень хорош. Если же есть опыт с React, ну или хотя бы есть понимание ее идеи, механизма — он просто великолепен!
Главное, что на выходе получается действительно нативное приложение. Расширения и плагины покрывают практически 99% типовых задач. Оставшийся процент при острой необходимости можно дописать на родных языках (java, object-c) и подключить к React Native приложению.
Но хватит про плюсы, от них толку ноль, хоть список и будет внушительным. Все плюшки и вкусности бессмысленны, если приложение не запускается, а это первое чем нас «порадовал» React Native.
Сначала ему не понравилась версия NodeJS. Потом версия npm. Потом версия Android SDK, потом версия Android tools, потом… Писать про то, как все проблемы решились, смысла нет, ибо с того момента все вышеперечисленное ПО обновило свои версии и инструкции будут неактуальны.
Просто знайте: узкое место React Native — среда сборки. Будьте готовы к штудированию google, чтению форумов и stackoverflow. На развертывание в итоге потратили: Ubuntu 12.6 — 3 дня, Win10 — 2 дня. Как ни странно, на «винде» все оказалось проще, ну, или просто на ubuntu «шишек набили» и уже понимали, что и куда подсовывать.
На заметку, вдруг кому пригодится: код, представленный ниже, решил все проблемы с совместимостью версий sdk у дополнений при компиляции проекта.
Читать полностью »
Руководство по JavaScript, часть 3: переменные, типы данных, выражения, объекты
2018-11-15 в 9:00, admin, рубрики: javascript, Блог компании RUVDS.com, обучение, разработка, Разработка веб-сайтовСегодня, в третьей части перевода руководства по JavaScript, мы поговорим о разных способах объявления переменных, о типах данных, о выражениях и об особенностях работы с объектами.
→ Часть 1: первая программа, особенности языка, стандарты
→ Часть 2: стиль кода и структура программ
→ Часть 3: переменные, типы данных, выражения, объекты
Трагикомедия в NaN актах: как мы cделали игру на JS и выпустили ее в Steam
2018-11-15 в 8:21, admin, рубрики: game development, javascript, phaser.js, tower defense, разработка игр, я пиарюсь“Эка невидаль”, — скажете вы, — “В топ-100 вашей игры нет, так что нещитово”. Тоже правда. Зато за год разработки Protolife мы поднакопили какой-никакой опыт, которым можем поделиться с потенциальными будущими игроделами. Ветераны индустрии, боюсь, ничего интересного для себя не найдут. Но, может быть, хоть повеселитесь от души.
Что за игра-то? И кто “мы”?
Мы — это команда из трех человек (GRaAL, A333, icxon), волею судеб названная Volcanic Giraffe без какого либо умысла. Работали долгое время вместе, несколько раз втроем участвовали в Ludum Dare (соревнования по написанию игр за выходные), и однажды решившие довести до релиза одну из наших поделок под названием Protolife.
Если коротко: это необычная tower defense, где надо бегать героем-курсором и выстраивать оборону из блоков против постоянно растущей красной биомассы.
Читать полностью »
Оптимизация обработки событий в Angular
2018-11-14 в 15:11, admin, рубрики: angular, change detection, javascript, optimization, performance, TypeScript, Блог компании Tinkoff.ruВведение
Angular предоставляет удобный декларативный способ подписки на события в шаблоне, с помощью синтаксиса (eventName)="onEventName($event)". Вместе с политикой проверки изменений ChangeDetectionStrategy.OnPush подобный подход автоматически запускает цикл проверки изменений только по интересующему нас пользовательскому вводу. Иными словами, если мы слушаем (input) событие на <input> элементе, то проверка изменений не будет запускаться, если пользователь просто кликает по полю ввода. Это значительно улучшает
производительность, по сравнению с политикой по умолчанию (ChangeDetectionStrategy.Default). В директивах мы также можем подписаться на события на хост-элементе через декоратор @HostListener('eventName').
В моей практике нередко встречаются случаи, когда обработка конкретного события требуется только при выполнении какого-либо условия. т.е. обработчик выглядит примерно так:
.NET гуру Дино Эспозито: «Не будь пассажиром поезда, идущего под откос»
2018-11-13 в 16:20, admin, рубрики: .net, asp.net core, Blazor, html, http, javascript, microsoft, mvc, Programming ASP.NET Core, TypeScript, Блог компании EPAMДино приезжал в Минск лишь однажды, и нам удалось пообщаться с ним между лекциями, которые он давал для .Net-чиков. Мы решили не быть банальными и поговорили с Дино не только о работе, но и о книгах, о будущем и о том, какой становится жизнь после 40.
Как настроить установку переменных окружения Nuxt.js в рантайме, или Как сделать всё не как все и не пожалеть
2018-11-13 в 15:11, admin, рубрики: javascript, Nuxt.js, Umbrella IT, vue.js, vuejs, web-разработка, Блог компании Umbrella IT, Программирование, Разработка веб-сайтов
Senior web developer’ы Антон и Алексей продолжают рассказ о непростой борьбе с Nuxt. В предыдущем раунде битвы с этим фреймворком они показали, как запустить проект на Nuxt так, чтобы все были счастливы. В новой статье поговорим о реальном применении фреймворка.
Мы начали переписывать проект с огромным техническим долгом. Месячная аудитория составляла 6-7 млн. уникальных посетителей, но существующая платформа доставляла слишком много проблем. Поэтому было решено отправить ее на пенсию. Само собой, производительность была нашим наибольшим опасением, но также не хотелось просесть по SEO.
После пары раундов обсуждения решили не полагаться на традиционный подход с только серверным рендерингом — но и не загонять себя в ловушку клиентского рендеринга. Как итог мы начали строить решение на базе Nuxt.js.
Читать полностью »
Частичка программы HolyJS 2018 Moscow
2018-11-13 в 12:39, admin, рубрики: holyjs, javascript, Блог компании JUG.ru Group, конференции
HolyJS 2018 Moscow уже совсем скоро. Конференция состоится 24–25 ноября.
В этот раз программа получилась весьма разнообразной, однако несложно выделить главные тенденции:
- Доклады из первых рук (#firsthand) — доклады о инструментах/решениях от их авторов. Мы особенно тщательно подошли к выбору выступающих в этом направлении.
- Доклады о фундаментальных вещах (#fundamentals). Такие доклады необходимы всегда, особенно в нашей юной экосистеме.
- Доклады, затрагивающие Node.js (#node). С каждой конференцией в отзывах мы видим призыв «еще больше про nodejs!», мы это слышим и пытаемся искать действительно качественные доклады в данном направлении.
- Также получилось немало докладов про IoT (#iot) и инструменты (#tools).
Направления направлениями, но основа любой конференции — крутые спикеры, давайте взглянем на треть наших спикеров и познакомимся с ними поближе.Читать полностью »