Javascript и Web: истории из жизни, советы, новости и юмор — Все посты, страница 9

4 года назад

Топ моих любимых фреймворков и библиотек JavaScript⁠⁠

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

Angular JS разработан в 2009 г., создавался для разработки одностраничных приложений. С моей точки зрения, Angular.js стал потрясающей комбинацией низкого порога вхождения и богатого набора функций. Чтобы начать писать на нём небольшие приложения, понадобится около часа свободного времени. При этом на то, чтобы изучить и использовать все его фичи, понадобятся месяцы. Пока что не было ни одной фронтенд задачи, которую я не смог бы решить при помощи этого фреймворка.

Топ моих любимых фреймворков и библиотек JavaScript IT, Web, Web-программирование, Javascript, Длиннопост

Node.js (или просто Node) — это серверная платформа для работы с JavaScript через движок V8. JavaScript выполняет действие на стороне клиента, а Node — на сервере. С помощью Node можно писать полноценные приложения. Node умеет работать с внешними библиотеками, вызывать команды из кода на JavaScript и выполнять роль веб-сервера.

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

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

В отличие от конкурирующих фреймворков, таких как Angular, основная философия Aurelia заключается в соблюдении официальных веб-стандартов и DOM API, это обеспечивает более высокую производительность, поскольку она приближается к родным API и имеет очень мало абстракции. Ваши взгляды - это HTML, ваши модели представлений - Javascript (или TypeScript), а компонентная модель Aurelia основана на HTML-шаблонах веб-компонентов W3C и ShadowDOM, поэтому ваш код отражает то, что представляет собой настоящий новый веб-стандарт.

Query - быстрая, небольшая и многофункциональная библиотека JavaScript. Она делает такие вещи, как обход и манипулирование документами HTML, обработка событий, анимация и Ajax намного проще с простым в использовании API, который работает во множестве браузеров.

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

Anime.js — небольшая библиотека для создания анимации на основе JavaScript. С её помощью можно анимировать свойства CSS, SVG-изображения или атрибуты DOM-дерева на веб-странице. Библиотека позволяет контролировать все аспекты анимации и предоставляет много способов для обозначения элементов, которые нужно привести в движение.

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

P.s Если тебе IT тематика, и ты хочешь больше контента на тему IT то можешь подписаться на Telegram канал: t.me/AlphaCodeJS

Показать полностью 4

IT Web Web-программирование Javascript Длиннопост

5

3

deh4567

4 года назад

Топ-5 моих любимых плагинов для Visual Studio Code⁠⁠

Для тех, кто не в курсе, Visual Studio Code – это бесплатный и кроссплатформенный текстовый редактор, созданный компанией Microsoft. Он достаточно быстро стал «народным любимцем», ввиду его высокой производительности и обильного функционала.

1. Live Server

По умолчанию, Visual Studio Code не предусматривает возможности открывать файл в любом выбранном браузере. Данное расширение не только добавляет функцию Открыть в браузере по умолчанию, но также позволяет открывать файлы в любом имеющемся у вас браузере.

Топ-5 моих любимых плагинов для Visual Studio Code IT, Web, Web-программирование, Visual Studio, HTML, Javascript, CSS, Длиннопост

2. Quokka

Quokka – это утилита, дающая вам возможность предварительного просмотра результата выполнения того или иного куска кода. Она выдает вам результаты выполнения функций и посчитанные значения переменных. Расширение легко настроить, и оно запускается из того же ящика, что и JSX или Typescript проекты.

3.Color Info

Небольшой плагин, который даёт вам возможность получать краткую справку об используемых в CSS цветах. Наведя курсор на название цвета, вы можете увидеть, как этот цвет выглядит, а также получить всю информацию о трансляции данного цвета в разные форматы (hex, rgb, hsl и cmyk).

4. CSS Peek

С этим плагином вы можете отслеживать определения CSS классов и id таблиц стилей. Для этого просто достаточно кликнуть правой кнопкой мыши на селектор в вашем HTML файле и воспользоваться функцией Перейти к определению или Подсмотреть определение.

5. HTML Boilerplate

Это расширение упрощает работу с HTML файлами, избавляя вас от необходимости прописывать теги head и body вручную. Просто наберите в пустом файле html, нажмите на Tab, и VS Code сам сгенерирует шаблон вашего документа.

P.s Если тебе IT тематика, и ты хочешь больше контента на тему IT то можешь подписаться на Telegram канал: t.me/AlphaCodeJS

Показать полностью 5

IT Web Web-программирование Visual Studio HTML Javascript CSS Длиннопост

