Горячее
Лучшее
Свежее
Подписки
Сообщества
Блоги
Эксперты

Frontend + Web

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

IT Программирование Javascript IT юмор Веб-разработка Программист Web-программирование Сайт Дизайн Все
122 поста сначала свежее
26

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

Во все тяжкие: Веб-разработчик с нуля. 17 месяцев IT, Программирование, Карьера, Javascript, Веб-разработка, Frontend, Web, Длиннопост

Путь познается в тренировках(принцип из книги земли Миямото Мусаси).


Цель — Senior Frontend Developer.

Язык: JavaScript / TypeScript.

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

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

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


Привет! Как у тебя дела? Сколько всего достойного и полезного сделал за последний месяц?


Вот пролетело уже почти два месяца, как я разрабатываю интерфейсы в компании "Open Solutions". Что могу сказать? Могу сказать, что этот месяц был крайне трудным, я столкнулся и с плохим менеджментом на одном проекте и с крайне сложно замудренной архитектурой другого проекта, где столько запихали абстракций и оберток на обертке, что по началу вообще непонятно, что куда и откуда передается и зачем. Сейчас уже потихоньку начинаю втягиваться.


Что я изучил, либо начал изучать в последний месяц:


1. Курс по Node.JS(20% прошел);

2. Курс по devOps(20% прошел);

3. Книга Властон Феррейра Фило - "Теоретический минимум по Computer Science".(хех, да, да, да);

4. Начал осваивать создание ботов в телеге. Есть идея для себя бота сделать определенного;

5. Время от времени верстаю какие-нибудь формочки, карточки по гайдам с ютуба. Чтобы не забыть верстку и узнать что-то новое.


Да, как вы заметили, я ощутил острую нехватку знания систем по деплою, тестированию и интеграции. А то я пишу код, а что дальше с ним происходит - загадка. Как в черную дыру проваливается. Вот, решил подтянуть этот момент и освоить основы девопс.

Второй момент - это минимальные знания бэкенда. Необходимость возникла в ходе изучения SSR и Next.js.


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


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

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


Всем результативного месяца!


П.С. Желающие начать тренировки по воинскому искусству в г. Санкт-Петербург - пишите. Эти навыки никогда не будут лишними в жизни.


Я на связи:

почта: owiii.dev@gmail.com
телега: @artem_owiii

инста

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

Ниоткуда появляется 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
44

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

Во все тяжкие: Веб-разработчик с нуля. 16 месяцев IT, Программирование, Javascript, Веб-разработка, Frontend, Web, Длиннопост

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


Цель — 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
4

Быстрый хостинг проекта / surge.sh⁠⁠

Вот ссылка:

https://surge.sh/


Вот видео:

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


surge — веб сервис, который позволяет опубликовать frontend приложение буквально двумя командами. Он будет вам полезен если вам нужно временно опубликовать проект в интернете.


А сейчас я начну «переписывать» документацию.

Установка

npm install --global surge

Запуск

surge


Подготовка к деплою

Итак, у нас есть проект

Быстрый хостинг проекта / surge.sh Web, Frontend, HTML, CSS, Хостинг, Видео, Длиннопост

Переходим в терминал и запускаем surge

surge

Деплой

После регистрации подверждаем путь к проекту, указываем желанный домен и жмем enter.

Быстрый хостинг проекта / surge.sh Web, Frontend, HTML, CSS, Хостинг, Видео, Длиннопост
Быстрый хостинг проекта / surge.sh Web, Frontend, HTML, CSS, Хостинг, Видео, Длиннопост

Готово, вы в интернете!


Целью данной статьи было не научить чему-то, а показать, что такой сервис в принципе существует и как просто с ним работать.


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

Показать полностью 3
Web Frontend HTML CSS Хостинг Видео Длиннопост
3

Аккордеон на грязном 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
5

Аккордеон на чистом 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;
}

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

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

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

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

Это даже не статья, а пересказ документации, но для ознакомления все же напишу.


Весь способ заключается в двух тегах:

