Front End Dev — Workflow
Introduce & My personal Front-end Workflow
About me
This is my first post, so I decided to talk about my front-end workflow and all my process from the beginning to the end.
My name`s Bruno Kinoshita, you can also call me Bu. Yeah, just Bu. I`m a brazilian guy with 19 years old. I got interested about web since I was 15 years. I remember that I thought “It’s so beatiful, I would like to do that. But how?”. Then I started learning HTML and CSS on YouTube. After that, I studied in Microcamp. It’s a web design school here in Brazil. To be honest I didn’t learn much. I got lil’ bit frustated about it, so I quit.
The years were passing and when I turned 17, I really get interested in Design. There’s a guy, Alexander Kolshelkov. He’s a brilliant designer that inspired me a lot with he’s photomanipulation skills. Everyday I was studying more and more design. Doing some “poor” freelance jobs. One day I woke up and wanted so bad to start coding again, I think it was one of the best times ever, because I studied so hard Front-end developement. Nowadays, I still learning everything about Front-end, design and UX.
Sketching
When I receive a brif of a project, I try to study every detail on that brifing and start to imagine how it gonna be the final result. So, I grab my sketch book and sketch a lot of screens. Where the buttons gonna be, where to put an image, text, everything. Then I analyze the sketch, if it’s okay, I begin the design in Photoshop, if not I adjust every detail that it needs.
Design Process
Okay, sometimes I jump this part. This is the quickest part of the entire project. If it’s necessary, I just open my photoshop and try to reproduce all my sketches to visualize the colors, fonts etc. Most often I just jump to coding process.
Coding Process
I used to use JADE on my coding process. Jade is a Node Template Engine that really speed it up your html workflow. You don’t need an opening tag, neither a closing tag. So, instead of using <body>, you simple use “body”. It really improve your workflow and is so easy to learn. But nowadays I don’t use it anymore, I use HTML with Emmet. Emmet is a better choice to speed it up your workflow. If you need to make a huge list of things you just need to type “li*(number)” and press tab button. BAAAM! I really love Emmet. Of course it has a lot of more features in it.
Styling. OMG, since I discovered SASS, my life got easier! Organization, performance and speed. That’s just an awesome tool that you should try. Some prefers Stylus or Less, but I think SASS is the best! So take some time and go check SASS!
Action! jQuery is on the way. To be honest I don’t know JavaScript or jQuery so much, but I’m learning. It blows my mind everytime I use some jQuery’s plugin. Yea, yea. I know that I shouldn’t use just plugins. But as I said before, I’m still learning. Looking foward to learn AngularJS and NodeJS, it seems to be a powerful tool as well.
About some more details. I use Sublime Text 3 for my coding, Prepross for SASS and image optmization. I also love to check my pos production with YSlow and PageSpeed (Performance). To organize all my files, I use Git and Github. So I can easily make a milestone and check all my issues on a project. It’s lovely. In my work I also use Jira. Jira is so powerful, you should check it. What else? Ispiration? Behance, Pinterest, YouTube, music and books.
I think it’s ok for a first post. Thanks!
