Сообщество - Web-технологии

Web-технологии

534 поста 5 786 подписчиков

Популярные теги в сообществе:

52

Английский для IT. Как учиться программисту. Часть 1

С чего начать?


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


Именно поэтому каждый IT-специалист должен владеть им на хорошем уровне.

Что понадобится изучать/повторять в первую очередь? Основы. Основы, Карл.

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

По аналогии, это как пытаться разобраться в Node, плохо представляя себе JS.

Без выученных основ так же невозможно полноценное устное общение с англоязычной командой/ заказчиком.

Это как пытаться писать код, плохо владея синтаксисом языка программирования.


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


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

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


Одной из таких классификаций является международная система CEFR (Общеевропейские компетенции владения иностранным языком).

Данная система может применяться ко всем европейским языкам.

Так выглядят уровни владения английским языком по шкале CEFR:

A — Элементарное владение (Basic User):

A1 — Уровень выживания (Survival Level — Beginner и Elementary)

A2 — Предпороговый уровень (Waystage — Pre-Intermediate)

B — Самостоятельное владение (Independent User):

B1 — Пороговый уровень (Threshold — Intermediate)

B2 — Пороговый продвинутый уровень (Vantage — Upper-Intermediate)

C — Свободное владение (Proficient User):

C1 — Уровень профессионального владения (Effective Operational Proficiency — Advanced)

C2 — Уровень владения в совершенстве (Mastery — Proficiency)

Существует много онлайн тестов разной степени толковости, ссылки на которые выдает гугл по запросу "тестирование уровня английского языка онлайн".


Можно пройти (несколько), и приблизительно определить свой уровень знаний, чтобы в дальнейшем отталкиваться от этого для подбора учебного материала для самостоятельного изучения (если вы решили заниматься самостоятельно). Если вы решили заниматься на курсах - то там тестирование будет, скорее всего, первым, что произойдет, после оплаты и поступления. Третий вариант - индивидуальное обучение.


Подробно об уровнях владения английским, и различиях в обучении (самостоятельное/курсы/обучение с индивидуальным преподавателем) в следующем посте, а пока предложение пикабушникам-программистам:

Бесплатное изучение английского. В обмен на обучение программированию.

Я вам преподаю английский, вы мне - программирование

Стек - Node.JS + MongoDB.

Что есть: базовые знания JS + Node

Мой уровень английского С1-С2, изучаю и пользуюсь им ежедневно, начиная с начальных классов школы, использовал в профессиональной деятельности, использую и сейчас.

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

Формат: онлайн (например, Teamviewer + голосовое общение в мессенджере).

Telegram: t.me/ax_el5 (убрать нижнее подчеркивание)

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

Эффект неонового свечения текста HTML CSS

Всем привет, новое видео от меня!


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


Важно! Это не уроки! Если ты неделю в вебе, то скорей всего ничего не поймешь! У меня нет цели кого-то учить, так как я считаю, что уроков и курсов и так полно на просторах интернета. Я делаю разнообразные задачки для себя в не скучном формате, чтобы всегда была практика и решил поделиться с другими, чтобы была возможность получить готовый код, адаптировать готовое решение под себя или попробовать реализовать тоже самое для практики (практика главное в разработке!). Критика и советы по поводу того, что убрать, что добавить, приветствуются. Также буду рад разбору кода и комментариям по нему.


CodePen: https://codepen.io/crazycoding21/pen/VwpXxwj

GitHub: https://github.com/CrazyCoding21/CC-HTML-CSS-6-Neon-Text-Eff...

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

Эффект падающих звезд HTML CSS | Flying Stars Effect

Всем привет, новое видео от меня! Создаем эффект падения звезд на чистом HTML/CSS. Полностью рабочее решение для твоего будущего сайта, которое можно адаптировать под себя или изменить. Сам эффект можно адаптировать под себя увеличив количество элементов, изменив их внешний вид, цвет и прочее. Также можно легко настроить саму анимацию движения "звезд" как вам захочется.


