Недельные цели (17.10 - 23.10)

[Dzing!]

Цели недели

1) Верстка 1/2 сайта, который верстаю сейчас
2) Уроки CSS #8-11 уроки
3) Дочитать Sass-доки
4) Пройти 2 главу учебника по проганью
5) Прорешать, в идеале, всю 1 главу задачника по проганью (ок.60 задач)
6) Перевести статью и выложить в блог


А вот и немного новостей:
1) Часть моей работы оформилась в тему для портфолио. Посмотреть можно тут eisenpar.com/nb2/preview.php
2) От градиент-проекта, в итоге, отказалась. Это, конечно, хорошая тема. чтоб повыпендриваться навыками, но действительно интересные паттерны весят по коду много, это нерентабельно и не будет иметь какого-то внятного применения.
3) Учусь кодить потихоньку, пока начала вспоминать школьный курс, самую базу.

@темы: Рабочие будни, Списки дел на неделю, Целедостигание

---

[Dzing!]

Сообщество не заброшено, не подумайте, я все еще тут, просто свалился БОЛЬШОЙ кусок СРОЧНОЙ работы. И я думала, что я его закончила, но сегодня свалилась вторая часть, у которой, по крайней мере, внятно определен дедлайн, так что ее получится вписать в недельный план (и как бы не вышло, что только ей недельный план и ограничится).

Зато верстаю это все на Sass, и обкатала его базовые функции почти до автоматизма.

@темы: Рабочие будни

---

Неделя 4 (23.09 - 29.09) / Неделя 3 (16.09 - 22.09)

[Dzing!]

Неделя 3 была из рук вон плохая, так что просто дублирую цели на следующую.

Цели недели

Верстка:
1) Рабочий проект - закончить

Блог:
1) Запустить русскую версию блога
2) Перевести статью
3) Выложить первую из переведенных статей

Обучение:
1) Advanced CSS - уроки #8-10
2) Продолжать читать Sass-документацию

запись создана: 16.09.2016 в 01:15

@темы: Списки дел на неделю

---

Неделя 2 (09.09 - 15.09)

[Dzing!]

Цели недели

Верстка:
1) Amely - главная страница (v.2) - закончить.
2) Amely - 404 страница - закончить.
3) Amely - About Us - до середины

Блог:
1) Запустить блог, вычистить оставшиеся косячки
2) Перевести статью.
3) Выложить первый тутор на английском

Обучение:
1) Прочитать статью о разных borders.
2) Видео про SASS для градиент-проекта
3) Advanced CSS - уроки #8-10


Результаты недели:

1) Блог. Запустила. Я к этому шла... ну год примерно, вот все никак собраться не могла. Пока это только англоязычная его часть, русскоязычная будет чуть позднее. Вроде бы даже все мелкие баги отловили, но я не уверена, может, и осталось там что-то. Наконец, могу выложить потихоньку переводную версию базового мануала по CSS3 Transitions, который писала прошлым летом. Собственно, смотреть можно тут: fox-hover.co.uk/blog

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

2) Статью прочитала. Ну она простенькая такая, ничего принципиально нового, но пара мелочишек полезных было. Статья водится тут - habrahabr.ru/post/141658/

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

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

запись создана: 09.09.2016 в 02:37

@темы: Useful, CSS, Списки дел на неделю, Целедостигание

---

Chrome inputs autocomplete

[Dzing!]

Отличный хак для тех, кому надо, чтобы при autocomplete у Хрома не менялся цвет текста и фона inputs.

stackoverflow.com/questions/2781549/removing-in...

Лично мне в плане фона больше нравится тот ответ, что на втором месте, с transitions, а цвет текста отлично корректируется в первом ответе.

@темы: Tricks, CSS, CSS-tricks

---

[Dzing!]

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

@темы: Рабочие будни, Целедостигание

---

[Dzing!]

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

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

А что касается компилирования SASS-файлов, официально заявляю, что делать это через командную строку - извращение, а через отличную и удобную программу Koala - самое то. И логотип у этой проги мимимимилейший.


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

Вопрос: Дать Лисёнку немного верстальщицкой дайри-магии?

1. Конечно, дать!		6	(100%)
Всего:		6

@темы: Рабочие будни, Useful, Целедостигание

---

Неделя 1 (02.09 - 08.09)

[Dzing!]

