Simple Steps Code

One of my readers sent this fantastic question which I’ve quoted anonymously here with permission:

“I have been learning about front-end web dev and web design for almost 2 years now but the more I learn, the more I realize how much I don’t know and it has put me in this spot where I’m absolutely crippled by procrastination and self-doubt. I feel like I’ve done enough learning and I now I want to build, build, build but I really don’t know where to start.

This could all be in my head but I feel as though, most front end development nowadays is built around these complex web apps involving React or whatever the newest framework on the block is. Is it possible for me as one person to do the UX research, layout, design AND build (incl. all the JS) for a single site? I’m not sure I have it in me to build something that impressive on my own. Something that will be worthy of a good portfolio that will get me hired. And because I’m so freaked out by this thought, I just keep plugging away at learning and trying to stay caught up with the industry instead of actually spending the time building something. It seems to be an endless cycle that I can’t get out of.”

What makes this question great is that it perfectly expresses exactly how a lot of people feel about web development.  It seems like there are so many things to know, and it can feel overwhelming.

My advice: Don’t magnify the monster.  Instead of approaching website creation as a big scary beast, let’s break this down into smaller pieces.

“I feel as though most front end development is built around these complex web apps involving React or whatever the newest framework on the block is.”

First, don’t even worry about frameworks.  You can build a beautiful, functional, responsvie site with a few HTML tags and a few CSS styles.  As far as the front end is concerned, that’s all it takes.  JavaScript only comes in if you want to add interactive features.

Second, remember that the whole point of frameworks is to make things easier.  If you can learn HTML, CSS, and JavaScript, those are the hard parts.  As an example, jQuery is just a bunch of prebuilt JavaScript that lets you write less code.  In fact, so many of the well-known frameworks involve JavaScript that if you get better at JavaScript, you’ll automatically be better at jQuery, Angular, React, Node, Socket.io, Meteor, and more, all in one strike.

The key is that if you get better with HTML, CSS, and JavaScript, you can adapt to any framework you would need to learn.  However, if you focus on one framework, you can spend all the time learning it only to find that the place you want to work at uses something else.

Now let’s look at the next piece:

“Is it possible for me as one person to do the UX research, layout, design AND build (incl. all the JS) for a single site?”

Yes, but the bigger you make it sound, the scarier it becomes. UX research and layout are big topics, but for the purposes of your website, you only need to ask yourself one question: Are the important parts of my site clear and easy to find? That question alone will put you ahead of a surprisingly large number of websites that are out there.

As for design, don’t overthink it for your portfolio pieces.  A lot of sites follow similar patterns anyway (such as the big hero image with a main call-to-action button).  Pick a site you like, modify it a little bit, and you’ll have a working design.  Remember the main point of a front-end developer’s portfolio is to show you can code a site.  First do the HTML and CSS.  That will give you a site.  Then you can add JavaScript if you want specialized interactive features.

Now on to the next part:

“I’m not sure I have it in me to build something that impressive on my own. Something that will be worthy of a good portfolio that will get me hired. And because I’m so freaked out by this thought, I just keep plugging away at learning and trying to stay caught up with the industry instead of actually spending the time building something.”

This happens to a lot of people.  For now, stop chasing trends and just build something.  Start with an HTML and CSS page with a common layout.  Then make it responsive.  Try making some more pages.  Then learn JavaScript.  Make small interactive things and post them on something like codepen or jsfiddle.  Don’t worry about any next steps until you’ve done that.

If you’re reading this, hopefully you’ve found it helpful.

Best,

Yaphi
Simple Steps Code

Copyright © 2016 Simple Steps Code, All rights reserved.
You are receiving this email because you signed up for coding tips on simplestepscode.com.

Simple Steps Code

9916 Kentsdale Dr

Potomac, MD 20854

Комбинации для PHPStorm

КОМБИНАЦИЯ НАЗНАЧЕНИЕ КОММЕНТАРИЙ
[CTRL]+[ALT]+[L] Reformat Code  быстрое форматирование “грязного” кода
[CTRL]+[SHIFT]+[N][CMD]+[SHIFT]+[O] (mac) File navigation  быстрый поиск файла по имени
[CTRL]+[SHIFT]+[Backspace] Last Edition Location  переход к месту предыдущей правки
[CTRL]+[Space] Basic  вывод возможных вариантов автодополнения
[Alt]+[Enter] Show Intention Actions  зависит от контекста выполнения, крайне удобно для редактирования встроенного HTML кода, более детально уже писал тут
[CTRL]+[SHIFT]+[V] Paste from History  буфер обмена хранит несколько последних копий
[CTRL]+[SHIFT]+[A] Find Action быстрый поиск по командам Шторма
[CTRL]+[W][ALT] + [ ▲ ] (mac) Select Word at Caret  выделение фрагмента. Для Mac работает комбинация.
[SHIFT]+[ALT]+[CTRL]+[T] Refactor This  быстрое форматирование кода. Для Mac: [CTRL] + [T] или [CMD] + [ALT] +[T] – для обрамления выделенного фрагмента в структуру (цикл, функцию…)

Stepan Suvorov Blog

Steps

  1. Иконка для сайта fac.ico
  2. сглаживание шрифтов -webkit-font-smoothing:antialiased;
  3. <meta name=”viewport” content=”device-width”>
  4. box-sizing: border-box;
  5. имя класса должно отражать не внешний вид, а то чем он является
  6. все что можно сверстать – нужно верстать css
  7. Предзагрузка контента, отображать “скетч” информации
  8. учитывать наполнение макета – длинные заголовки, много текста. 
  9. для иконок использовать спрайты 
  10. в меню использовать ссылку на блок в котором она находится, не на текст.
  11. шрифт с google убрать type=‘text/css’
  12. не использовать протокол в ссылках
  13. не закрывать одиночные теги
  14. валидация e-mail
  15. подключить скрипты в конце документа
  16. проверка html валидатором
  17. чем короче селектор тем лучше
  18. .site-header .site-footer
  19. DRY – don’t repeat yourself
  20. страница 404 страница с иронией
    подыгрывание пользователю
  21. 10 принципов Codeacademy

Sublime

Sublime text 3 commands

  1. 1. Drag and drop folder to the editor’s area to open the project
  2. 2. Ctrl + kb closes the side bar
  3. 3. Ctrl + p search for a document
  4. 4. Ctrl + shit + p change the interpreter of the syntaxis
  5. 5. Indentation can be transformed to tabs or to spaces
  6. 6. Preferences -> Settings -> Default 
  7. 7. User/Preferences – sublime-settings overrides the default settings
  8. 8. Ctrl + / comment line or lines
  9. 9. Ctrl + / + v pastes with indentation
  10. 10. Multiple cursors using middle mouse button
  11. 11. Alt selection – selects block, allows editting multiple lines
  12. 12. Ctrl + g selects words similar to what is under the cursor
  13. 13. Shift + ctrl + d – duplicate lines
  14. 14. Ctrl + q record / stop recording macros
  15. 15. Ctrl + shift + q play macros
  16. 16. Ctrl + cmd + g – find and replace
  17. 16. Shift + cmd + g – find and replace

package installer – install package

EasyMotion

Emmet

Sublime encoding problem

{
"font_size": 13,
"fallback_encoding": "Cyrillic (Windows 1251)",
"ignored_packages":
[
    "Vintage"
]
}

 

Git

Git 

https://www.atlassian.com/git/tutorials/syncing/git-remote

git config –global core.editor /usr/bin/vim

Ω 

git config –global user.name “Your Name”

git config –global user.email “your_email@whatever.com”

Create a repository

git init

Add the page to the repository

git add hello.html

git commit -m “First Commit”

-m flag gives a comment on the command line

Check the status of the repository

git status

Adding changes or undo 

git add git add .(add all) or git checkout or git unstage

git status

Staging and committing

git commit -m “cimment fot commit”

History

git log

git log —-pretty=oneline

git log —-all —-pretty=format: “%h %cd %s (%an)” —-since=‘7 days ago’

Aliases

Add the following to the .gitconfig file in your $HOME directory.

[alias]

  co = checkout

  ci = commit

  st = status

  br = branch

  hist = log –pretty=format:\”%h %ad | %s%d [%an]\” –graph –date=short

  type = cat-file -t

  dump = cat-file -p

alias gs=’git status ‘

alias ga=’git add ‘

alias gb=’git branch ‘

alias gc=’git commit’

alias gd=’git diff’

alias go=’git checkout ‘

alias gk=’gitk –all&’

alias gx=’gitx –all’

alias got=’git ‘

alias get=’git ‘

Cloning repository

git clone (ssh or urli repo)

git add .

git commit -m “First commit”

git push origin master

.gitignore – файл с шаблонами игнорируемых файлов

git diff – 

https://git-scm.com/book/ru/v1/%D0%9E%D1%81%D0%BD%D0%BE%D0%B2%D1%8B-Git-%D0%97%D0%B0%D0%BF%D0%B8%D1%81%D1%8C-%D0%B8%D0%B7%D0%BC%D0%B5%D0%BD%D0%B5%D0%BD%D0%B8%D0%B9-%D0%B2-%D1%80%D0%B5%D0%BF%D0%BE%D0%B7%D0%B8%D1%82%D0%BE%D1%80%D0%B8%D0%B9

git clean  -d  -fx “”

http://www.kernel.org/pub/software/scm/git/docs/git-clean.html

-x means ignored files are also removed as well as files unknown to git.

-d means remove untracked directories in addition to untracked files.

-f is required to force it to run.

git checkout . – unstage all files

Need to learn

HTML

FORMS
DOM

CSS

ANIMAtions
Flexbox
SNAPSVG
POSTCSS
sCSS
compass

JavaScript

core
jquery
node.js
REACT
ANGULAR2
EMBER
METEOR
coffe script

WORDPRESS

Create theme
“one” framework
PHP functions

pHP

CORE

python

core
django

browsers

chrome
safari
edge / ie
firefox

OTher

npm
bower
gulp
GIT
codepen
SLACK
TRELLO