Важно! Это не уроки! Если ты неделю в вебе, то скорей всего ничего не поймешь! У меня нет цели кого-то учить, так как я считаю, что уроков и курсов и так полно на просторах интернета. Я делаю разнообразные задачки для себя в не скучном формате, чтобы всегда была практика и решил поделиться с другими, чтобы была возможность получить готовый код, адаптировать готовое решение под себя или попробовать реализовать тоже самое для практики (практика главное в разработке!). Критика и советы по поводу того, что убрать, что добавить, приветствуются. Также буду рад разбору кода и комментариям по нему.


CodePen: https://codepen.io/crazycoding21/pen/GRWEJNO

GitHub: https://github.com/CrazyCoding21/CC-HTML-CSS-3-Flying-Stars-...

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

No pain, no gain: Вайтишник который смог ч.2

No pain, no gain: Вайтишник который смог ч.2

Цель: Midde Frontend Developer

Срок: Июль

Обо мне:  20 лет, студент 3 курса

Работа: Junior Frontend Developer в компании "ZenCode".


«Ум, растянутый новым опытом, никогда не сможет вернуться к своим прежним размерам». – Оливер Уэнделл Холмс

Привет всем! Как ваши успехи? Не ожидал, честно говоря, такой активности под прошлым постом. Рад что все-таки решил довести историю до конца) Сегодня расскажу, как развернулась моя история после первого собеса. Кто не читал - можете ознакомится с предыдущим постом.

Глава 5. Тестовое задание
Тестовым заданием оказалось приложение на vue под готовый бэкенд на питоне. Обычное todo с 3мя страницами: авторизация, создание todo айтема, список готовых айтемов с возможностью удаления/редактирования, отметки "избранное". Так как я до этого не работал с vue и нужно было установить ubuntu для развертки бека - дали пару дней на то чтобы поковыряться во всем этом. Самой сложной частью оказалась развертка бека, тк там не хватало одного файла и плюс я не туда воткнул конфиг. В итоге приложение было написано (его можете посмотреть у меня на гите: https://github.com/H1dEx/sobes-vue-app). Потом было довольно долгое ожидание фидбека. Сначала ссылались на то, что из-за короны высокая нагрузка/нельзя попасть в офис и тд. В итоге недели через 2 - указали на основные недочеты: нет четкого кодстайла - то есть точки с запятыми, то нет;  используются и promise и async await а не что-то одно, и еще советы по разбиению стора, но так как мой первый опыт во вью - сказали, что круто. И все. Принят или нет - никакой инфы. В итоге получил ответ, что пока нет проектов, и меня возьмут только когда будет новый проект, а это, по словам, 3-4 месяца. Зачем меня позвали на собес сейчас, если нанимать не планировали - не понятно. В итоге я написал, что готов пойти на стажировку в другую команду, но мне сказали, что, пока я метался, появились еще кандидаты и нужно будет пройти еще один собес. Так как до него было еще недели 2 я начал проходить 2й курс "Пути самурая", что мне в последствии послужило плюсом.

Глава 6. Второй собес
Началось все не лучшим образом, собеседование должно было начаться в 10 часов, а встал я, как сейчас помню, в 10:02, в телеге мне уже написали, что меня ждут. Я объяснил ситуацию, извинился и сказал, что буду через 10 минут, если мне дадут такую возможность. В итоге мне пошли на встречу, я заказал такси, наспех собрался и, добрался как обещал. Оказалось, что я не тот человек, которого можно разбудить и он ответит тебе на все вопросы. Я сидел не проснувшийся и еле мог связать 2 слова, меня спасло то, что я уже довольно неплохо прошел первый собес, сдал тестовое + посмотрели мой гитхаб и отметили что я начал использовать typescript (ну и то, что я использую git соответственно). В итоге, практически без каких-либо вопросов мне сказали что я принят на стажировку.

Глава 7. Стажировка
Не знаю, стоит ли мне рассказывать про проекты, которые я делал на стажировке. Возможно это будет полезно для тех, кто начинет с 0 или кто хочет узнать, что его может ожидать на стажировке. Если будет положительный отклик - залью исходники к себе на гитхаб и перескажу тз насколько помню - может кому пригодится в качестве практики. Если в кратце, то это был мой первый опыт работы с нодой. Нужно было написать телеграм бота напрямую через api телеграмма, без использования готовых библиотек для этого. Потом написать небольшой сервер на ноде, который будет записывать данные, полученные ботом в бд, и генерировать простенький сайт с помощью шаблонизатора и отравлять его пользователю. Дальше уже были усложнения, в виде добавления AJAX, пагинации на скролл, и закончилось на создании webpack конфига для react-typescript приложения (это было не приятно), и переноса всего функционала сайта на react.


Теперь подробнее про материалы, которые мне посоветовали. Сказали пройти задания Flexbox Froggy (который уже несколько раз до этого проходил, поэтому заняло пару минут), learngitbranching (который  я уже видел, но так и не проходил до конца). Кстати, советую пройти его раза 2-3, вчитываясь в теорию, потом полюбому пригодится. Задали прочитать цикл книг You don`t know js (рус, eng) желательно на инглише, тк большинство документации с которой в дальнейшем столкнетесь - на нем. Скажу по себе, я купил однажды книгу по js, но так и не прочитал даже половину, поэтому это первая книга (не считая learnjs), которую я прочитал. Мне посоветовал ее опытный чел, поэтому не вижу причин, чтобы ее не рекомендовать. Мне лично она показалась довольно глубокой, хотя мне не с чем сравнивать, поэтому доверюсь чужому опыту.

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

Если заинтересовал стажерский проект - дайте знать, поищу исходники, попробую восстановить тз. Кстати, буду рад подписке на гитхаб) Всем удачи!

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

Простой квиз (опросник) на JavaScript HTML CSS

Всем привет, новое видео от меня! Создаем простой квиз для сайта на чистом JavaScript + HTML/CSS. Полностью рабочее решение для твоего будущего сайта, которое можно адаптировать под себя или изменить. Такой опросник можно использовать на любом сайте и адаптировать под себя. Количество вопросов и вариантов ответа не ограничено.


Важно! Это не уроки! Если ты неделю в вебе, то скорей всего ничего не поймешь! У меня нет цели кого-то учить, так как я считаю, что уроков и курсов и так полно на просторах интернета. Я делаю разнообразные задачки для себя в не скучном формате, чтобы всегда была практика и решил поделиться с другими, чтобы была возможность получить готовый код, адаптировать готовое решение под себя или попробовать реализовать тоже самое для практики (практика главное в разработке!). Критика и советы по поводу того, что убрать, что добавить, приветствуются. Также буду рад разбору кода и комментариям по нему.


CodePen: https://codepen.io/crazycoding21/pen/QWpGvLb

GitHub: https://github.com/CrazyCoding21/CC-JavaScript-31-Quiz-Proje...

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

No pain, no gain: Вайтишник который смог ч.1

No pain, no gain: Вайтишник который смог ч.1

Цель: Junior Frontend Developer Midde Frontend Developer

Срок: Апрель Июль

Обо мне: Студент 3 курса, 20 лет

Работа: Junior Frontend Developer в компании "ZenCode".

Я бежал потому что надо было бежать. Я не думал о том, куда это меня приведёт.
фильм "Форест Гамп"
Привет всем! Не уверен, что кто-то, вообще, ожидал нового поста, так как их не было почти год. Статьи, как заметили в комментариях, начали скатываться в "мой дневничок...", а это не то, чем хотелось заниматься) Недавно зашел на pikabu, чтобы проверить как идут дела у @OWIII, так как в начале меня сильно мотивировал его блог, но последний пост что-то не порадовал, хотя каждому свое. Этот пост нацелен в основном на вайтишников, хотелось бы поделится позитивным опытом, и в целом, теми знаниями, которые мне бы самому не помешали на момент изучения.

Глава 1. Коронавирус
Для моего трудоустройства это был ключевой момент, когда объявили первые 2 недели каникул в вузах - я понял, что это идеальный момент для того, чтобы полноценно взяться за ReactJS. Карантин оказался идеальным временем чтобы запереться дома и просто ботать, к тому же мне очень повезло найти в youtube отличный курс по React + Redux Путь Самурая. Сейчас он, возможно, будет немного староват, так как там в основном используются классовые компоненты, хуки появились только в последних видосах, но вам все равно придется столкнуться с классовыми компонентами, а самые модные штуки по типу функциональных компонентов и Typescript - есть во втором сезоне. Осилил я первый сезон чуть больше чем за месяц, после чего автор канала советовал не смотреть второй сезон пока не устроишься на работу.

Глава 2. Поиск работы
Посмотрев видео собеседований frontend разработчиков я отметил для себя основной пул вопросов и ответов на них (как всегда learn.javascript.ru очень выручил), я выложил резюме на hh. Знакомых в кругах it у меня на тот момент не было, поэтому мне никто не сказал, что это не лучший выбор. Недавно узнал, что нужно использовать linkedIn и ХабрКарьеру. Но на тот момент я знал только про hh. Выложив резюме со спокойной душой пошел закрывать гору долгов по вузу, которая накопилась пока я разбирался с программированием. Я рассчитывал, что если не найду работу до нового учебного года - пойду дальше в вуз и скрою анкету.

Глава 3. Итоги резюме
Из откликов была предложена только 1 вакансия и та по 1С. Я уже планировал закрывать резюме буквально на следующей неделе, как мне написали в телегу, что хотят пригласить на собеседование. Должен сказать, что живу не в самом провинциальном городе (Пенза), поэтому вакансию найти очень даже возможно. Те же ребята из open solutions, которые есть много где, постоянно набирают людей (не работал там, поэтому не могу сказать ничего о них). Из советов могу повторить, что использовать hh конечно круто, но так же нужно ОБЯЗАТЕЛЬНО разместить резюме в linkedIn и Хабр карьере (не повторяйте моих ошибок).

Глава 4. Собеседование
Совру, если скажу что не волновался перед первым собесом, но когда он уже начался - все пошло как по маслу, ответил, насколько я помню, на все, только про БЭМ - ответил что знаю что это такое и зачем используется, но сам не применял. Вопросов про react и по html/css не было, онли js. По итогу предложили 2 варианта, написать тестовое в один отдел и пойти на джуна, либо еще один собес на стажера. Из минусов - первое предложение на vue, и соответственно нужно было написать тестовое задание на vue, во втором - react.

Продолжение во второй части...

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

Во второй части поделюсь материалами, которые посоветовали изучить уже после трудоустройства.

Всем удачи/
Показать полностью
66

Как без пиратства и покупки платного ПО пользоваться макетами Adobe XD

Формат файла Adobe XD представляет из себя архив, который содержит описание структуры макеты в виде JSON структуры, графических растровых и векторных файлов использованных при создании макета.


Стандартный метод — открыть в программе Adobe XD — нужна программа купленная за деньги (подписка).

Использовать сервис-конвертор XD2SKETCH.COM — за деньги (подписка или платное разовое использование).

Программу-сервис Avocode — за деньги.
Кроме того, некоторые программы работают только в среде Mac OS (Sketch - только MAC OS или веб-приложение)

И тому подобное.


Чтобы открыть макет Adobe XD бесплатно, можно воспользоваться бесплатной программой-сервисом Photopea — в этом случае видны все параметры объектов макета и даже доступ к CSS значениям реализован удобнее чем в Photoshop. А вот реализация извлечения растровых объектов из макета, для внедрения в вёрстку, немного подкачала, на мой вкус.


Чтобы получить объекты из файла Adobe XD, достаточно открыть его как Zip-архив, например с помощью архиватора 7-Zip. В результате получим несколько папок с ресурсами JSON, XML, и папкой с растровыми объектами: «resources».


Содержащиеся там файлы будут без расширений, но это решается просто переименованием, с добавлением соответствующего расширения. Если есть сомнения в том, какое расширение необходимо, достаточно открыть файл в программе Notepad++ или в другом тактовом редакторе. У файлов формата PNG в первой же строчке будет «‰PNG». У SVG-файлов будет так же видна вся XML структура присущая SVG-файлам.


Итого, файл макета открыт в Photopea — данные CSS доступны для переноса. Папочка с графикой для вставки в вёрстку — готова.

Кроме того, из Photopea можно сохранить в PSD, который открывается некоторыми бесплатными просмотровщиками и редакторами.

Возможно, подход не оригинальный. Но уж чем богаты.

Вероятно есть и более простые методы.

Показать полностью
Отличная работа, все прочитано!