Quantcast
Channel: Geek and Seek » Landing Page development
Viewing all articles
Browse latest Browse all 4

Creating a Website Part 3: Development

0
0

So, page layout design process flows smoothly into the process of “revival” made in the previous stages. Before to start writing HTML, CSS and JS immediately we should talk a bit about the code editor and project structure.

Code editors

There are three the most popular code editors:

1

To a certain degree these editors are similar in operating principle, when in installation we get the editor, in which we can “deliver” necessary modules and plug-ins, so to speak, “the editors on steroids.” The only difference is in the technologies that were used for writing the editors, if Sublime Text is written with C ++ and Python, than 2 others use JavaScript, HTML, CSS (Less). Due to this difference Sublime Text can run a little faster than its colleagues.

There are also more advanced IDE (studios) such as Web Storm, PHP Storm, etc., but for the project layout a code editor is quite suitable, not an entire studio (IDE).

To decide what is right for you for development, it is necessary to delve in a variety of tools and choose what best suits your needs.

 

Project structure

The project structure is project files storage in its directory. We often see when all files are “dumped” together, file names are made with the use of “Caps Lock,” numbers or Russian letters and so on. Firstly, it is a banal lack of respect for someone who will work with your project on, and secondly, the bigger will your project be, the greater will become the files and, finally, you will be tangled, what is what and what is needed and what is not.

It is better to place single categories of files in your folders: pictures in the folder images or img, css in css folder, javascript in js folder. Only index.html will be in root and website pages, or only index.html, and the pages in a separate folder pages. Following these rules you will never get tangled in the project.

2

It is also worth saying about naming project files. Most often, the following names are used: the main page is index.html, project styles styles.css, scripts scripts.js or app.js, minimized versions of files have prefix .min, pictures do not long names in Russian or set of numbers, but they reflects what they depict, for example, button.png, download-icon.png, logo.png, etc.

Work on project

So, deciding upon the code editor, the structure, we can begin with development. First of all, it should be noted that page layout is done in stages: first HTML-structure is written (HTML-code), and then styles are added, and then, if necessary, scripts (JS) are written, necessary plug-ins and libraries are added.

Taking into account all of the above, we can divide the work conventionally into the following stages:

Writing HTML