Опыт последних двух недель очень четко показал мне ошибки планирования, совершенные во время работы. И пятая неделя заставила меня пересмотреть ряд вещей, в принципе, связанных с этой целью. Так что отсчет пойдет заново и будет создан новый пост в "Клубе неудачников" с учетом прошлого опыта.

Цели недели

Верстка:
1) Amely - главная страница - закончить.
2) Amely - главная страница (v.2) - закончить.
3) Amely - 404 страница - закончить.

Блог:
1) Выложить переведенный туториал
2) Перевести статью.

Обучение:
1) Прочитать статью о разных borders.
2) Градиенты Lea Verou 1-10 разобрать и поэкспериментировать со своими (+ создать страничку для экспериментов) разобрала 2, своих написала 3.
3) Advanced CSS - уроки #8-10


Результаты недели:

У меня тут все, мягко говоря, кувырком, потому что:

1) Добавились уроки английского, и это изрядно перетряхнуло мой график. Его будет штормить еще пару недель, потом привыкну и вольюсь ^^
2) Градиенты оказались очень трудозатратными. Разбирать чужой код сложновато, писать свой, если мы говорим о чем-то плюс-минус уникальном, а не клишированно-тренировочном, как первые два из трех за эту неделю - сложно втройне. И ОЧЕНЬ-ОЧЕНЬ ВРЕМЯЖРУЩЕ. Несколько черновиков были стерты, потому что или то, что я хотела, было нереализуемо в принципе (простыми путями, имею в виду, грудой кода и костылями можно было бы, но оно себя не оправдывает), или реализуемо, но с помощью технологий, которые я пока не знаю (чем и займусь в новую неделю).
3) Блог готов, но в нем нашлась стопочка недоучтенных блох, и этих блох вычесывать муторнее, чем делать основную работу. В принципе, осталось приколотить донат-секцию и решить уже, как я буду разграничивать блог на английском и блог на русском (контент у них разный), оставлять ли на одном домене или разводить по разным.

Тем не менее, я:

1) Доделала эту чертову главную моего верстаемого сайта. Пока ссылку не дам, она еще на кроссбраузерность не тестирована и респонсив не сделан. Но скрин могу показать - вот.

2) Три градиент-паттерна сделаны:
codepen.io/Dzongkha/pen/VKwxEL
codepen.io/Dzongkha/pen/yaLjZz
codepen.io/Dzongkha/pen/KgwYJy

Ну а на следующей неделе буду работать дальше и подтягивать хвосты.

запись создана: 01.09.2016 в 23:01

@темы: Рабочие будни, Списки дел на неделю, Целедостигание

---

[Dzing!]

Кто о чем, а я - снова о градиентах. И о книжечках.

Собственно, начну со второго. Оказывается, Chris Coyier, автор огромной кучи статей на css-tricks.com (отличный сайт, кстати! там дофигища полезного) написал и издал этим летом книгу по SVG, которую два года вынашивал. Я ее радостно купила, электронку, ясное дело, и готова поделиться с теми, кому интересно (пишите в личку, дам ссылку). Книга должна быть офигенская, а мне вот очень не хватает дельного и подробного мануала по SVG и, думаю, не одной мне тут. И даже, если вы не знаете, что это вообще, но интересуетесь версткой, вам пригодится.

Теперь про первое. Градиенты - редкостно жрущие время падлы. Вот ты сел сделать красивый узор, вот через пять часов бурных интеллектуальных усилий ты им разродился, молодец.

В этот раз он на голову сложнее обоих предыдущих, хотя по виду и не скажешь - codepen.io/Dzongkha/pen/KgwYJy

Но, во-первых, пунктир. Это первая сложность. Градиенты не предполагают пунктирных линий. Во-вторых - гребаные точки. Если просто брать радиальный градиент, размножать на всю ширину и пристраивать к ромбикам из repeating-linear-gradient, как я сделала изначально, математика бессердечная ты сука пошлет вас подальше. Потому что точки у нас располагаются по краям диагоналей ромбов, а это - иррациональное число, таким образом, фиг вы подберете правильное расстояние между точками - погрешность даст о себе знать уже с четвертой точки в ряду. И поэтому пришлось пересобирать почти полностью собранную штуку, чтобы никакие корни из двух не мешали моему дзену. И ведь пересобрала.

