March 6, 2015 at 08:22

Web technologies through the eyes of a C ++ programmer

    A year ago, friends asked me to make a website with dynamic content. Then I knew a little more about the Web than nothing, but it was interesting to try.

    Under the cut, impressions of an avid C ++ programmer from the world of the Web, own bicycles, unusual solutions, indignation about and without. All emotions are taken out in spoilers, so as not to burden the article.

    I hope it will be interesting for Web developers to look at the attempts of the C ++ nickname, but C ++ developers will learn something new for themselves.



    Choosing server-side tools


    Being firmly convinced that it is not necessary to hammer in C ++ nails, PHP was chosen as the main development language. Other languages ​​lost comparisons in terms of support, number of articles and manuals, popularity.
    ... what about garlic?
    One friend long ago said that "PHP is learning in a day!". It was this ease that became the main factor of choice.

    Ubuntu 14.04, the PostgreSQL database, was chosen as the operating system for development.
    ... and what is not MySQL?
    My acquaintance with MySQL always quite quickly ended with the complete demolition of MySQL and the installation of anything else. There are more than enough reasons for this:
    • MySQL doesn’t support SQL, and what it doesn’t support ignores silently (for example, references in create table)
    • MySQL was slow to patches from Oracle
    • after patches from Oracle MySQL makes me fear like any Oracle product. Oracle products break in my hands at the most inopportune moment. For example, once BerkeleyDB recorded garbage in the database and within a month did not notice it, and after a month of operation the database was no longer subject to recovery
    • MySQL significantly outperforms PostgreSQL only in the speed of creating a new connection to the database. Do not cache connections - this is bad form => there are practically no advantages


    The web server was selected by nginx. Apache features would be redundant for a fairly simple project.
    ... and there were other reasons?
    It was interesting to try the new nginx tool, which is full of positive reviews.


    First disappointment


    After installing PHP-fpm and writing “Hello world!” I was really glad that everything was moving well, but then an article about the penetration test caught my eye . From the article it became clear that the default PHP configuration is dangerous! Then it took a day to set up PHP ... and after a month another two days. A firm belief that everything is fine, is still not there!

    It is very sad that there are a lot of opportunities to shoot yourself in the foot in terms of security. But PHP is a language that was originally developed to work with the Web.

    Client-side tools


    After a dubious struggle with the configuration, it was decided to relax and figure out what the page should look like. Aware of Bootstrap, I found a couple of page templates on it with an unbreakable responsive design, chose a prettier one and began to customize it for the project.

    CSS


    Hands rude from brutal C ++ were not at all suitable for working with the beautiful. Squeezing out something worthwhile turned out with great difficulty, the hours of painstaking work took a minimal correction to the design.

    As a result, the following mechanism for working with design was developed:
    • change mostly only icons and pictures
    • if possible, get by with existing styles
    • add color through javascript animation
    • as a last resort minimally edit CSS while preserving the original


    Bootstrap

    Bootstrap for CSS is like Boost for C ++. It’s hard to imagine how much effort it takes if you don’t use it. My insignificant knowledge of CSS at that time was more than enough to start using it, customizing it for myself and even making a beautiful menu at the top of the page.
    ... is it right that perfectly fits the needs?
    Not really. I wanted to hover a drop-down submenu on the menu. Bootstrap did not have the required functionality, but as it turned out, adding it is extremely easy:

    ul.nav li.dropdown:hover > ul.dropdown-menu {
    display: block;    
}
.navbar .dropdown-menu {
    margin-top: 0px;
}


    It was just as easy to make the font larger:
    /* Making menue font bigger*/