2

Krikotik

4 года назад

Ниоткуда появляется gulpfile.dev.js⁠⁠

Доброго времени суток, возникла проблема-призрак, которая появилась просто ниоткуда.

В общем, спокойно живет себе моя сборка GULP, но при сохранении изменений в файле gulpfile.js, в папке dist появляется файл gulpfile.dev.js. Он повторяет логику кода обычного gulpfile, но переписывает его на другом синтаксисе. Если честно, я даже толком не нашел информации, что такое ".dev", а уж решить эту проблему мне совсем не мудрено.

Еще одна проблема - в app/scss появляется папка dist при билде проекта, но только с файлом style.css (ОТКУДА ОН ТАМ БЕРЕТСЯ?!!!)
Очень надеюсь на вашу помощь, вот ссылка кода файла gulpfile.js https://codepen.io/TimurTverdokhleb/pen/oNxWNEK?editors=0010 .

А также, прикрепляю фото файловой структуры проекта (пометил стрелочками нужное). ОГРОМНОЕ СПАСИБО!!!!

Ниоткуда появляется gulpfile.dev.js Javascript, Web, Web-программирование, Frontend, Gulp, Программирование

Показать полностью 1

[моё] Javascript Web Web-программирование Frontend Gulp Программирование

26

deh4567

4 года назад

Использование Google Spreadsheet как JSON бэкенд⁠⁠

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

Например, ты пишешь простой блог и тебе совсем не хочется строить бэкенд, дабы записывать, редактировать и хранить там посты, но ты хочешь удобно собирать эти данные как JSON — Google Drive поможет тебе с этим.

Ты создал таблицу и потом ты можешь опубликовать этот документ в веб. Для этого выбери «Файл» > «Опубликовать в интернете...». В нижней части диалога ты можешь увидеть ссылку к данным, но он дает нам доступ только к HTML

Скопируй все, после key= ( например — 0AtMEoZDi5-pedElCS1lrVnp0Yk1vbFdPaUlOc3F3a2c) и подставь это в URL: spreadsheets.google.com/feeds/list/PUT-KEY-HERE/od6/p... вставить вместо "PUT-KEY-HERE".

Ты также можешь получить данные как чистый JSON (но тебе будет нужно пропустить это сначала через CORS прокси, например cors.io) по ссылке: https://spreadsheets.google.com/feeds/cells/PUT-KEY-HERE/1/p...

Теперь в своем веб приложении ты можешь получить данные и использовать их как захочешь.

P.s Если тебе нравится it, и ты полностью хочешь погрузиться в этот мир, то советую свой Telegram канал: t.me/AlphaCodeJS и Instagram: @alpha.code.js можно увидеть обзоры книг по программированию/Юмор/ и много других новостей из мира it.

Показать полностью 1

Программирование Web IT Разработчики HTML Javascript

4

deh4567

4 года назад

Что такое Ember.js?⁠⁠

Ember.js — зрелый фронтенд фреймворк, получивший много внимания в последнее время.

Ember.js вобрал в себя множество современных JavaScript концепций и технологий. Вот их неполный список:

●Транспайлер Babel для полноценной поддержки ES2015 синтаксиса.

●Поддержка юнит, интеграционного и приемочного тестирований с помощью Testem и QUnit.

●Brocolli.js для сборки ассетов.

●Поддержка live-reload для сокращения отклика во время разработки.

●Шаблонизация с использованием Handlebars.

●Навигация в любую часть приложения благодаря

системе роутинга.

Полная поддержка JSON API, но при этом присутствует возможность использовать любой API, который вам необходим.

Для работы с Ember.js предполагается, что у вас установлены свежие версии Node.js и npm.

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

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

Показать полностью 1

Программирование Web IT Разработчики HTML Javascript

7

44

STINGRAY.DEVELOP

4 года назад

Лига программистов

Во все тяжкие: Веб-разработчик с нуля. 16 месяцев⁠⁠

Воинское искусство обладает такой силой, что может из простолюдина сделать Короля, а из Короля - простолюдина. Никколо Макиавелли

Цель — Senior Frontend Developer.

Язык: JavaScript / TypeScript.

Возраст: 29 лет.

Работа (настоящее время): Middle Frontend Developer в компании "Open Solutions".

Локация: г. Санкт-Петербург.

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

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

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

Что хочу отметить касательно собеседований на позицию middle? Во-первых, почти во всех компаниях (в том числе куда я устроился) помимо устных ответов на вопросы, которые задают на позицию junior, здесь ты решаешь задачи и пишешь код онлайн. Во-вторых, касательно вопросов - вопросы разные, помимо базы javascript и фрэймворков, здесь задают вопросы о том, как бы ты решил ту или иную реальную конкретную задачу.

Итак, уже две недели я тружусь в компании Open Solutions на удаленной основе. У меня сейчас выстроена 3-х месячная система повышения уровня квалификации (это по желанию), где у меня есть более опытный коллега, который поставил мне задачу на самостоятельное изучение конкретной плоскости и каждый месяц буду делать отчет что получилось и что нет. Сейчас у меня уклон идет в SSR. То есть уход от SPA в изоморфные приложения.

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

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

Кстати, теперь могу спокойно ехать хоть в Турцию и жить там очень комфортно, но сейчас это не актуально.

Памятуя традицию еженедельных отчетов:

- Решил несколько тестовых заданий по React (не выкладываю в репу с тестовыми, так как еще рано, компании их еще высылают соискателям);

- Прочитал книгу Scott Chacon - ProGit (рекомендую тем, кто хочет узнать полезные команды системы контроля версий и проникнуть внутрь git);

- Посмотрел выступление рендеринг на стороне сервера;

- Прошелся по верхам Next.JS;

Да, ты спросишь, а как связаны данные новости с обложкой поста?

Всё просто. Помимо программирования я интересуюсь воинскими искусствами и планирую восстановить тренировки, для чего ищу спарринг-партнера.

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

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

ЛОКАЦИЯ: САНКТ-ПЕТЕРБУРГ. (более точное место определим позже, пока погода позволяет будем тренироваться на улице).

Что конкретно будем рассматривать в ходе тренировок:

- Стиль бокса Каса Д'амато (тренер и наставник Майка Тайсона);

- Испанское неаполитанское и палермитанское фехтование;

- Работа с ножом и против ножа(в том числе голыми руками);

- Работа со стилетом;

- Работа с другими видами оружия;

- Как всё это интегрировать в жизнь и т.д.

Начальная экипировка и оружие для занятий у меня есть, далее будем уже докупать.

Я думаю каждый мужчина должен уметь постоять за себя, за семью и за слабого.

Пиши в телеграм, если есть желание составить мне компанию: @artem_owiii

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

Всем удачи и реализаций!

Показать полностью

[моё] IT Программирование Javascript Веб-разработка Frontend Web Длиннопост

47

DELETED

4 года назад

Аккордеон на грязном jQuery⁠⁠

Учебный пример! Не использовать нигде!

HTML

Добавим только триггер и содержимое:

<button class="js-accordion">
Click me?
</button>
<div class="content">
Lorem, ipsum dolor sit amet consectetur adipisicing elit. Hic iure eaque id repudiandae autem doloremque asperiores dolorum ullam molestias! Quidem sint quis quam quisquam at rem repellat! Magni, doloribus eaque!
</div>

CSS

Скрываем содержимое по умолчанию:

.content {
display: none;
}

jQuery

// При клике на кнопку
$('.js-accordion').on('click', function() {
// раскрываем следующий элемент
$(this).next().slideToggle();
});

В итоге вся магия в методе .slideToggle(). Можете еще почитать о .next() и .on(), хотя пожалуй не стоит. Лучше посетите мой codepen :)

Показать полностью

[моё] Frontend Javascript Jquery Web IT Программирование Web-программирование Верстка Текст

5

Партнёрский материал

specials

Сколько нужно времени, чтобы уложить теплый пол?⁠⁠

Точно не скажем, но в нашем проекте с этим можно справиться буквально за минуту одной левой!

Попробовать

Ремонт Теплый пол Текст

5

DELETED

4 года назад

Аккордеон на чистом JS⁠⁠

Давайте разберемся как сделать аккордеон на ванильном JavaScript.

HTML

<dl>
<dt class="question js-accordion">
<button class="question__trigger" type="button">First Question?
</button>
</dt>
<dd class="answer">
<div>
Lorem ipsum dolor sit amet consectetur adipisicing elit. Id, itaque quisquam? Quia cum alias in, beatae soluta dicta fuga corrupti magni? Alias minus nostrum qui at corporis, magni optio ipsam!
</div>
</dd>
<dt class="question js-accordion">
<button class="question__trigger" type="button">Second Question?</button>
</dt>
<dd class="answer">
<div class="answer__content">
Lorem ipsum dolor sit amet consectetur adipisicing elit. Id, itaque quisquam? Quia cum alias in, beatae soluta dicta fuga corrupti magni? Alias minus nostrum qui at corporis, magni optio ipsam!
</div>
</dd>
</dl>

