The Front-End Web Developer Spectrum

Modern front-end web development is in constant change. The evolution is this area has been so rapid in the past years that sometimes it’s hard to keep up with the new kids on the block while maintaining focus on what needs to be done.

One example is this image, that gives you an overview of all the different tools and technologies that have a part in the front-end and JavaScript ecosystem.

(Since there is a huge chance that, while I am writing this article, there are 100325 new front-end tools being released, it’s possible that this image is already not completely up to date.)

The Front-End Spectrum

Front-End Spectrum

Continue reading

Feedly Slideshow Automation – When Laziness meets JavaScript

feedly

 

This post comes after one of those “when you’re so lazy to slide though your Feedly news that you write some JavaScript code to automate it” situations. Of course, if you’re not a lazy person or a programming geek like me, you may never have had one of those situations…

I guess I am not the only one who has one or more RSS collection on which I don’t want to read all the news. Only scroll through and check if something interesting catches my attention.

Those are the perfect collections for me to check while I am eating or just taking my break near the computer. Even more perfect if I don’t have to click for the news to change! :)

Continue reading

Scroll a page up and down with jQuery

Sometimes it’s useful to scroll a page up or down automatically to send users to certain parts of the page. One way we can easily accomplish that is by using the scrollTop function from jQuery.

Code example:

<html>
<head>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
    <script language="JavaScript">
    function scroll_top()
    {
        $(window).scrollTop(0);
    }
    function scroll_to_last_div()
    {
        $(window).scrollTop($('#container div:last').offset().top);
    }
    </script>
</head>
<body>
    <div id="container" style="display:block; width:400px; margin: 0 auto; text-align: center;">
        <a href="javascript:scroll_to_last_div();">Scroll to last div!</a>
        <div style="display: block; height: 600px; width: 400px; background: #234a34;"></div>
        <a href="javascript:scroll_top();">Scroll to top!</a>
        <div style="display: block; height: 600px; width: 400px; background: #fa342a;"></div>
    </div>
</body>
</html>