Coding from scratch: what are the main stages of work?

0 like 0 dislike
Many years have passed since I first laid out something intelligible from scratch... I confess to tables)). Now, being on stage, when my profession don't have to feed me and a milestone I am concerned only for their own pleasure, nevertheless, interesting to me (sure also for beginners) on your approaches, that's what the cut.

You got the benign serious layout, assume that this is the name of a large company with lots of services, which wants to widely presented to the user. This layout is necessary to impose and has agreed to all the conditions, we have conducted primary clarification, designer, etc. etc. As you develop your work? Where to start? What are the main and additional phases are always present in your routine at work? One word – describe your time-line... and how you organize it. I am interested in the experience of others, but newcomers will be useful to know.
by | 24 views

7 Answers

0 like 0 dislike
Use vscode+webpack+pug+scss+BEM. Of physical instruments, Monique primary: lg ultrawide 29um69g, next bolted Monique from the laptop hanged vertically, is connected through the universal scaler.

0) Start Spotify :-)

1) installs all the necessary modules for Assembly. In my case I have a set of configurations for the webpack (separate files for pug, scss, static , etc., choose what you need).

2) Launch avocode, load the data into the layout. Define the variables (at the same time, write them to just throw in the scss file) for colors, font sizes, etc. to obtain pieces of code from him, he immediately arranged the variables.

3) Run VS Code, open a desired folder.

4) Write razmeta on Pug. Write with BEM, if I see a duplicate block, then open the _mixins file.pug, in which you write mixins for repetitive units, such as items, menu items, some blocks, etc. Pug knows how to make cycles, it speeds up much.

5) When the HTML is ready, start to make the frame. If the design is made of mesh, define containers, columns, rows in your classes (do not write in html clouds classes Ala col-md-6, and is written in SCSS inkluda to me at the right blocks, like @include make-col(2) etc.).

6) Export the picture from Avocode. Is very simple, specify the folder and just click export and enter a file name and extension. Mainly for the icons use svg if no svg, then look for this icon in the Internet (designers rarely draw icons themselves, but like to put them in the vector). If the icon is simple, can do it in inkscape to trace, and if not, then export png in 2 size (good evoked this allows, unless of course the designer did not put in the original small size). When there is contact with a designer, shake it, because it's bad for the raster icons.

7) Write the styles of the blocks of the page. At this stage, on the second Monica in parallel to watch futurama or
Archer :-) But more on Monica wide left of the browser, right VS Code, and the second Monica Avocode (can be exchanged with the browser). Mentally cut the page into blocks. For each block (B -EM) to create a separate scss file (some even element creates, but I'm too lazy), it immediately writes all the selectors. Sometimes can first write out all the selectors from the page (but it is better not to do it because while working, you may need to change something in the markup), but more often for one unit carry out this paragraph and followed immediately carry out paragraph 8, then for the new unit 7 and 8 again, etc.

8) Write css code along with Avocode, it take the settings I need (and it is already framed in these variables), and insert into my code. And in parallel compare with the screen layout using this extension

9) Write adaptiv. I can't get used to the methodology mobile-first, so I am always the first full version of the site. I understand that it is fraught with all sorts of problems and it's kind of not fashionable, but I norms.

10) Media queries write directly to blocks, for each block/element/modifier can be a single media query. But first determine breakpoint's for different screens (that they were not hundreds), if I use Bootstrap, I'll take it breakpoint's.

11) Add the animoticons. Even if the customer has not requested separately (and if not indicated separately that it is impossible), he will still be satisfied, and animate.css+onscreen.js this is generally a work of 10 minutes. Complex animations discussed separately so as not to do unnecessary work.

11) again, verify, write scripts where necessary. For sliders in 99% of cases suitable slick (with modifications of course, but there is a good API), for other cases write your own.

12) hand over to the customer and waiting for an answer sitting on the toaster/peek-a-Boo.

This is purely my experience, the experience of the freelancer, not sure how others are doing and you can't 100% say that it is 100% the correct way. I was not able to make your webpack config to correctly insert the svg sprites.
Hopefully something will help my answer.
0 like 0 dislike
This question has subscribers, did not expect so much, but it suggests that the issue is interesting, which is good. Therefore, even though I'm its author, but I will answer too. I like a man who has experienced the era of Mosaic, Netscape and IE (the Oldies will understand me), I will answer also for the reason that often, no ... very often faced with what is really "talented" novice Front-End spend for nothing the time, because of ignorance of such, it would seem that the question about anything (as expressed Froggyweb) about the organization of your workflow and begin not with what it would cost to start it causes that some work is simply copied, remade, etc just because initially didn't think about that.

Designers "sculpt" models in his own way, and who is it, and how can anyone, especially beginners. Customers, in order to save money, often resort to the services of novice designers, sometimes clearly very talented, but not yet comprehended some norms of behavior in terms of in what form should submit the layout coder. After all, for clients: beautiful, like all the buttons are, there are pictures and references on place - all good. We have to break down.

I work on three monitors: Central - layout, left - result right - design layout + what else that is necessary in the course of the play, like the movie, Wikipedia, etc.;

in Visual Studio, for complex and large projects firmly hooked on the Back-End;
Visual Studio Code for projects easier;
hehe in Notepad - very simple))

Music is Holy, the more I also sometimes write, but always listen to someone else on SoundCloud))

Create a solution folder

Create a subfolder within it is always the same: _native_design, which (depending on the format portiou design)

Choose clearly common page components (header, content, menu, sidebar, footer and etc.) and for each create a simple empty scss file with the name specified in the component.

For these components, choose fixed and variable elements and is set selectors in the relevant scss files (there are always tight with names, because by nature I'm not very gifted)

Common model elements are also rewarded with their own cascade, in a separate file)) to write to mixins, etc.

Based on the grid, and the minimum required versions of browsers (talking about IE of course), create a file _base.scss which is filled with discharge style, and announcements for the grid (well, not all of this manually, and snippets, imports include that I have prepared almost all occasions).

Try to stick to the well proven principle of "one base", which implies a common basis for the entire layout, i.e. have one base frame (base), and this is a place for hanging her everything. I often see mistakes in this regard, when it comes to the fact that for one "nonstandard" component page, NOT occurring on every page that uses a separate (and not one), basic style (essentially a file), in which 90% of the cascade is duplicated with others, etc.

After this preparatory work starts on the HTML, and when it is ready, move directly to blocks in cascade, of course, in constant contact with HTML – this is the longest stage in the whole work, I think everybody understands it.

The font is also worthy of attention, because not all designers know what it is from the perspective of the Web, and use them for other purposes (it happens) that requires coordination.

Then begins the work with adaptability. I always fold the content, i.e. start with a wide format, then desktop, tablet, mobile. There is nothing complicated, especially when there is a grid on the basis of how many components tightly depend on the size, choose how to specify media queries, i.e. either the query inside selector blocks, or the selectors in the query. Usually used 4-6 points + two for each main point, ie at 1px and 1px less, but not always, depends on the layout. Don't forget about the DPI.

Then begins the work with pictures. I submit it as a separate stage because of the skills or newmani designer. Because vector graphics are not always where it should be, not always immediately find it, then begin to shake the designer that brought to mind. Here I think particularly of issues should not be. Optimized raster, vector optimization, etc.

Then begins the JS, ie filling interactivity is not the CSS, namely scripting.

Then begin to twist-turn layout everywhere where only it is possible, based on customer requirements about the minimum supported browser versions. Here difficulties is not particularly the case, since with browsers in terms of standards support is already easy, and users have to update their browsers more often. Anyway originally typeset with an eye on here is the minimal version. Although there are still requests for support IE7, especially from customers from Central Asia.

In short, something like... for an answer, opened up Word and banged out the text. I'm sure I missed something, what is not said but do not judge strictly))

Forgot to tell you about measuring the speed of download and rendering speed. This is pay attention to the layouts with a complex composition! It should be remembered that before rendering the browsers carry out a serious analysis of the DOM and cascade styles, there are ways to optimize these issues, it is important for mobile devices if your site does not have their own version. The same applies to JS your manual code.

Guys, I Skype is not indicated for what you have sent me questions. Any clarification, write here or create a new question on the Toaster. Thank you for understanding.
0 like 0 dislike
Mikhail @NooNoo
The heading "let's see what we have." I use these things at work:
Preprocessor: LESS
Working with layouts: PH or Sketch.
Collector: Gulp
Methodology: BEM (but started to look at SMACSS)
Console: the console :D
The storage location of the repository: GitHub.

1) Create a repository on Gita.
2) Create locally the structure of the project. (folder for images, etc.).
3) Open the layout
4) Create a first outline in html (create classes according to chosen methodology), keep in mind that mobile first. Connect the main preprocessor files (fonts, global styles, mixins, the class visually-hidden variables)
5) Build the mesh. (flexbox or grids)
6) Begin to style your mobile -> tablet -> desktop version.
7) the Chain code and the search for more sustainable solutions, where applicable.
8) Ponastroila collector, which in the end will gather the production version.

Briefly something like that)
0 like 0 dislike
1) identification of instruments, their configuration
2) Allocation of shared/reusable components
3) the Most difficult - coming up with names
4) Layout
0 like 0 dislike
Starts with
and it all ends. It fully covers all needs.
UPD: When the admin panel or SPA - sometimes porubay your bike: (including includeHTML)
UPD2: BUT this is for those who loves to code in jQuery: watch the video.
0 like 0 dislike
0) turn on the music, check the updates of packages and npm =)
1) Clone from your own fork slightly altered OptimizedHTML
2) Visual analysis layout, download in AdobeAssets/Avocode
3) Preparation of typography, connection fonts
4) export the graphics "as is" twitch of the designer before delivery, if necessary. In General, optimizing graphics myself, but closer to the end
5) Throw the original html when ready - work on styles.
6) After preparation of the desktop, working adaptiva. Usually doesn't take very long, if he does not make bad code, good, sass saves =)
7) Optimizing the schedule, if necessary. Running GooglePageSpeed on your testoste and github pages
8) after running optimize everything else (rarely)

Sometimes you have to perform other actions, but overall my work looks like this

PS Tools:
Editors: Brackets, SublimeText3. Very rare Atom (looking towards VS Code)
Console: cmder
Layouts: PSD, sketch via
Collector: Gulp
Methodology: BEM
Hosting: GithubPages, private host to hostland
0 like 0 dislike
  1. Visual inspection of the layouts.
  2. The Assembly of the foundation(to me it went better bootstrap) through their Customizer with the predefined constants, and the required components. For some projects only use the mesh from it. Locally to collect - what he gave me, there and so all that is necessary to me.
  3. Throw in your own css utilities for frequently used blocks, indents and other details. Depending on the number of blocks, modifiers, type, background, color, etc. put in a separate CSS also, of course, there is a separate css breakpoints.
  4. Code is usually written top to bottom, each unit will adapt immediately, then go back laziness. To invent classes - the longest, as mentioned here noticed. Often reusey pieces of simple code pasting.
  5. For modal dialogs stuck lightcase for carousel - flickity or owl.
  6. For icons most often complain about FontAwesome, then at the end of the layout using Fontello to create your set for saving
  7. Don't use preprocessors, assemblers, etc. because the Evolution patterns in CMS is stupidly marked up html-code, assemblers and preprocessors need not shared, etc. Move slowly in one direction to the twig, but even 5 years is exactly the current template engine would be in order. A basic template engine with the installation already has some ready-made layout, and when you point to CSS in about 30% of the design without editing templates
  8. Click images in imageOptim
  9. After the integration of the templates compressed into cms styles and scripts into a single file, running pagespeed on a real engine and knock in a tambourine, if less than 90

The code you write in Brackets, draw in Sketch

Related questions

0 like 0 dislike
4 answers
0 like 0 dislike
2 answers
asked Apr 5, 2019 by farcer
0 like 0 dislike
3 answers
0 like 0 dislike
1 answer
110,608 questions
257,186 answers
33,546 users