Now when writing HTML code we can already make liberal use of tags and markup elements, which came with HTML5 standard, if you need to support older browsers, you can use, for example, plug-in html5shiv (https://github.com/afarkas/html5shiv), which provides support for new standards in older browsers, or Modernizr library  (https://modernizr.com/) (html5shiv is included in Modernizr), which determines browser capabilities by which a website can be viewed.

Currently with website coding, a priori, block approach is applied, no tables, iframes, etc. Tables perform only their direct role – the provision of information in the form of a table. In coding tables are used only when working with e-mails.

At the stage of HTML writing, we create a kind of skeleton of the page, its abstract model using tags (HTML markup language). It is worth noting that the structure may be easier to write, if we have a prototype, created at the first stage, or if we are looking at the layout design, schematically painted all the blocks of the page on paper.

When writing markup we can immediately prescribe classes and identificators to elements.

Class Naming Rules

There must be an order in the project: from project structure to class names, markups and code writing. If it is important to monitor the type of information in the markup and placing it in the appropriate blocks (head, list, link, line item, section, and so on), then it is important to follow common sense in classes and IDs naming. Classes should give an abstract concept of the block, to which they are referred, in order it will be easier to read a code, and then to write styles. In fact, it is an easy matter, if we mark up the menu, it makes sense to give class .nav or .navigation to a containing block, if a block is with text, you can give it a class .block-text, etc.

BEM

Today there is one popular approach, which concerns the principles of project construction as a whole, but at this stage we are interested in classes naming. The approach is called BEM and stands for Block Element Modifier.

In short, this approach can be described as a kind of class naming agreement and presentation of page layout. Each page element is an entity that can exist independently of context, then we are talking about Block (.block) or only in the context of another entity, then we are talking about Element (.block__element). Each Block or Element may have different models of representation: color, shape, transparency, etc. Modifier is responsible for these properties (.block__element_mod).

Thus, we present our code as a composition of blocks, elements and their modifications.

 

SMACSS

There is SMACSS approach (this acronym stands for Scalable and Modular Architecture for CSS), which divides the concept of classes and markup in several levels: basic, layout, module, state, theme.

  • Everything that relates directly to html tag is referred to a basic level.
  • To layout level we will refer everything that relates to the main components of the page: sections.
  • To module level we will refer everything that relates to the re-used page elements: banners, navigation, lists, information blocks, etc.  
  • The level of state describes how modules and sections will look in a particular condition: whether they are displayed or not, compact or open, active or inactive, etc.  
  • The Level of theme is somewhat similar to the level of State and reflects how modules or sections may look.

This approach uses the following naming agreements. The levels are determined using prefixes and the appropriate letter identification:

  • Layout: .l- or .layout-
  • As modules form the main part of the project, it is redundant to name them using prefix module-. Therefore, for them the names are used as they are, e.g.: .example {}, .afisha {} etc.
  • Sates has prefix .is-, e.g. .is-hidden {}
  • Theme levels are named like modules.

In this approach it is often convenient to keep each level of abstraction and its classes in a separate file.

Information on the methodology and online book: https://smacss.com/

The Russian-language translation of the book in SMACSS: https://github.com/andrew–r/smacss

It is important to remember that any agreement in naming is designed to create a certain level of abstraction, thanks to which it will be comfortable to work with the project and it will not be overloaded with unnecessary code and other artifacts.

Small course on HTML basics: Please refer to

CSS writing

Rules of naming classes bring us to the next stage. When project html structure has been written, classes have been defined, we can move on to writing CSS styles and layout cutting.

It is worth to mention 2 CSS complement files: normalize.css and reset.css.

Reset.css

Initially reset.css was in general use in projects, written by Eric Meyer. The aim of this set of rules is to reset the browser styles, which it uses by default to display markup elements. Thus when using reset.css we do not need to rewrite the browser styles, in fact we work with a “blank sheet” and can concentrate on writing our own styles from the scratch.

Normalize.css

Normalize.css on the other hand, does not reset all styles “to zero,” but normalizes them, brings project styles displaying to more or less uniformity in all modern browsers.

Both sets of rules have their pros and cons, currently normalize.css is popular. The popularity of this set of rules is caused by the fact that you do not have to rewrite the basic properties of the pages basic elements in the development, but only modify them as necessary.

It is also worth mentioning the so-called “fast reset” when we prescribe properties for absolutely all the page elements using * selector {margin: 0; padding: 0}. Thus we reset all internal and external outsets for all page elements. But this technique is not recommended to use, as it slows down page rendering process, and in fact has little point (in my opinion).

It is also worth noting that all sizes and outsets are taken directly from the design layout. To get these values, we need to use a tool “line” and guidelines (it is about set of tools Adobe Photoshop), and then transfer the obtained values into a code. If we work with a fixed layout, the values are transferred to the pixels as is, but if we have “rubber,” the values need to be transferred into percentages. The basic formula is the element width, divided by context width (width of a containing block). For example, if the block containing the text and the image has width 400px on the layout, and the block with the text in it should have a width 340px, in percentage terms, it would be (340/400) * 100%, i.e. 85% would have block with text .

3

Do not overload your styles with excessive specificity, for example, if we want the link to be red inside the list, it is not necessary to write the whole line of classes and tags: .main –nav ul li a, it is enough to note .main-nav a. Too “specific” rules make the rule context-dependent and make you write extra code, as well as influence on the speed of page rendering, as analyzing the rules CSS parser reads them from right to left and at first it needs to take all the links (a), if we take the abovementioned example, then discard all the links which do not lie in li etc. until it gets to the containing class.

Code specificity also means excessive binding to basic tags. For example, if we want an element inside .block be blue and span element is being used in markup (in rules we wrote .block span {background-color: blue}), than changing it to div, for example, we will need to write a new rule to div inside .block. Thus, our code will be overgrown with unnecessary rules that essentially duplicate each other. It is much easier to define only one class (class element) which when assigning to internal elements will lead us to the desired result.

Another example of contextual code dependence is to use the tag names with class names, for example, div.block {display: block}. If we want to apply the same class to span, then we’ll have to write span.block again {display: block} or span.block, div.block {display: block}, that in any case will lead to code increase in the extra line.

Why is it important? Firstly, you do not do extra work, and secondly, you do not later need to look for the desired rule among the 10,000 lines and, finally, the more lines of code are, the larger file size is, and larger files are slowly passed over the network that in turn can be a reason of long loading and excessive specificity – a reason of long render of your page.

If you use the rules relating to CSS3 specification, don’t be lazy to check the need to use browser prefixes in the website http://caniuse.com.

Returning to Mobile First, it is worth to say that when working in this conception you need to start styles writing with the mobile version, and then using media requests to add rules that will work on other resolutions. Often, during the expansion of rules from mobile to desktop version, you have to write much less code than on the contrary, from desktop to mobile version.

JS writing

So, the final step is to write JS scripts. Creating web pages, the use of jQuery library has become a standard that makes it easy to manipulate the web-page elements (DOM nodes), to hang wiretap of events, send requests to server, process outcome, etc. But do not implicitly trust the trends, today the native JavaScript has reached such a level that you probably do not need jQuery. So, before you blindly attach the jQuery, it is worth thinking, if you need it, and if there are enough embedded JavaScript language capabilities.

There is a good resource that brings alternatives of the same manipulations in JavaScript language and using jQuery library: http://youmightnotneedjquery.com/, good aid is also a website https://developer.mozilla.org/ru/, where, in addition to describing methods and properties of JavaScript there can be polifills for one or another methods (library or part of code that adds support of capabilities for modern JavaScript functions and methods into old browsers).

It is important to note that it is not recommended to use JavaScript for stylization that is it is not recommended to add binding of CSS properties using JavaScript for a particular DOM object (page element) to highlight its state and so on. It is recommended to use classes, that is, in advance define state classes in CSS (active, inactive, hidden, used and so on) and in manipulating the elements simply add or remove the appropriate classes.

For example, we have a list element with the class .list__item, to show an active element at this moment (chosen by a user) or not, we can simply add class (.list__item–active), but not to prescribe all styles inherent in this class in JS:

A short example with the possible ways of class assignments (assign modifier is when you click on green square): http://jsbin.com/.

It is not recommended to fix problems that are clearly related to CSS level using JavaScript, trying somehow to align an object or add it styles in hover and so on.

Returning to Mobile First again, we should mention 2 concepts, which correlate with this technique – Progressive Enhancement and Graceful Degradation. These principles describe two different approaches to development: in the first case, we develop our site, write scripts based on old browsers and systems, or define the behavior if it is impossible to run scripts, and then improve the script gradually, introducing modern functions and methods, so we get a site that will work equally well in old and new browsers and media (same goes for css).

With Graceful Degradation there is an opposite approach – we develop for modern browsers, and only then begin to make improvements and changes, taking into account the old versions.

Mobile First approach is something similar to Progressive Enhancement.

Code test

After html, css and js writing for our page it is necessary to check if everything is done right. We can use online tools for this:

Thanks to these services, you can check whether you have forgotten to close tag somewhere or not, whether you use parameters and attributes correctly, whether everything is ok with your styles and rules in them, as well as to test your code on accuracy of writing the functions, methods, and so on.

Automation facilities

Today almost all routine development processes (except the design) may be more or less automated.

960GS

We have already talked about this development mean in the section about modular grids and design. I need to say that 960GS offers not only layouts to create a design, but also its class naming system. Using offered classes at making-up and connecting css file system into a project, website blocks will be built in this grid, what will save time on writing almost the same one on their own.

Emmet

Emmet is a tool to work with html and css (http://emmet.io/). Plug-in for working with this tool can be set, for example, in Sublime Text, then you have the opportunity to write bulky pieces of code inhtml and css, and record them in a line, then opening into a full mark. For example, a line .block>ul.list>li.list__item*3, may be disclosed to the full code:

Then it is necessary to enter text values into the list elements. Same goes for css: line w:100px+h:150px+bgc:#ff0 is disclosed in:

Thanks to these tools it becomes faster and more enjoyable to write a code, because you spend less time writing closing blocks, transitions on lines, as well as the possibility regarding html is reduced, not close this or that element of the markup. Concerning CSS, for example, it becomes easier to work with browser-based prefixes as a single line with CSS3 property may be disclosed in several ones with the addition of necessary prefixes.

Jade

Then it is worth mentioning such language of work with templates as jade (http://jade-lang.com/). With the help of jade it becomes faster and easier to write html, as well as there is an opportunity to create reapplied code blocks and mixins, input to which one or another parameters we will get the desired layout. Because of jade in a project regarding the marking up and writing pages, modularity can be supported and frequently used names and code blocks may be imposed as variables (name, page names, and so on) or mixins into separate configuration files respectively. To work with jade, or rather to convert the written code from jade in html, it is necessary to use a command line, as well as to install nodejs platform on your computer (https://nodejs.org/en/, http://nodejs.ru/).

Command line

Work in command line can also speed up certain stages of the project, such as creating folders and files. Start a console in the project directory and type just one line in it:

After pressing enter we get project folder where there will be folders css, images, js, in folders css and js there will be files styles.css and app.js, respectively, and in root of project – file index.html. Thus we have saved time for creating a folder, writing its name, file creation and so on. A command line is also used to work with other automation tools.

Sass

Then we need to talk about Sass (http://sass-lang.com/). This language makes it easier to work with css. Thanks to Sass you can write nested classes, make mathematical calculations directly in the code, make reused values as variables into separate files or into a beginning of file, which greatly simplifies further work with styles and simplifies the change of certain variables, as they will all be stored in one place and you will not have to “walk” around the project and make appropriate edits. Thanks to Sass in the project, you can adhere to a principle of modularity, keeping parts of marking in relevant files and connect all of them to the core one, then using the console command collect all the code into one css file, assembly of the resulting file is supported on-the-fly when writing the styles. The command line is required to work with Sass. The package installation process can be found here: http://sass-lang.com/install.

HTML5Boilerplate

HTML5Boilerplate (https://html5boilerplate.com/) is a prepackaged project, which already has index.html, normalize.css etc. In index.html, for example, the main pieces of code that are required when writing html page, are written in advance. The project allows downloading an archive with all files as is or using custom assembly :http://www.initializr.com/. The principle is simple: why waste time writing the same lines or doing the same manipulations, if we can just concentrate on the work with a project.

Gulp and Grunt

Gulp (http://gulpjs.com/) and Grunt (http://gruntjs.com/) are start of tasks services, which are described in the main services file data, are performed with the help of compatible modules and run using console.

These services help use, for example, the abovementioned means of Jade and Sass in development, automatically convert them to the appropriate html and css files, compress them, if necessary, as well as check, for example css properties, for the need to use browser prefixes and insert them in automatic mode.

Both services use a different approach in the description of fulfillment of a task, but the essence of their work is the same. A useful comparison is this: http://frontender.info/gulp-grunt-whatever/

Many services like autoprefixer (automatic enter of browser prefixes), jshint (JS code checking for validity) can be installed as third-party plug-ins in a text editor (Sumblime Text, Atom, Brackets) and initialized by pressing a certain key combination.

Bootrstrap, Foundation, Material Design Lite

These frameworks have been mentioned in the section about design. But you need to remember them once again, because they, to a certain extent, help automate the process of a web page layout and work with it.

When connecting the frameworks files in the project, we can use classes defined in them and markup snippets, which will work on the already described rules and have installed appearance (e.g., buttons, input fields, tables, etc.). Thus we save time, for example, on describing the location of design blocks, their size depending on the resolution, form fields appearance, buttons, and their state.

All possibilities and examples can be found in the following websites:

This description is not comprehensive and it represents only an inconsiderate opinion at some technologies. But before you plunge into adventure, using automation technology, libraries, frameworks, ready-made code, etc., firstly you have to learn the basics of work with html, css and js.

I hope that all the above mentioned things will be useful to you in studying of web design and frontend development.


Viewing all articles
Browse latest Browse all 4

Latest Images

Trending Articles





Latest Images