.nav > li > a {
    font-size: 1.1em;
}

    So I am very pleased with Bootstrap!


    jQuery

    jQuery is what javascript should actually look like. Short function names, animation , easy access to elements and iteration over them, abstracting over browser-specific things. The basics are understood in 15 minutes of reading the documentation.
    ... did everything fit perfectly straight?
    Frustrated by the lack of commonly used things:
    • work with cookies (setCookie, getCookie)
    • a more advanced string class would be welcome (startsWith, isLetter)

    I had to make an auxiliary file with javascript and put my extensions into it.


    Development


    In the process of development, various problems and shortcomings of the selected tools and technologies began to appear, faced with a lack of adequate implementations of basic things.

    OAuth


    The biggest problem was user authentication. It was decided to use third-party services for authorization, such as Vkontakte, Twitter, Facebook, Yandex, MailRu, Classmates.

    It suddenly turned out that all known services see OAuth in their own way. The differences are not that significant, but because of the small details, the development turned into a real HELL !
    • Yandex is the only one who makes redirects with OAuth
    • Classmates do not count checksums like everyone else
    • MailRu counts checksums not even like Odnoklassniki
    • Google picks on the little things (which honestly I liked)


    At the same time, all services have error messages that are not informative at all , and debugging of PHP code is a separate pleasure, which is described below. In addition, answers from all services come in their own format , which is in no way similar to the formats of other services.
    ... what's wrong with Twitter?
    With Twitter, absolutely nothing is wrong ! There are some inadequate restrictions on the session, because of which 1-2 users per day can use it and if they rarely click. After exceeding the limits, Twitter begins to behave like a schizophrenic in the spring:
    • returns OK but does not authorize
    • prevents returning to the previous page due to constant redirects
    • breaks the entire logic of the site due to the fact that the authorization is OK, but it’s not really OK and needs to be redirected ... But it is impossible to return from the redirected page due to the constant redirect that cannot be turned off



    Php

    With PHP, everything is pretty good - language as a language. True, after C ++ it was unusual to work with an interpreted language: errors that in C ++ are at the compilation stage in PHP are only in runtime. I realized that C ++ corrupts , allowing you to spend less time checking for typos.
    ... you are not saying something!
    There would be fewer errors if new variables were created using the keyword (for example, var as in javascript, or auto as in C ++ 11). Otherwise, any typo in the variable name becomes a new variable .


    In PHP, the lack of a free debugger and the lack of a free development environment are annoying.
    ... after all, I bought it and there were no problems?
    Nope! I'm greedy! I recalled my youth with writing programs in notepad and debugging through printf .


    Slide show

    For the slideshow of the images, the Backstretch plugin was used. But I had to make a text slideshow myself because I wanted it to look good on small screens. If you do through pictures, you would have to make pictures for different screen resolutions, and this is a long time.

    Therefore, it was decided to lay a beautiful layout of the text on Booststrap, and just hide pieces of text and show on the timer.

    Optimization

    A draft version of one of the pages weighed several megabytes. Loaded to stupefaction for a long time. Pagespeed came to the rescue with its tips.

    But the biggest help was provided by the TinyPNG website , which using black magic and quantization compresses images several times without loss of quality.
    ... learned the basics and consider yourself cool?
    At first, I thought I discovered commonplace things. However, after I walked through a number of very famous and popular resources with these tools, it turned out that few people care about size . What can I say, Google itself is not as good as it could be.


    Internet Explorer is cute!

    I am absolutely serious. Internet Explorer - Great! Of course, not as a browser for the user , but as a means of debugging the site. Of course, not as a debugger or style inspector.

    Internet Explorer - displays a site with virtually no CSS extensions, it is very demanding on layout and takes pages incredibly long. These are all pluses ! On it you can make sure that the site is quickly displayed, that unclosed tags did not accidentally crept into javascript. In the end, you can see how the site looks in the worst case, and that the content is still readable.
    ...Seriously?
    Yes.
    ... really, really?
    YES.



    Summary


    Indescribable sensations of touching a new world for me. The feelings are mostly positive, and the result of the work for my unpretentious taste looks decent.

    Only registered users can participate in the survey. Please come in.

    How well the site turned out

    • 29.3% Mediocre, don't do that anymore 298
    • 58.4% Not bad to start, comment below 594
    • 12.2% Brilliant! Don't do this anymore, take my bread away! 125
    1017 users voted. 500 users abstained.

    I didn’t fit into Sathya:

    • 32.7% SEO and advertising - write about impressions 197
    • 32.5% Hosting and Domain Names - Tell About Them 196
    • 66.6% More admin! PostgreSQL, nginx, iptables settings; using sed / grep / ssh 401
    • 46.5% The site is owned by LLC. What can you say about bureaucracy, bills, taxes? 280
    604 users voted. 502 users abstained.
    Tags:

    Also popular now: