Всем привет :)
Ищу интересные задачи для тренировки скиллов по JS + HTML + CSS
С удовольствием возьмусь за небольшие задачи самостоятельно, или стану частью команды на среднем+ проекте.
К Гиту приучена :)
Временем располагаю ± 4 часа ежедневно.
Опыт работы — 2 года, полную занятость не рассматриваю — на данный момент работаю в компании, где обеспечили всем, кроме интересной и разнообразной работы (почти как брак по расчету :) )
Хватайте ідею, вона дуже проста:
1. Шукаєте по ключовим словам старенькі JavaScript бібліотеки, що набрали велику кількість зірочок на github.com.
2. Переписуєте їх на ES2015+ або ще краще на TypeScript + ES2015. Це особливо важливий пункт, про це слід пам’ятати, бо ви по-суті якраз тут дуже добре ростите як розробник, ну і пишете собі дуже наглядне портфоліо.
3. Викладаєте результат на github.com
4. Проводите SEO, в тому числі завдяки міткам на github.
5. Згадуєте це у своєму резюме.
Переписуєте їх на ES2015+ або ще краще на TypeScript + ES2015.
нахрена? Переписать на ES2015, это что пройтись var на let c констом поменять и послать пратифный arguments на три точки?
Навіть якщо робити простий рефакторинг на тій же версії JavaScript, це вже дозволить прокачувати свої навички, бо можна побачити як вирішуються певні задачі в популярних бібліотеках.
Переписать на ES2015, это что пройтись var на let c констом поменять и послать пратифный arguments на три точки?
Конкретний приклад. Прогляньте ось цей дуже популярний модуль для перетворення Markdown-тексту у HTML-код. Вам нічого не хочеться змінити у ньому?
Мені, наприклад, захотілось розбити один файл з 1286 рядками на декілька файлів, благо — зараз досить легко це зробити з новими import { Some } from './path/to/file', з чіткими директивами export, з індексними барель-файлами. Тобто модульність у новій версії JavaScript однозначно покращена.
Йдемо далі. Бачите які класи використовуються у старому коді? ES2015 + TypeScript дозволяє писати набагато чіткіший код для ООП на JavaScript.
Йдемо далі. Ось автор назвав свою функцію replace(). Можна, по-перше, придумати більш описову назву для неї, а по-друге, логіка коду злегка заплутана... ось так вона викликається. Можна ж покращити читабельність цієї функціональності, так же?
Я переписав цю функцію у вигляді класу, розписав що вона робить. Ось так тепер відбувається виклик. Читабельніше? Зрозуміліще що відбувається? По-моєму що — так.
І т.д.
P.S. Я тільки почав переписувати цей модуль, ще немає релізу.
робити простий рефакторинг на тій же версії JavaScript, це вже дозволить прокачувати свої навички
Я сомневаюсь, что джуны могут что то значимое отрефакторить на популярных библиотеках, где часто уже не один десяток бывалых «старперов» померились своими паттернами. Только вот пройтись и менять семантику, которая нафиг никому не сдалась. Уж лучше просто изучать подходы в коде, и писать свою вандервафлю, желательно посложнее, чем реализация npm пакета типа isBoolean :)
Вам нічого не хочеться змінити у ньому?
кто знает, за 15 сек не скажешь, но эти изменения вряд ли бы коснулись перевода на семантику es6. Там кода весьма мало, чтобы заморачиватся битьем на модули, от чего еще либа наберет жирку на выходе. На каждый гвоздь по отдельному модулю по 10 строк, ну не знаю, это раздувание проблемы, тут не наблюдается острой необходимости, когда будет уже сложно удержать структуру кода в памяти одним файлом, иначе модули конечно надо, хотя это не есть новая фишка es6, с require жилось также.
ES2015 + TypeScript дозволяє писати набагато чіткіший
да-да, четче некуда:) ох этот тайп скрипт...
Можна ж покращити читабельність цієї функціональності, так же?
та весьма читабельно, привычно, даже лампово :) К тому же меньше кода, лучшая сжимаемость. У меня в js нет зуда переписывать все, как это было бы на джаве, а олдскульные паттерны привычные, краткие и весьма узнаваемые.
Я переписав цю функцію у вигляді класу, розписав що вона робить.
setGroup/getRegexp только место занимают, логика ведь там простая, целый класс плодить из функции ради двух методов... имхо и была бы это джава, то ок, но это не js-way отказываться от выработанных плюшек js и абсолютно все делать в рамках «взрослых» ЯП.
P.S. там опечатка в комментах «expretion».
Я сомневаюсь, что джуны могут что то значимое отрефакторить на популярных библиотеках, где часто уже не один десяток бывалых «старперов» померились своими паттернами.
Не обов’язково щоб результат цих намагань вилився у щось популярне. Достатньо просто подумати над логікою, спробувати написати щось краще, заміряти результати тестами...
ой, вот, только не надо приуменьшать.
дефолтные значения, реструктуризация, spread не только вместо arguments, но и вместо .apply, нативные промисы, генераторы, for .. of — неструктурные вещи и в большинстве своем делаются инлайново, не вникая в то, как дальше используется.
module/export/import — отлично ж ложится на реалии, webpack в тренде.
class, Symbol вместо булевских пропертей(выгода не очевидна) или строковых констант, async/await и Proxy — для этого уже надо будет колупаться, что происходит в коде, выгода при рефакторинге не так очевидна.
дефолтные значения
мелочь, но приятно
реструктуризация
таки достаточно удобно, лаконично, пожалуй нужная плюшка в нужных местах.
но и вместо .apply
apply быстрее, смысла огромного не вижу- производительность кроет лаконичность.
нативные промисы
это да, наверно, самая значимая фишка, хотя первые внешние реализации такие древние, что как то уже и не видишь связи с es6 :)
for .. of
Не знаю, юзаю крайне редко.
module/export/import
ну так себе, мне и require был неплох, конечно тут немного лучше.
webpack в тренде.
в тренде? хм, ну если для сборки всего фронтенда, а не только js... но я все же за rollup+gulp, особенно если собирать только js.
class
весьма спорная штука, не всегда и не везде. Функционально выходит единственная полезность наследование статических свойств, а не как раньше- анализ дерева предков и копирования/прокидывание методов в новый конструктор. Все таки тут оптимизация и настоящее наследование. Наследование встроенных объектов вообще незаменимое, но и очень редкое.
Symbol
тоже одна из значимых фич, хотя жизнь прям не изменила...
строковых констант
что есть, что нет... только семантика, хотя если там есть какая то оптимизация на движке...
async/await
четно говоря, мне промисы как есть лучше читаются. Ну а прокси да, полезная, но опять же редко юзается. Но это новый функционал, а не только сахар, так что must have. А так 95% нововведений просто лаконичная форма, функционально нового, того что раньше делать не могли в приемлемой форме там совсем мало. К тому же некоторые фичи медленнее своих «старых» паттернов.
к слову о скорости: какой профайлер вы используете?
ну время я меряю ручками, просто семплами через performance.now, кажется, более менее повторяемые результаты хоть выдает, потом уже в промежутках роюсь в профайлерах ff&chrome&v8-profiler... вообщем как все...
Заради інтересу можете глянути Benchmarks одних з найпопулярніших markdown parser and compiler. Вгадайте на якому місці мій оновлений marked-ts.
значит отрефакторили не только переводом на es6, а изменения коснулись и логики. Но ES6 тут не при чем, обычно как ни крути максимальный разгон кода в узких местах получаешь на все тех же патернах es5, с примесью es6.
Но ES6 тут не при чем
Так, ви праві, після аналогічної зміни в marked (той, який я форкнув), він обганятиме мій новий marked-ts на відсотків мабуть 15...
Задача ж не була чисто «переписати усе на ES2015+». На цей модуль багато зав’язано в моєму проекті, мені треба розширити його функціональність, щоб можна було писати до нього плагіни, наприклад для інтеграції з ним формул KaTex, але його вже активно не ментейнять...Тобто для мене це була більше — необхідність.
Разом з тим, мій проект закритий, я не можу його викласти для роботодавця, щоб він оцінив мої навички. Коли займаюсь рефакторингом open source, я росту і як розробник, і мені буде що показати через місяць, коли шукатиму роботу.
Задачки бывают. Но надо понимать что на выходе. Есть чего посмотреть из прошлого?
полную занятость не рассматриваю — на данный момент работаю в компании, где обеспечили всем, кроме интересной и разнообразной работы
самое время прокачать скилл и взять на вооружение более-менее нормальный JS фреймверк... Angular сразу не советую (значительно больший порог вхождения) хоть и являюсь его убежденным ценителем, а вот на Vue.js посмотреть рекомендую (плюс это и это)
нам, нормальным пацанам (ангулярщикам и vue-истам) эта react-секта уже вот где сидит, так что новый чел для баланса в стройных Vue-рядах — всегда позитив!!1 ))
learn c++ (part #2)
лучше learn Go (Валялкин подтвердит). :)
Собственно, вопрос был и он решен, однозначно помогли Volodymyr Spodaryk, Alexander Kureniov и Yurii Savka.
Всем спасибо, вы прекрасное сообщество :)
www.codewars.com/dashboard есть задачи по разным языкам и уровню сложности. Помимо своего решения, можно просматривать чужие и так обучаться.
Для поднятия уровня по js можно решать задачи с www.codewars.com/dashboard — есть задачи по разным языкам и уровню сложности. Помимо своего решения, можно просматривать чужие и так обучаться.
вариант, конечно. Но это всё те же кони в вакууме. Хотелось более-менее боевые условия
Можете спробувати скооперуватись:
dou.ua/forums/topic/21680
забавно, спасибо :)
Можеш спробувати зробити Postman для роботи з Websocket.
на данный момент интересна только vanilla :)
Можна спробувати підняти якийсь ресурс. Для фронтендера саме воно — написати сайт від самого початку до самого кінця.
Якщо є хоббі — можна зайнятися ним, якщо ні — можна вдарится в рекурсію і написати сайт, на якому будуть публікуватися маленькі проекти «на погратися» для фронтендерів :)
Настя Настя)
Возвращайся в 27. Там полно сейчас работы)))
ой нет, спасибо )
«лучше восемь пирогов и одна свечка» ©
Посмотрите примеры на Codrops, там очень много интересный приемов, например:
tympanus.net/...id-item-animation-layout
tympanus.net/...r-custom-select-elements
tympanus.net/...5/11/17/multi-level-menu
Или попробуйте разобраться с React, Vue.js, для будущей работы пригодиться ))
красивые примеры ) но там можно и css единым обойтись )
а React и Vue.js посмотрю, спасибо
посмотрите код примеров на github, JS там хватает, также посмотрите другие примеры, выберите что вам нравится
попробуйте разобраться с React, Vue.js, для будущей работы пригодиться
Лучше уж разобраться с фреймворком Vanilla JS. Он пригодится 100%, а во всяких реактах-шмеактах можно за недельку потом разобраться, при надобности.
Вы сами сначала попробуйте за недельку разобраться в React, а потом советуйте ))
Бросьте. Тут где-то мне кто-то отвечал, что ангулар освоил за пару дней на достаточном для работы уровне.
Похоже, это я был. Но это сильно зависит от предыдущего опыта. Начинающему в веб-разрабоке, понятное дело, это не реально.
Я много лет писал/пишу сайты на vanilla+jquery. Пытался разобраться в ангуларе, но за 2 дня только утонул в нем и не понял зачем все это мне. Мне на тот момент показалось, что к этому монстру даже подходить не следует.
После vanilla+jquery он может выглядеть монструозно, да. Мне, имея опыт с knockout.js и Polymer, понимая, веб компоненты и все такое было достаточно просто въехать в Angular.
Говоря «ангуляр», вы сокращаете название первой версии или говорите про вторую с четвертой и пятой?
Первая и вторая(она же 3, 4, и 5 версии в куче) отлично описывается теоремой Эскобара.
Первую версию. С тех пор больше не пытаюсь даже разобраться. К примеру когда читаешь vue.js начинаешь усваивать все почти сразу.
Для ответов на собесе и выполнения тестового недели хватает. А если там уже наворотил столько, что за неделю это не осилить, то есть гораздо более простые и не менее эффективные либы и фреймворки. Тем более, учитывая, что реакт это всего лишь вью-либа, то недельный срок вполне реален. Если под реактом подразумевался весь зоопарк всяких редаксов и прочей гадости -то, может и больше, но опять все зависит от выбора всех тех околореактовых штук.
Советую подать заявку в какую-то компанию где тестовое дают, и выполнить его, 2 зайца убьешь)
пробовала, тестовые рассчитаны на
Ищу интересные задачи для тренировки скиллов по JS + HTML + CSS
попробуй написать свой велосипед (библиотеку или фреймворк). :)
рановато еще (
Неочевидная истина: что не используется — забывается. Ещё более неочевидна скорость, с которой это происходит. Не веришь — вспомни всё, чему тебя учили на третьем курсе.
вот как раз этого и не хотелось бы )
цель? развлечься, получить новые навыки, потешить самолюбие, набить портфолио?
текущий уровень?
предпочтения по направлению?
цель «набить руку» на нативном JS
текущий уровень — Junior+
направление — web
«набить руку» так себе цель. тут нет настолько похожих друг на друга задач с идентичным идеальным решением, чтоб это имело смысл.
если в рамках прокачки навыков, то вопросы по promises на stackoverflow, интерактивные задачи по css, простенький проект на react или vuejs, возможности дебаггера в developer tools, удалённая отладка для мобильного, autoprefixer или postcss.
Если хочется работать — ляж поспи само пройдёт.
©народная мудрость
Могу подкинуть довольно интересную задачу по js-у. Ну а html-css — по желанию :).
Разработать функцию fileSearch (folder, filename), которая принимает 2 аргумента - список folder и строку filename, и возвращает строку - полный путь к файлу или папке filename в структуре folder. Файловая структура folder задается следующим образом: Список - это папка с файлами, его 0-й элемент содержит название папки, а все остальные могут представлять или файлы в этой папке (1 файл = 1 строка-элемент списка), или вложенные папки, которые так же представляются спискам. Как и в файловой системе компьютера, путь к файлу состоит из имен всех папок, в которых он содержится, в порядке вложенности (начиная с внешней и папку, в которой непосредственно находится файл), разделенных'/'. Считать, что имена всех файлов уникальны. Вернуть логическое значение False, если файл не найден. Вызов функции: fileSearch (['C:','backup.log','ideas.txt'],'ideas.txt') Возвращает:'C: /ideas.txt' Вызов функции: fileSearch (['D', ['recycle bin'], ['tmp', ['old'], ['new folder1','asd.txt','asd.bak','find. me.bak']],'hey.js'],'find.me') Возвращает: False Вызов функции: fileSearch (['/home', ['user1'], ['user2', ['my pictures'], ['desktop','not this','and not this',['new folder','hereiam.js']]],'work.ovpn','prometheus.7z'['user3'['temp'],],'hey.js'],'hereiam.js') Возвращает:'/home/user2/desktop/new folder/hereiam.js'
Это слегка переделанная задача из курса по питону на прометеусе. Довольно интересная и не займет много времени. Пары часов должно хватить. Ну и можно накидать интерфейс небольшой, со всякой древовидной структурой на цсс и т.д., можно сделать «живой поиск».
с браузера через js можно лазить по файловой системе компа? или вы за node js?
Так там же «файловая система» передается в виде массива.
www.instagram.com/developer/endpoints Прототип инсты сделай.
зачем? )
что бы что-то делать)
Неправильна відповідь
странный ответ, а на что ты рассчитывала создавая топик? на идею для стартапа? По-моему, с инстаграммом отличная идея, чтобы набить руку, как ты и хотела и не на один день задачка
Костя Третяк
Dmitriy Mozgovoy
Костя Третяк
Євген Козлов
Alexandr Lushin
zodiac weaver
Vlad Stelmahovsky
minodvesP Vasya
Anastasia Sviontkovskaya
Sasha Valotovskiy
Volodymyr Spodaryk
Михайло Малкуш
Yurii Savka
Evgenii Kholevchuk
Podoprigora Alexandr
Podoprigora Alexandr
Alexander
Elance Test
Андрей Литвинов
Bot Bot
Victor Musienkо
minodvesP Vasya
Олексій Пєніє
Євген Козлов
Alexander
Valentine Zgonnik
Think Different
Think Different
Andorū Karasu
Дeнис Кoнoплин
61 коментар
Додати коментар Підписатись на коментаріВідписатись від коментарів