In the shoes of a web developer
Prologue
This post is based on the article " Copy the source code without numbering lines ." Also, in this post there is no new information for web-development and web-design professionals. And if you consider yourself as such, then you can not look under the cat with peace of mind.
Peering under the cat, the hacker's reader will find amateurish attempts to make, on the basis of the above article, a beautiful highlight of the syntax of the Delphi language, a description of the torment and the fight against emerging bugs. Well, some subjective impressions about the top five common browsers.
Exposition
By the nature of my occupation, I am
Of course, many IT people will say that this is another bike, that you can do without Apache, Ngnix or even DropBox / SugarSync, and in general there is DelphiWorld. But as an excuse, I can say that all this is written primarily to enhance the skills of “HTTP protocol”, “web server device”, “use gzip”, and of course getting a new experience in cycling.
')
Since my work is not yet connected with web development, my main browser was accidentally Firefox two years ago. I didn’t even really know the rest. Well, except with IE, which due to its built-in OS gets out when necessary and not necessary.
Outset
When the article " Copying the source code without numbering lines " appeared, it was decided to use the specified developments in your project. The first attempt revealed a problem: in this article, the hyphenation in IE7 / IE8 did not work correctly. The author immediately responded - it turned out that the necessary line was deleted during the refactoring process.
So, the code seems to work fine in IE and in Firefox. And not here it was.
Action development
Although both IE and Firefox displayed the text as they wanted, when copying and pasting, both safely ate spaces, despite the fact that both pre and code tags were indicated. And they ate them in different ways: the first squeezed a lot of spaces to one, the second threw out the leading spaces. Of course, the first thought is to replace the spaces with nbsp , as the author of the above article did in his demo. But something did not lay my soul to this decision.
Taking mentally in the hands of the shaman tambourine, I went deep into wild dancing for three evenings. God, it was then that I realized that I was in vain about the typesetters with a slight disdain. But these are only two browsers.
Climax
In the course of the “dances” Opera appeared on the car. Surprisingly, she did not eat the spaces. Throwing started between online directories, three browsers, two editors - correct, switch, update, select, copy, switch, paste, switch to the second browser, update, delete, and so on in a circle in various combinations.
The layout was floating, then extra line breaks were inserted, the background color disappeared, and much, much more. Gradually, everything that came under the criteria “in principle works without it” was erased from the original code.
Decoupling
Actually, here it is:
<!doctype html> <html> <head> <title>Copy source code with no line number</title> <meta http-equiv="content-type" content="text/html; charset=win-1251" /> <style type="text/css"> .over { display: block; position: absolute; left: 0; width: 7ex; height: 1.4em; z-index: 1; background: url(#); } .evn { display: block; background: #F8F8F8; } .odd { display: block; background: #F0F0F0; } .lineNumber { position: absolute; left: 0; padding: 0 .5ex; margin: 0; width: 6ex; line-height: 1.4em; background: none; border: none; font-family: monospace; font-size: 100%; text-align: right; color: #666; -moz-user-select: none; -webkit-user-select: none; user-select: none; pointer-events: none; } .lineContent { display: block; margin-left: 7ex; padding-left: 2ex; border-left: 2px solid #33BB66; white-space: pre-wrap; } .token-strings { color: #000088; } .token-comment { color: navy; font-style: italic; } .token-keyword { font-weight: bold; } .header { display: block; margin-top: 1ex; padding-top: 1ex; margin-left: 1ex; padding-left: 2ex; font-family: times; font-size: 120%; font-weight: none; white-space: pre-wrap; } </style> </head> <body> <span class="header"> "Hello, World!" Delphi</span> <pre class="lineContent"> <span class="odd"><input class="lineNumber" tabIndex="-1" readOnly="readonly" value="1" unselectable="on"><span class="over"></span><span class="token-keyword">program</span> Hello; </span><span class="evn"><input class="lineNumber" tabIndex="-1" readOnly="readonly" value="2" unselectable="on"><span class="over"></span><span class="token-comment">{$APPTYPE CONSOLE}</span> </span><span class="odd"><input class="lineNumber" tabIndex="-1" readOnly="readonly" value="3" unselectable="on"><span class="over"></span><span class="token-keyword">begin</span> </span><span class="evn"><input class="lineNumber" tabIndex="-1" readOnly="readonly" value="4" unselectable="on"><span class="over"></span> Writeln('<span class="token-strings">Hello, World!</span>'); </span><span class="odd"><input class="lineNumber" tabIndex="-1" readOnly="readonly" value="5" unselectable="on"><span class="over"></span> Readln; </span><span class="evn"><input class="lineNumber" tabIndex="-1" readOnly="readonly" value="6" unselectable="on"><span class="over"></span><span class="token-keyword">end.</span> </span></pre> </body> </html> Epilogue
Cons of this solution:
- the background of the numbering does not match the background code;
- in Opera, if you start to allocate the numbering from the field and select up, then nothing is copied to the buffer;
- in different browsers at the end of the copied text will be added a different number of line feeds.
Look like that's it. It remains to install the last two browsers and check "their work". Here were my own incomprehensible moments as a simple user.
Chrome:
- a half-boot loader downloaded which downloaded the main installer, silently launched it on the installation, which also silently launched the “installed” Chrome at the end. From the first attempt did not work - a small empty window appeared with the heading "Welcome ..." - to see some part turned out to be "bat". The second attempt was crowned with success - it turned out that the small window is the choice of the default search engine. The choice offered by Google, Yandex, Mail.Ru;
- it was the only browser that put its own shortcut on my clean desktop;
- after installation, file associations with "* .html", etc., did not appear, however, just like Safari;
- when I tried to create such an association, I searched for a long time (a minute and a half) where it was installed - it became clear why there was a shortcut on the desktop, but it is not clear why I got there - the installation was launched from under the admin.
Safari:
- the largest size of the installer;
- when launching a long time formed thumbnails;
- IMHO, you need to get used to his thumbnails - after squaring-praktish-gud is not very familiar;
- after installation, file associations with "* .html", etc., did not appear, unlike Opera and Firefox;
- the only one who did not understand the encoding “charset = win-1251” specified in the file.
And also for comparison, the disadvantages of other browsers that are significant to me (and below, and above - all IMHO):
Opera:
- when you open the page, nothing indicates that the download is in progress - neither with indicators nor with the preliminary rendering of the page - there is a feeling of a frozen application.
Firefox:
- they are sawing for a long time - the 4th version promised in February has not yet been released - yesterday 3.6.15 came out, which fixed the bug with Java scripts that appeared in version 3.6.14.
IE:
- New versions for WinXP will no longer be.
A common disadvantage of almost all browsers: asking to set yourself as the default browser only on the second launch.
PS
A big thanks to the habrac user lahmatiy (all the pluses to him :), as well as to all the web developers who give our internet more beautiful, comfortable and humane - you have patience in your difficult task.
And I will go to finish my bike - it's not my business to type out web pages!
Source: https://habr.com/ru/post/114969/
All Articles