Start of the project through the eyes of the developer
In this post, I, as a beginner in the matter of web design, programming and layout, would like to talk about the difficulties encountered.
Tornado did not start with the logo. Not with models ... The tornado began with a motion vector. With ideas and burning eyes. The project, designed to make life easier not for a narrow circle of people, but for everyone we can.
It all started with a simple ... Table, input fields ...
I was given a logo and a rough image.
And an infinite field for implementation. Roma did not climb into the code, I tried to implement his idea.
The first puncture arose at the moment when it dawned on me: the logo will take up a lot of space in the header; if a model is open, it must be hidden. The right decision came by chance. I put instead of “logo.jpg”, “logo.png". And there was only a name, without a logo. And the cap collapsed into a string. I realized that it needed to be implemented, and you can't do without JS (by the way, you can try , click on the logo and see).
Honestly, I have a preconceived opinion about all libraries and frameworks. I consider their connection superfluous. They are "fat." For single problems it does not make sense to connect a large library. Easier to write your own small and logical script. It is better to go around a couple of dozen forums, but to put the most valuable thing on the site than to take the standard function of the same jQuery by uploading to the browser a collection of third-party functions that will not be used.
So I started learning JavaScript. Almost from scratch.
After a thoughtful reading of the forums for no more than half an hour, the recursive functions of extending and closing the logo appeared. I also discovered the lang property. It turns out that this property is in all elements, like style. And, officially, it should set the language in which the content of the element is written. However, in practice it is used not as intended, but as an object for data storage.
By the way, I want to say that all beginners, first of all, need to understand not the possible versions of the implementation, but the logic of these versions. So, and only this way, you will understand which methods are suitable in your case, and which ones are not only not suitable, but also harmful.
By the end of the day, the hat was made and tuned for beautiful and smooth work. But this was not enough for me ... In front of me was a naked table and a large menu that occupied a little — a lot of 260 pixels of page width. The view, of course, spoiled. A little poshamaniv with already gained experience in JS, I forced her to move forward and move. However the inscription
ABOUT
P
C
AND
AND
I didn’t like the look of the advertising sign of a not very advanced store. And I went deep into CSS to find a way to expand the text, or each letter, at 90 degrees.
And I realized that my knowledge is insignificant, and the cross-browser compatibility of the rotated text leaves much to be desired. The only suitable tool was SVG. But it required loading the rules via xmlns c w3. Standards are good. But do not forget that the desire for the ease of the site is now in priority, especially because of the policy of indexation. It is because of the severity of sites that are collected in visual editors.
Having climbed the articles and forums, I found a way to expand the text without SVG. Unfortunately, older versions of IE (7 and below) had to be sacrificed.
Options suggested first a small set of functions for working with the model. In general, setting the height of the options did not cause any problems. Approximately (due to my ignorance) I set the percentage of location from the upper border - and forgot about it, as a decided issue. He surfaced later.
The functions of working with the model assumed three different types.
Where the columns are plus and minus, and the rows are user-defined text. Reverse option. And - where the column and row names are specified by the user.
Of course, for each option, a change in the number of rows / columns should have been implemented.
From a newbie point of view, everything is simple. The table has TBODY. There is an array of strings in the body. His and change. An array is a collection. And, as I understood, having climbed the forums, I was not the only one who perceived it as an array. But it was not there.
Unfortunately, as a lyrical digression, I would like to point out that site layout with tables is considered to be the last century, and many web designers have almost disgusted it. It is not right. Everything has its place. And everything needs to be used wisely.
Most forum replies use the appendChild (obj) and removeChild (index) methods. But (the voice crying in the wilderness) this is wrong! Debugging shows that you are adding a “child” to TBODY. And, although the string will be present when crawling the lines, it will be absent from the collection of lines. And that means it's a joint.
Another lyrical digression: testing the layout in different browsers, I, of course, swore at developers who solve undefined behavior differently. These are the cases, for example, when the strictly set width or height is too large. And then browsers (I will not poke a finger) begin to be strange. Which of them is strange - you decide. But different interpreters depict your design differently.
It was decided to use the standard functions of adding a line and deleting it. This is insertRow (index) and deleteRow (index).
On that adventure, as usual, are not over. Deleting rows is a tricky business. If a row is not deleted at the beginning and not at the end, all the IDs in the table will have to be set again (the elements are interconnected), and there were a lot of them. Each cell has a hidden field that stores the value of the selected points, a table with points (points), each of which has an onhover event, and, in fact, an input field for text. The tricky IDreborn feature was created for this purpose. And so, when the debugging of the removal was finished, there were cosmetic issues.
Having opened the site on the netbook, I realized: the options are shifted down; on small screens, some of the functions are invisible, and there is a place on top. ... It was an unacceptable mistake.
And I began to try to align the options in height. The first or second link in Google, I found at least six ways to vertical alignment. Each of them gave the result in a particular case and under the specific conditions of the object to be leveled and its parent. Some were cross-browser, some were not. I chose a more or less universal way. Having created a parent object, fixed on the page (position: fixed;) and stretched in height at the right edge (top: 0; bottom: 0; right: 0;), I placed a half-height block with a negative field below (margin- bottom: -247px;), equal to half the height of the options (thanks to the available developer tools in browsers, helped to find out). And, of course, the options themselves, pre-collapsed in width to zero, so that they can be nominated.
Then I realized: chemistry with overflow turns 50% of the time - against you. Browsers do not understand layout as they want. And Firefox (Mozilla) when using simultaneously the settings overflow-x and overflow-y does not display the element at all (although Chrome understands this combination).
Having refused from overflow, I made one more important remark for myself.
Set padding-left to, for example, 10px. Width set at 0px. PROFIT! Width is zero! Now set the same padding-right. And the width will be equal to it. And this strange logic is not a single browser!
When the rigging with the options was completed, we with the chef looked at the model and understood: the text in the conception table is not one-line. And, it means that text boxes are not enough, we need textarea. And I began to rewrite.
In general, there were no problems ... Is it possible to note the automatic increase in the height of the text field depending on the content.
On the forums, I found a way: the text, each time I press a button inside the textarea, we write an invisible div of the same width and with the same font as the textarea. We get its height and, with the condition of minimum height, set the same height for the text field. A little poshamaniv, I realized that specifying the width of the script - inconvenient.
You need to have access to customization through CSS. In general, the settings for the appearance of the table were created. For simplicity (!) Settings. So I studied access to classes.
If anyone needs it, I bring a simple and amusing function:
Which created the bridge, allowing not to change the values ​​in the code, but to change them in one external file.
In general, I always aim to create a site that can be disassembled and assembled from pieces. It's comfortable. For example, in the process of execution, you will understand that the customer wants to use one of the well-known CMS. Then you will simply disassemble the site and assemble it on the CMS-ke with a minimum of rework.
That's all for now, tk. I still have a lot of unresolved issues and unrealized opportunities. Ideas, as usual, even more.
Hopefully beginners, like me, article was helpful. Grow, develop, try, and give you high qualities for the cost of effort! Good luck.
Introduction
The third month of our cooperation with the chef came to an end ... In general, I had never perceived him as a friend before ... But it’s necessary in order.
I live in two cities. Ufa and Moscow. It is difficult ... Especially in terms of work. Why it happened - the story is different. I am an aspiring freelancer. ... And here my friend writes me. At that time, we were not really close friends ... He proposes to make a website. In the absence of money in my pocket, I grab hold of a string of a large project, without even realizing what it means for me as a beginner.
From the first days it became clear that the intentions of a friend are serious. Being a typical example of a lazy coder, I made a little effort, knowing that this was a long time.
This is where our story begins. It began with TK.
Periodically, I take orders for various small works. Develop a design, assemble it, make a couple of modules, modify something ... In general, on the little things. And now, having the experience of communication, I can happily declare that my boss is a rare case of a customer who knows how to concretize his thoughts, dot the i's and enter, in my opinion, in any position of the performer.
I live in two cities. Ufa and Moscow. It is difficult ... Especially in terms of work. Why it happened - the story is different. I am an aspiring freelancer. ... And here my friend writes me. At that time, we were not really close friends ... He proposes to make a website. In the absence of money in my pocket, I grab hold of a string of a large project, without even realizing what it means for me as a beginner.
From the first days it became clear that the intentions of a friend are serious. Being a typical example of a lazy coder, I made a little effort, knowing that this was a long time.
This is where our story begins. It began with TK.
Periodically, I take orders for various small works. Develop a design, assemble it, make a couple of modules, modify something ... In general, on the little things. And now, having the experience of communication, I can happily declare that my boss is a rare case of a customer who knows how to concretize his thoughts, dot the i's and enter, in my opinion, in any position of the performer.
Tornado did not start with the logo. Not with models ... The tornado began with a motion vector. With ideas and burning eyes. The project, designed to make life easier not for a narrow circle of people, but for everyone we can.
It all started with a simple ... Table, input fields ...
I was given a logo and a rough image.
And an infinite field for implementation. Roma did not climb into the code, I tried to implement his idea.
The first puncture arose at the moment when it dawned on me: the logo will take up a lot of space in the header; if a model is open, it must be hidden. The right decision came by chance. I put instead of “logo.jpg”, “logo.png". And there was only a name, without a logo. And the cap collapsed into a string. I realized that it needed to be implemented, and you can't do without JS (by the way, you can try , click on the logo and see).
Honestly, I have a preconceived opinion about all libraries and frameworks. I consider their connection superfluous. They are "fat." For single problems it does not make sense to connect a large library. Easier to write your own small and logical script. It is better to go around a couple of dozen forums, but to put the most valuable thing on the site than to take the standard function of the same jQuery by uploading to the browser a collection of third-party functions that will not be used.
So I started learning JavaScript. Almost from scratch.
After a thoughtful reading of the forums for no more than half an hour, the recursive functions of extending and closing the logo appeared. I also discovered the lang property. It turns out that this property is in all elements, like style. And, officially, it should set the language in which the content of the element is written. However, in practice it is used not as intended, but as an object for data storage.
By the way, I want to say that all beginners, first of all, need to understand not the possible versions of the implementation, but the logic of these versions. So, and only this way, you will understand which methods are suitable in your case, and which ones are not only not suitable, but also harmful.
By the end of the day, the hat was made and tuned for beautiful and smooth work. But this was not enough for me ... In front of me was a naked table and a large menu that occupied a little — a lot of 260 pixels of page width. The view, of course, spoiled. A little poshamaniv with already gained experience in JS, I forced her to move forward and move. However the inscription
ABOUT
P
C
AND
AND
I didn’t like the look of the advertising sign of a not very advanced store. And I went deep into CSS to find a way to expand the text, or each letter, at 90 degrees.
And I realized that my knowledge is insignificant, and the cross-browser compatibility of the rotated text leaves much to be desired. The only suitable tool was SVG. But it required loading the rules via xmlns c w3. Standards are good. But do not forget that the desire for the ease of the site is now in priority, especially because of the policy of indexation. It is because of the severity of sites that are collected in visual editors.
Having climbed the articles and forums, I found a way to expand the text without SVG. Unfortunately, older versions of IE (7 and below) had to be sacrificed.
Options suggested first a small set of functions for working with the model. In general, setting the height of the options did not cause any problems. Approximately (due to my ignorance) I set the percentage of location from the upper border - and forgot about it, as a decided issue. He surfaced later.
The functions of working with the model assumed three different types.
Where the columns are plus and minus, and the rows are user-defined text. Reverse option. And - where the column and row names are specified by the user.
Of course, for each option, a change in the number of rows / columns should have been implemented.
From a newbie point of view, everything is simple. The table has TBODY. There is an array of strings in the body. His and change. An array is a collection. And, as I understood, having climbed the forums, I was not the only one who perceived it as an array. But it was not there.
Unfortunately, as a lyrical digression, I would like to point out that site layout with tables is considered to be the last century, and many web designers have almost disgusted it. It is not right. Everything has its place. And everything needs to be used wisely.
Most forum replies use the appendChild (obj) and removeChild (index) methods. But (the voice crying in the wilderness) this is wrong! Debugging shows that you are adding a “child” to TBODY. And, although the string will be present when crawling the lines, it will be absent from the collection of lines. And that means it's a joint.
Another lyrical digression: testing the layout in different browsers, I, of course, swore at developers who solve undefined behavior differently. These are the cases, for example, when the strictly set width or height is too large. And then browsers (I will not poke a finger) begin to be strange. Which of them is strange - you decide. But different interpreters depict your design differently.
It was decided to use the standard functions of adding a line and deleting it. This is insertRow (index) and deleteRow (index).
On that adventure, as usual, are not over. Deleting rows is a tricky business. If a row is not deleted at the beginning and not at the end, all the IDs in the table will have to be set again (the elements are interconnected), and there were a lot of them. Each cell has a hidden field that stores the value of the selected points, a table with points (points), each of which has an onhover event, and, in fact, an input field for text. The tricky IDreborn feature was created for this purpose. And so, when the debugging of the removal was finished, there were cosmetic issues.
Having opened the site on the netbook, I realized: the options are shifted down; on small screens, some of the functions are invisible, and there is a place on top. ... It was an unacceptable mistake.
And I began to try to align the options in height. The first or second link in Google, I found at least six ways to vertical alignment. Each of them gave the result in a particular case and under the specific conditions of the object to be leveled and its parent. Some were cross-browser, some were not. I chose a more or less universal way. Having created a parent object, fixed on the page (position: fixed;) and stretched in height at the right edge (top: 0; bottom: 0; right: 0;), I placed a half-height block with a negative field below (margin- bottom: -247px;), equal to half the height of the options (thanks to the available developer tools in browsers, helped to find out). And, of course, the options themselves, pre-collapsed in width to zero, so that they can be nominated.
Then I realized: chemistry with overflow turns 50% of the time - against you. Browsers do not understand layout as they want. And Firefox (Mozilla) when using simultaneously the settings overflow-x and overflow-y does not display the element at all (although Chrome understands this combination).
Having refused from overflow, I made one more important remark for myself.
Set padding-left to, for example, 10px. Width set at 0px. PROFIT! Width is zero! Now set the same padding-right. And the width will be equal to it. And this strange logic is not a single browser!
When the rigging with the options was completed, we with the chef looked at the model and understood: the text in the conception table is not one-line. And, it means that text boxes are not enough, we need textarea. And I began to rewrite.
In general, there were no problems ... Is it possible to note the automatic increase in the height of the text field depending on the content.
On the forums, I found a way: the text, each time I press a button inside the textarea, we write an invisible div of the same width and with the same font as the textarea. We get its height and, with the condition of minimum height, set the same height for the text field. A little poshamaniv, I realized that specifying the width of the script - inconvenient.
You need to have access to customization through CSS. In general, the settings for the appearance of the table were created. For simplicity (!) Settings. So I studied access to classes.
If anyone needs it, I bring a simple and amusing function:
function getStyle(className) { var classes = document.styleSheets[0].rules || document.styleSheets[0].cssRules for(var x=1;x<classes.length;x++) if(classes[x].selectorText.indexOf('.'+className)+1) return classes[x].style; return null; } Which created the bridge, allowing not to change the values ​​in the code, but to change them in one external file.
In general, I always aim to create a site that can be disassembled and assembled from pieces. It's comfortable. For example, in the process of execution, you will understand that the customer wants to use one of the well-known CMS. Then you will simply disassemble the site and assemble it on the CMS-ke with a minimum of rework.
That's all for now, tk. I still have a lot of unresolved issues and unrealized opportunities. Ideas, as usual, even more.
Hopefully beginners, like me, article was helpful. Grow, develop, try, and give you high qualities for the cost of effort! Good luck.
')
Source: https://habr.com/ru/post/211450/
All Articles