<details>
 <summary>How to create accordion without JavaScript?</summary>
 Lorem ipsum dolor sit amet consectetur, adipisicing elit. Facilis id recusandae tempore nam placeat ratione accusantium maiores nobis velit, incidunt, hic, omnis dolorem possimus. Hic porro tenetur fugiat blanditiis iste.
</details>

— Весь контент оборачиваем в details;

— Вопрос в summary;

— Все остальное пишем следом.


Нужно помнить о двух вещах:

— details нельзя анимировать.

— Отсутствует поддержка IE.


Если для вас это не проблема — смело используйте.

А демо смотрите у меня codepen :)

HTML Web IT Frontend Аккордеон Текст
6
Партнёрский материал

Даже получать удовольствие ты должен с коммерческой выгодой для себя ©⁠⁠

Так говорил греческий судовладелец, миллиардер Аристотель Онассис. Миллиардеры, конечно, живут немножко иначе, но этот принцип вполне распространяется и на «простых смертных». Давайте посчитаем, какую выгоду вы получаете.

Посчитать

Бизнес Выгода Текст
33

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

Во все тяжкие: Веб-разработчик с нуля. 15 месяцев IT, Программирование, Javascript, Веб-разработка, Frontend, Web, Длиннопост, Фриланс

Ничего из ничего не возникает.(с) Липот Сонди


Цель — Senior Frontend Developer.

Язык: JavaScript / TypeScript.

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

Работа (настоящее время): Junior Frontend Developer в компании "Корус Консалтинг СНГ".

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


Привет! Уже заметил? Да, в Корусе меня уже не найти. Опять мне не сидится на месте и не работается? Выходит, что так. После предыдущего поста, где я высказал недовольство тем, что мне не подняли зарплату после обучения, мне её таки повысили. Немного, но подняли! ( Да, блог читают коллеги из Коруса).  Так, почему я всё равно ушел из дочки Сбербанка?


Дело не в зарплате и не в том,что в Корусе что-то мне не нравилось. После сотрудничества с этой компанией у меня остались хорошие впечатления. Во всяком случае я работал с замечательными людьми. И оставшись я там, вероятно я бы быстро развивался и рос как разработчик(...но это же просто и скучно, обязательно нужен драйв).


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


Что за страна? Поедем в Турцию сначала поживем, а там поглядим. В общем-то, я давно хотел работать на удаленке из теплой страны. Удаленная работа - это одна из задач, которую я в том числе преследовал, когда выбирал сферу для профессиональной деятельности больше года назад. Что буду делать в Турции?


Поглядим, может устроюсь на удаленку в компанию, но есть мысли уйти во фриланс, сейчас изучаю площадки и особенности работы в этой плоскости и что там вообще востребовано. Есть среди моих подписчиков люди, занимающиеся фрилансом? Может советов дадите? Про особенности веб-разработки расскажите? Я сейчас не про разработку сайтов на wordpress и тильда, а про задачи связанные с моим стеком(React, Redux, TS) или около-моим(Vue, React Native).

Господа и дамы фрилансеры, можете что-то посоветовать? Буду благодарен.


Так как у меня высвободилось время, то в свободное время я начал изучать(или уже изучил):


1. Луис Атенсио - Функциональное программирование(толковая книжка);

2. Филипп Робертс: Что за чертовщина такая event loop? (пересматривал и закреплял, лучший доклад по этой теме);

3. Генераторы в JS;

4. Итераторы в JS;

5. Наконец-то я прочитал всю доку по React.js. Конечно возвращаться еще буду, но зато знаю где и что можно быстро найти;


Есть еще у меня мысли кое-какие, но то больше некие философские концепции и имеют больше отношение в целом к жизни, а не к конкретно программированию(но применять можно и в программировании).

Интересно было бы об этом читать?(могу сделать отдельную "рубрику" и иногда пилить посты на иные темы).


Контакты: Instagram, Github.

Показать полностью
[моё] IT Программирование Javascript Веб-разработка Frontend Web Длиннопост Фриланс
37
Посты не найдены