Что сразу бросается в глаза, так это теги dl, dt, dd. Почему нельзя просто везде использовать div?

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

Разберем по частям:

<dt class="question js-accordion">
<button class="question__trigger" type="button">First Question?
</button>
</dt>

В dt помещаем вопрос, но для чего оборачивать его в кнопку? Опять семантика: когда пользователь кликает на элемент — что-то должно произойти, для этого необходимо использовать button.

Вторая причина — доступность через клавиатуру: на аккордеон можно попасть через tab и раскрыть через пробел.

<dd class="answer">
<div>
Lorem ipsum dolor sit amet consectetur adipisicing elit. Id, itaque quisquam? Quia cum alias in, beatae soluta dicta fuga corrupti magni? Alias minus nostrum qui at corporis, magni optio ipsam!
</div>
</dd>

В dd кладем ответ, обернутый в дополнительный div?

Дело в том, что для того чтобы анимировать «раскрытие» аккордеона, необходимо знать высоту ответа.

.answer {
overflow: hidden;
height: 0;
transition: height 0.5s;
}

В неактивном состоянии тег answer имеет нулевую высоту, поэтому мы помещаем в него дополнительный div, размер которого мы и будем измерять.

Как только аккордеон будет раскрыт — мы присвоим answer ранее измеренную высоту.

JavaScript

Найдем все аккордеоны на странице и инициализируем их:

const elements = [...document.querySelectorAll('.js-accordion')];
elements.forEach(accordion);

Воспользуемся замыканием:

function accordion(element) {
// объект, в котором будем хранить всю необходимую информацию
const instance = {};
function init() {
// найдем вопрос и ответ
findElements(instance, element);
// измерим высоту ответа
measureHeight(instance);
// добавим логику нажатия на кнопку
subscribe(instance);
}
init();
}

findElements

function findElements(object, element) {
const instance = object;
// element - это "вопрос", по которому происходит нажатие
instance.element = element;
// target - это "ответ", который должен "раскрываться"
instance.target = element.nextElementSibling;
}

Если вспомнить разметку — ответ всегда идет следом за вопросом, поэтому мы и используем свойство nextElementSibling.

measureHeight

function measureHeight(object) {
const instance = object;
// вычисляем высоту ответа
instance.height = object.target.firstElementChild.clientHeight;
}

В то время, как target имеет нулевую высоту, у его потомка размер остался тем же. Этот самый размер мы и сохраняем.subscribe

Аккордеон на чистом JS Аккордеон, Javascript, Frontend, Web, IT, HTML, Программирование, Web-программирование, Гифка, Длиннопост

У answer высота — 0, а у answer__content — нет

subscribe

function subscribe(instance) {
instance.element.addEventListener('click', (event) => {
// отменяем "действие по умолчанию"
event.preventDefault();
// меняем состояние аккордеона
changeElementStatus(instance);
});
// если размер окна поменяется - измерим высоту ответа заново
window.addEventListener('resize', () => measureHeight(instance));
}

changeElementStatus

function changeElementStatus(instance) {
if (instance.isActive) {
hideElement(instance);
} else {
showElement(instance);
}
}

Если аккордеон активен — сворачиваем его, иначе — раскрываем.

hideElement и showElement

function hideElement(object) {
const instance = object;
const { target } = instance;
// обнуляем высоту ответа
target.style.height = null;
// делаем статус неактивным
instance.isActive = false;
}
function showElement(object) {
const instance = object;
const { target, height } = instance;
// задаем ответу сохраненную в measureHeight высоту
target.style.height = `${height}px`;
// делаем статус активным
instance.isActive = true;
}

Как всегда — демо на codepen.

Показать полностью 2

[моё] Аккордеон Javascript Frontend Web IT HTML Программирование Web-программирование Гифка Длиннопост

9

Javascript + Web

С этим тегом используют

Топ моих любимых фреймворков и библиотек JavaScript⁠⁠

Топ-5 моих любимых плагинов для Visual Studio Code⁠⁠

Ниоткуда появляется gulpfile.dev.js⁠⁠

Использование Google Spreadsheet как JSON бэкенд⁠⁠

Что такое Ember.js?⁠⁠

Во все тяжкие: Веб-разработчик с нуля. 16 месяцев⁠⁠

Аккордеон на грязном jQuery⁠⁠

Сколько нужно времени, чтобы уложить теплый пол?⁠⁠

Аккордеон на чистом JS⁠⁠