Ей богу, напишу мануал по итогам, если не поседею нафиг к тридцатому паттерну. Вот по анимациям писала, и тут напишу.

@темы: Рабочие будни, Целедостигание

---

[Dzing!]

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

Вот этот - простой, разминочный - codepen.io/Dzongkha/pen/VKwxEL
А этот - посложнее: codepen.io/Dzongkha/pen/yaLjZz

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

@темы: Рабочие будни, Целедостигание

---

Список общих полезных штук

[Dzing!]

1) Как сделать хост на гуглодиске - чтобы крепить нестандартные шрифты в codepen, например
2) Замер веса CSS(и любого другого) кода - удобно для CSS-паттернов

запись создана: 31.07.2016 в 17:18

@темы: Useful, Списки ссылок, Common

---

Список полезных туториалов и мануалов

[Dzing!]

1) Мануал по CSS3D, пока самый мой любимый из всех.

@темы: Useful, Tutorials, Списки ссылок

---

Список шрифтов

[Dzing!]

Иконочные
1) Iconic

Остальные
1) Hagin
2) Metropolis 1920
3) Bebas Neue
4) Drebeden


Паки иконок (могут использоваться и как иконочные шрифты)
1) Linecons
2) Elegant Icons

запись создана: 31.07.2016 в 14:35

@темы: Useful, Fonts, Design, Списки ссылок

---

Список полезных jQuery плагинов

[Dzing!]

1) Маска для номеров телефона - опробован, для телефонов работает неплохо, для дат, судя по отзывам, шалит, но я пока не пробовала делать маски с датами.
2) SyntaxHighlighter - чтобы удобно вставлять куски кода в статьи - пока не опробован
3) Эффекты для скроллинга - пока не опробован
4) Fly Off Page забирает отсортированные элементы и заставляет их разлетаться со страницы в рэндомных направлениях - пока не опробован
5) Moment.js - манипуляции с датами - пока не опробован
6) jQuery Validation Plugin - валидатор форм - пока не опробован
7) Circliful - плагин для круглых каунтеров - пока не опробован
8) One Page Nav - плагин для улучшенных прокруток на одностраничных сайтах - пока не опробован
9) Sticky - плагин, делающих любые элементы на странице постоянно видимыми при прокрутке (не знаю, зачем он нужен, если есть position: fixed), но опробую при случае - пока не опробован
10) Hammer.js - улучшение работы с touch-устройствами. пока не опробован
11) zLayer - parallax на наведение мыши - пока не опробован

@темы: Useful, jQuery, Списки ссылок

---

Масштабирование изображений разных размеров под контейнеры разных размеров

[Dzing!]

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


.parent-container {
position: relative;
overflow: hidden;
}

.parent-container img {
display: block;
position: absolute;
top: 50%;
left: 50%;
-moz-transform: translate(-50%, -50%);
-o-transform: translate(-50%, -50%);
-webkit-transform: translate(-50%, -50%);
-ms-transform: translate(-50%, -50%);
transform: translate(-50%, -50%);
min-width: 100%;
min-height: 100%;
max-width: 150%;
max-height: 150%;
width: auto;
height: auto;
}

@темы: Useful, Tricks, CSS, CSS-tricks

---

О чем тут и зачем оно тут есть

[Dzing!]

Мне очень хочется регулярно писать о работе, собственно, на ниве frontend'а, но дайрик у меня уютно-бытовушный, и захламлять его статьями и ссылками, описаниями пути от junior к senior frontend developer, рабочим дыбром не очень хочется. Поэтому все, что связано с моей работой и рабочим развитием просто будет выкладываться здесь: понедельное планирование, успехи и фэйлы, ссылки на всякие полезные в разработке штукенции, примеры моих работ, вот это все.

Мне хочется пройти путь от имеющегося чуть выше, чем junior до senior, но список требований к последним, мягко говоря, демотивирует и вгоняет в ангст беспросветный. Кроме того, что я уже сама умею, нужны структурированные знания по jQuery, глубокие по JS, тесная дружба с PHP, всякие разные БД, JS-фреймворки, ворох всякого барахла по мелочи: Ajax, SMACSS, препроцессоры, свои проекты на Git в количестве, еще разные штуки, которые я даже не помню. Список познаний, необходимый на middle-позицию не принципиально отличается, там, разве что, глубина познаний нужна меньшая.

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

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

@темы: Common