Saturday, 26 November 2016

Website Building in the New Millennium (Part 2/2)

Here, let's explore the modern incarnation of the Content Management Framework, Online Website Builders.

What is an Online Website Builder? 

An Online Website Builder is an online platform with tools for creating and updating websites. It could even be considered a dumbed-down version of the Content Management Framework, because installation is not required. Notable examples are Weebly, WiX, Google Blogs, Shopify and WordPress. Follow this link for a more comprehensive listing.


Hold on, WordPress


Yep! WordPress is both a Content Management Framework and a Online Website Builder. wordpress.org hosts the files and plugins needed to install the Content Management Framework, while wordpress.com is a Online Website Builder. But I digress...


Origins 

The natural progression from Content Management Frameworks, was Online Website Builders. Sure, Online Website Builders had their humble beginnings as part of the (now-defunct) Yahoo! Geocities web portals. But they only truly took off after Content Management Frameworks established a foothold on the market. As mentioned earlier, with some knowledge of HTML and maybe CSS, and knowing how to click buttons, one could now build a website simply by installing a Content Management Framework.

But! Why stop there? Why not dumb it down even further? Why not have the installation on the cloud, and then have developers just create websites without needing to concern themselves with installation and setup? That's where Online Website Builders came in. Now not only did people not need to know scripting or database in order to build a website, they didn't even need to know HTML or CSS anymore. All that was needed was to click buttons! So simple, your dog could do it!

Website building? Bitch please.
 

Hosting 

Online Website Builders are hosted online (well, duh!). Users log in to access the interface for creation and updating of websites. Online Website Builders take care of the system updates, security and hosting. The tradeoff is that you have less control (more on that in a bit). Of course, that can count as an upside, because you no longer need to bother with pesky installation details such as PHP version, database compatibility and so on.

Components 

Like Content Management Frameworks, Online Website Builders make extensive use of plugins of which a Content Management System is included. The plugins available for an Online Website Builder tend to be more limited in selection. This only makes sense, since the Online Website Builder is ultimately responsible for the security and compatibility of your product. It goes without mentioning (but here I go, mentioning it anyway) that plugins installed on an Online Website Builder should still work if the Online Website Builder's version is updated. And if something doesn't work, it's most definitely the vendor's fault, not yours.

Control 

Customization is severely limited because in order to ensure security, controls have to be imposed. If you just want a site with the default settings, you're good to go. For anything else, you'll find your hands severely tied. Those restrictions are part of the package. The Online Website Builder is responsible for security and compliance, and certainly can't take the risk of you doing one of the thousand and one things that could break the site. Think of it as a sandbox for your website design - a very small sandbox.

In a Nutshell 

Whatever your choice is in the end, it all depends on what you need. Look past the glossy packaging and do your homework. Now everyone can build a website without depending on cranky and sometimes unapproachable techies. It's all good, right?

Not so good for some web developers who do this for a living, and even those who do this as a side-hustle (guilty as charged). Now hideously unskilled techs can churn out websites for a fraction of the price we used to charge, and even total noobs can do it by themselves if they put their minds to it.

But come on, web devs. Can you honestly say you'll miss having to do this, at times, deadly boring work for customers who don't know what they want and endlessly frustrate us with their lack of savvy? We all knew automation of this process was coming one day. And if you didn't, you need to seriously re-evaluate your participation in this industry. It was inevitable. We should take this as the impetus to move on to bigger and better things. There will always be a place for web developers with legit skills. Just not at this level. This very elementary level.

What a terribly ex-site-ing development,
T___T

Wednesday, 23 November 2016

Website Building in the New Millennium (Part 1/2)

Know what a Content Management Framework is? How about an Online Website Builder? Are they one and the same, or totally two different creatures?

A fair amount of confusion has been generated among laypersons (and even among techies!) as to what Content Management Frameworks and Online Website Builders are. And, for the purposes of the end product, they are pretty much similar. The end game is for a user to be able to maintain and update the content of a website, without the need for the user to know anything beyond how to type. Where the two differ, however, is the approach.

On to the comparisons!

Now before I get deeper into this, I want to make it clear that given a choice, I would rather not be using either a Content Management Framework or an Online Website Builder. Call me old-fashioned. I'm going to draw a few comparisons, but this is not going to be about their respective pros and cons. The simple reason being that, between Content Management Frameworks and Website Builders, there's no such thing as an absolute pro or con. It's all subjective. A pro can turn out to be a con depending on what you're looking for, and vice versa. As I'm so fond of saying, there are no blanket solutions in this business. You want a blanket solution, go look for Linus!

A blanket solution.

What is a Content Management Framework?

This refers to a system which is a collection of resuable software components and modules, used to create websites and web applications. Notable examples are Joomla!, Wordpress, Drupal and Magento. Follow this link for a more comprehensive listing.


Origins

Content Management Frameworks came about originally because some genius decided that customers should be able to update their content without the help of a developer, resulting in faster turnaround times. That certainly was the intention. Customers also found the prospect of not needing to pay maintenance packages to vendors highly attractive. Now they could change their minds every 30 minutes without being billed for it!

The result, however, was that customers decided that the whole process of uploading and editing content was just too complicated and ended up offloading the work to developers anyway. And vendors began charging a premium for the installation of a Content Management Framework.

Another effect was that soon people with only HTML and CSS knowledge could make data-driven websites without knowing how to write scripts and manage databases. So technically-trained developers who were doing web development as their day job or even as a side hustle, now found a whole lot of competition flooding the market.

Hosting

A Content Management Framework is software which has to be installed on the user's hosting service of choice, including offline. In that respect, websites created from Content Management Frameworks are just like any other website. Hosting and domain name are handled by the user's provider of choice. This can be a burden, especially if there are upgrades available for the Content Management Framework. Choosing not to upgrade is not a viable choice, as this leaves the website open to security attacks. Think about it - if you could download the Content Management Framework software for free, so can everyone else. Chances are that the software you're using has already been scrutinized and reverse-engineered by hackers, and that security loopholes have been found. However, upgrading brings its own set of problems. After an upgrade, previously installed plugins may fail due to incompatibility.

And if you made any changes to the core, God help you.

Components

Content Management Frameworks make extensive use of plugins and, of course, a Content Management System where users can type in text content (which the plugin will convert to HTML) and upload images. The selection for any given Content Management Framework is vast, especially if the software is built on open-source scripting, such as PHP or Ruby. Of course, as mentioned earlier, there are no guarantees that those plugins will still work after your next upgrade, or that they are at all secure.

Control

Content Management Frameworks come pre-packaged with certain features such as W3C Compliancy, cross-browser compatibility and responsive design. In the case of Content Management Frameworks, the user is pretty much allowed to do as he pleases. Need to customize a carousel? Sure. Need to implement some server-side scripting? Go ahead. Need to disable those annoying validation checks in the interface? You're the boss. But, but, if you up breaking something, a messy re-installation is in order.

Next

A look at Online Website Builders.

Thursday, 17 November 2016

No-show Nodevember

Days from now, tech conference Nodevember will be held in Nashville, Tennessee on the 20th. In there, panelists will present the past, present and future of the JavaScript-based platform, NodeJS.



Having begun to work more extensively with JavaScript in the last couple years, I naturally took an interest in this particular development. And sadly, this conference will be notable for one significant absentee - Douglas Crockford.

A couple months back, the organizers of Nodevember announced on Twitter that Crockford had been uninvited to the seminar as keynote speaker. Their reason? As follows.

"While we have a tremendous respect for Mr. Crockford's abilities as a speaker and his contributions to our craft, we became aware that based on private feedback - not simply the dialogue on Twitter - that his presence would make some speakers uncomfortable to the point where they refused to attend or speak."


Now, there could be more to the picture than what was presented. We'll never know, and the organizers aren't telling.

What we can see, are little pieces of whatever picture that took place during Crockford's last presentation prior to the announcement. Apparently, Crockford had made quite a few people uncomfortable during his little talk on The Seif Project. Check out the video below.



At the 41:30 mark, he makes the following assertion
"So the old web was great because it provided promiscuity. It meant that you could go and connect to anything and you're probably going to be okay. You might get shocked and embarrassed but your machine's not going to get taken over, your identity is not going to get stolen. That hasn't always been true but pretty much the web can do that and that's good because that allows us to get introduced to things. We used to call it surfing. That you could go from one thing to another and discover stuff and start forming relationships. Unfortunately, the same thing which allows the promiscuity to work is very bad for dealing with commitment. So that's what the new web is for."

Soon, people were accusing him of slut-shaming the Internet and usage of sexist terminology. And this particular accusation on top of everything.

Say what?

Yep, apparently the word promiscuous was too harsh for some very easily offended souls in the audience. In a world now filled with trigger-free zones and political correctness, being outraged appears to be the in-thing now. And Nodevember will be all the poorer for it. While I wouldn't go to the extent of calling him "the Father of JS", Crockford has made significant contribution to JavaScript. I had read his book JavaScript: The Good Parts, and while his writing style was far from engaging, there was plenty to be learned, and it was presented in a manner I could absorb with relative comfort.

Thankfully, Crockford was not without his defenders. In an impassioned blogpost, Adam Morgan wrote, with very deliberate sarcasm:
"What a danger to our industry! Ignoring the complete over-reaction to these two comments a quick search of the word promiscuity on dictionary.com shows that Crockford actually used this word correctly."

He then went on to explain that Crockford had probaby meant "consisting of parts, elements, or individuals of different kinds brought together without order" instead of "characterized by or involving indiscriminate mingling or association, especially having sexual relations with a number of partners on a casual basis". I'm not exactly sure I agree. What version of the word promiscuous had Crockford actually intended? If it had been the second, then why did he follow up with "Unfortunately, the same thing which allows the promiscuity to work is very bad for dealing with commitment"? It certainly seems to hint very strongly at the latter definition.

But still. So what?

Crockford wasn't using a derogatory term on anyone. On your mothers, sisters or even your pet goldfish. If he was slut-shaming, he was slut-shaming the Internet - what amounts to a collection of separate entities made out of electrons and wires, and joined together by the seven OSI layers.

Go watch the video. Crockford's public speaking is even less engaging than his writing. The old dude's Boring with a capital B. Guy was wooden, straight-faced. Dead serious. He wasn't trying to be witty, or cracking a joke. (OK, maybe he was, but he was terrible at it) He was just trying to explain his point using a metaphor. Not a particularly clever one, I grant you. But offensive? Come on.

I guess it's true - people can be butthurt by anything these days. Stop being sensitive. Start being sensible, instead. Techies already have a negative reputation for being socially inept. We really don't need to add being whiny douchebags to that.

The YouTube video below sums it up pretty well. Score one for common sense, old chap.



More on Safe Spaces

In the wake of the 2016 USA Presidential Election, I came across this article about the shattered feelings of voters as Hillary Clinton was defeated at the ballot box by Donald Trump. Really, a "cry-in" to mourn the results of a fair and open election? Is that such a tragedy? Oh, I guess it is, because a man very few people (me included) have a high opinion of, won! And won fair and square, playing by the very rules the US of A have been applying for the past 200 years!

When I was done picking my jaw off the floor, there was another contender for WTF Moment of the Week. The article ended with a campus activities coordinator saying "I have no words". You and me both, lady.

There are probably more instances out there, and judging from this, perhaps I shouldn't have been that surprised about Nodevember's decision concerning Crockford.

What can I say? These Americans are crazy. Going by what's happened this election and what's happened with the upcoming Nodevember, USA is going down the rubbish chute. Not because of Donald fucking Trump, but because this generation of people appear to be crafted from very fragile snowflakes.

The End?

Kevin Old, one of the former organizers of Nodevember, must have realized how ridiculous this entire affair was, because he put this statement up. I guess, better late than never, eh?

What a load of Crock!
T___T

Sunday, 13 November 2016

Web Tutorial: The Mini-carousel

Hello, readers!

Have you ever seen that neat row of images on a website (any website, but mostly photo galleries) that just slides from right to left (or vice versa) seamlessly and endlessly? And ever wondered what it would take to make one?

It's fairly simple actually, and today I'm going to show you just how.

If you recall the web tutorial on The Lightbox Effect I made last year, I used pictures of my nephew Paul. Well, little Paul's going to star in this one again. We'll make a carousel of his pictures and animate it.

HTML and CSS3 is needed for this. You won't need JavaScript, but it sure as hell will make your life a whole lot easier.

To begin, let's start off with a standard HTML setup.
<!DOCTYPE html>
<html>
    <head>
        <title>Carousel</title>
    </head>

    <body>

    </body>
</html>


Add a div with a class of carousel, and then style it like so. The width has to be set to 100% of your screen size, or however wide you want your carousel to be. Here, I've given it a margin of 25% from the top. This number is arbitrary and not really important in the general scheme of things. The height is 200 pixels. Again, you may want to change this to suit your purposes.

The overflow property is set to hidden, and I'll explain why in a bit.

<html>
    <head>
        <title>Carousel</title>
        <style>
            .carousel
            {
               width: 100%;
                height: 250px;
                overflow:hidden;
            }
        </style>
    </head>

    <body>
        <div class="carousel">

        </div>
    </body>
</html>


Now add this to your CSS. This will make all divs a translucent shade of red, and give you a really nifty visual guide.
        <style>
            div {background-color:rgba(255,0,0,0.2);}

            .carousel
            {
               width: 100%;
                height: 250px;
                overflow:hidden;
            }
        </style>


That's what you have right now.


Next, we have another div, with a class of carouselitems. The width is set at 200% of its container, and the height is 90%. This div will contain all the items in your carousel.
<html>
    <head>
        <title>Carousel</title>
        <style>
            div {background-color:rgba(255,0,0,0.2);}

            .carousel
            {
               width: 100%;
                height: 250px;
                overflow:hidden;
            }

            .carouselitems
            {
                width:200%;
                height:90%;
            }
        </style>
    </head>

    <body>
        <div class="carousel">
            <div class="carouselitems">

            </div>
        </div>
    </body>
</html>


Refresh. You should see that the carousel is now a deeper shade of red, and paler at the bottom. That's because the new div is also a translucent shade of red, and overlaid nicely on top of the first div. I set the height temporarily at 90% so you could see the parts where the second div doesn't overlap the first.

Although this div is twice as long as the first, you don't see it sticking out because the overflow property of the first div was set to hidden!.


So set the height of the div to 100%, and we're good to go.
            .carouselitems
            {
                width:200%;
                height:100%;
            }


Now add another div inside that last div you created. It should have the class carouselitem. Singular.
        <div class="carousel">
            <div class="carouselitems">
                <div class="carouselitem">

                </div>
            </div>
        </div>


The CSS class carouselitem is like so. It's floated left and has its height set to 100% and width set to 10%. Why 10%? This will become clear shortly.
            .carouselitems
            {
                width:200%;
                height:100%;
            }

            .carouselitem
            {
                width:10%;
                height:100%;
                float:left;
            }


Your carousel should be looking even redder now on the left. That's because the carouselitem is a translucent red, and overlaid on top of the previous two containing divs!


Still with me? We'll add another two divs inside this new div, and style it with the CSS classes carouselitem_image and carouselitem_content. They will now have its width set to 80% of it's parent. The margin property is set to 0 auto 0 auto to place it right in the middle. The first div is supposed to contain the image, and the second div, the caption.
<html>
    <head>
        <title>Carousel</title>
        <style>
            div {background-color:rgba(255,0,0,0.2);}

            .carousel
            {
               width: 100%;
                height: 250px;
                overflow:hidden;
            }

            .carouselitems
            {
                width:200%;
                height:100%;
            }

            .carouselitem
            {
                width:10%;
                height:100%;
                float:left;
            }

            .carouselitem_image,.carouselitem_content
            {
                width:80%;
                margin 0 auto 0 auto;
            }

            .carouselitem_image
            {
                height:70%;
            }

            .carouselitem_content
            {
                text-align:center;
            }
        </style>
    </head>

    <body>
        <div class="carousel">
            <div class="carouselitems">
                 <div class="carouselitem">
                    <div class="carouselitem_image">
              
                    </div>
                    <div class="carouselitem_content">
                        <p>1</p>
                    </div>
                 </div>
            </div>
        </div>
    </body>
</html>


So far so good?



Now copy this div until you have 5 of them in the same containing div. Number them off.

5 of these suckers make up a width of 50% of the div we styled using the CSS class carouselitems. and since that div is 200% as wide as its parent div, that means 50% of its width is 100% of the first containing div!

Simple math - such fun.
            <div class="carouselitems">
                <div class="carouselitem">
                     <div class="carouselitem_image">
              
                     </div>
                     <div class="carouselitem_content">
                          <p>1</p>
                     </div>
                 </div>

                <div class="carouselitem">
                     <div class="carouselitem_image">
              
                     </div>
                     <div class="carouselitem_content">
                          <p>2</p>
                     </div>
                 </div>

                <div class="carouselitem">
                     <div class="carouselitem_image">
              
                     </div>
                     <div class="carouselitem_content">
                          <p>3</p>
                     </div>
                 </div>

                <div class="carouselitem">
                     <div class="carouselitem_image">
              
                     </div>
                     <div class="carouselitem_content">
                          <p>4</p>
                     </div>
                 </div>

                <div class="carouselitem">
                     <div class="carouselitem_image">
              
                     </div>
                     <div class="carouselitem_content">
                          <p>5</p>
                     </div>
                 </div>
            </div>


And once again, your carousel should be looking really red now. Because 5 of these translucent red divs just about covers the entire carousel.


Now change this line...
div {background-color:rgba(255,0,0,0);}


And let's begin adding images to the carousel, along with some captions. The images should be in a separate folder, named img.
            <div class="carouselitems">
                <div class="carouselitem">
                    <div class="carouselitem_image" style="background-image:url(img/01.jpg)">

                    </div>
                    <div class="carouselitem_content">
                        <p>Fresh from the womb</p>
                    </div>
                </div>

                <div class="carouselitem">
                    <div class="carouselitem_image" style="background-image:url(img/01.jpg)">

                    </div>
                    <div class="carouselitem_content">
                        <p>Tiny pale Yoda</p>
                    </div>
                </div>

                <div class="carouselitem">
                    <div class="carouselitem_image" style="background-image:url(img/02.jpg)">

                    </div>
                    <div class="carouselitem_content">
                        <p>Wants to chew on his Uncle's fingers</p>
                    </div>
                </div>

                <div class="carouselitem">
                    <div class="carouselitem_image" style="background-image:url(img/03.jpg)">

                    </div>
                    <div class="carouselitem_content">
                        <p>More fingers</p>
                    </div>
                </div>

                <div class="carouselitem">
                    <div class="carouselitem_image" style="background-image:url(img/04.jpg)">

                    </div>
                    <div class="carouselitem_content">
                        <p>At age 2</p>
                    </div>
                </div>
            </div>


Uh-oh.


No sweat. The CSS just needs some touching up.
            .carouselitem_image
            {
                height:70%;
                border-radius:1em;
                background-size:cover;
                background-position: center center;
                background-repeat: no-repeat;
            }


Here we are. A row full of little Paul's pics! But something's off here. This thing ain't moving. And if it ain't moving, it ain't a carousel.


So we're going to animate this. Add this to your CSS. This defines a CSS animation, named carousel, and assigns it to the CSS class carouselitems. The animation basically moves the div 100% left of its original position, and repeats for eternity.
            .carouselitems
            {
                width:200%;
                height:100%;
                animation-name: carousel;
                -webkit-animation-name: carousel; /* Chrome, Safari, Opera */
                animation-duration: 15s;
                -webkit-animation-duration: 15s; /* Chrome, Safari, Opera */
                 animation-timing-function: linear;
                -webkit-animation-timing-function: linear;
                animation-iteration-count: infinite;
                -webkit-animation-iteration-count: infinite;
               
            }

            /* Chrome, Safari, Opera */
            @-webkit-keyframes carousel {
                0%   {margin-left:0%;}
                100%  {margin-left:-100%;}
            }

            @keyframes carousel {
                0%   {margin-left:0%;}
                100%  {margin-left:-100%;}
            }


It's moving! But wait. We want this to be infinite. Or at least appear infinite.


We have a couple options here. If you want an entirely JavaScript-free solution, just do this. Copy and paste the div code.
            <div class="carouselitems">
                <div class="carouselitem">
                    <div class="carouselitem_image" style="background-image:url(img/00.jpg)">

                    </div>
                    <div class="carouselitem_content">
                        <p>Fresh from the womb</p>
                    </div>
                </div>

                <div class="carouselitem">
                    <div class="carouselitem_image" style="background-image:url(img/01.jpg)">

                    </div>
                    <div class="carouselitem_content">
                        <p>Tiny pale Yoda</p>
                    </div>
                </div>

                <div class="carouselitem">
                    <div class="carouselitem_image" style="background-image:url(img/02.jpg)">

                    </div>
                    <div class="carouselitem_content">
                        <p>Wants to chew on his Uncle's fingers</p>
                    </div>
                </div>

                <div class="carouselitem">
                    <div class="carouselitem_image" style="background-image:url(img/03.jpg)">

                    </div>
                    <div class="carouselitem_content">
                        <p>More fingers</p>
                    </div>
                </div>

                <div class="carouselitem">
                    <div class="carouselitem_image" style="background-image:url(img/04.jpg)">

                    </div>
                    <div class="carouselitem_content">
                        <p>At age 2</p>
                    </div>
                </div>

                <div class="carouselitem">
                    <div class="carouselitem_image" style="background-image:url(img/00.jpg)">

                    </div>
                    <div class="carouselitem_content">
                        <p>Fresh from the womb</p>
                    </div>
                </div>

                <div class="carouselitem">
                    <div class="carouselitem_image" style="background-image:url(img/01.jpg)">

                    </div>
                    <div class="carouselitem_content">
                        <p>Tiny pale Yoda</p>
                    </div>
                </div>

                <div class="carouselitem">
                    <div class="carouselitem_image" style="background-image:url(img/02.jpg)">

                    </div>
                    <div class="carouselitem_content">
                        <p>Wants to chew on his Uncle's fingers</p>
                    </div>
                </div>

                <div class="carouselitem">
                    <div class="carouselitem_image" style="background-image:url(img/03.jpg)">

                    </div>
                    <div class="carouselitem_content">
                        <p>More fingers</p>
                    </div>
                </div>

                <div class="carouselitem">
                    <div class="carouselitem_image" style="background-image:url(img/04.jpg)">

                    </div>
                    <div class="carouselitem_content">
                        <p>At age 2</p>
                    </div>
                </div>
            </div>


See? It works. But damn, that's a lazy solution and will come back to bite you in the ass when you need to update your code.


Of, if this is being run server-side, use PHP, or whatever server-side scripting language floats your boat.
            <div class="carouselitems" id="carouselitems">
                <?php for ($i=0;$1<2;$i++)  { ?>
                <div class="carouselitem">
                    <div class="carouselitem_image" style="background-image:url(img/00.jpg)">

                    </div>
                    <div class="carouselitem_content">
                        <p>Fresh from the womb</p>
                    </div>
                </div>

                <div class="carouselitem">
                    <div class="carouselitem_image" style="background-image:url(img/01.jpg)">

                    </div>
                    <div class="carouselitem_content">
                        <p>Tiny pale Yoda</p>
                    </div>
                </div>

                <div class="carouselitem">
                    <div class="carouselitem_image" style="background-image:url(img/02.jpg)">

                    </div>
                    <div class="carouselitem_content">
                        <p>Wants to chew on his Uncle's fingers</p>
                    </div>
                </div>

                <div class="carouselitem">
                    <div class="carouselitem_image" style="background-image:url(img/03.jpg)">

                    </div>
                    <div class="carouselitem_content">
                        <p>More fingers</p>
                    </div>
                </div>

                <div class="carouselitem">
                    <div class="carouselitem_image" style="background-image:url(img/04.jpg)">

                    </div>
                    <div class="carouselitem_content">
                        <p>At age 2</p>
                    </div>
                </div>
                <?php } ?>
            </div>


But if you aren't running this on server-side and don't want to do the good ol' copy-paste, here's the JavaScript solution. First, undo the copy-paste job. Then add this JavaScript. It's the function duplicate(). It grabs all the code in the carouselitems div and duplicates it.
        <style>
            div {background-color:rgba(255,0,0,0);}

            .carousel
            {
               width: 100%;
                height: 250px;
                overflow:hidden;
            }

            .carouselitems
            {
                width:200%;
                height:100%;
                -webkit-animation-name: carousel; /* Chrome, Safari, Opera */
                animation-name: carousel;
                -webkit-animation-duration: 15s; /* Chrome, Safari, Opera */
                animation-duration: 15s;  
                -webkit-animation-timing-function: linear;
                animation-timing-function: linear;
                -webkit-animation-iteration-count: infinite;
                animation-iteration-count: infinite;
            }

            /* Chrome, Safari, Opera */
            @-webkit-keyframes carousel {
                0%   {margin-left:0%;}
                100%  {margin-left:-100%;}
            }

            @keyframes carousel {
                0%   {margin-left:0%;}
                100%  {margin-left:-100%;}
            }

            .carouselitem
            {
                width:10%;
                height:100%;
                float:left;
            }

            .carouselitem_image,.carouselitem_content
            {
                width:80%;
                margin 0 auto 0 auto;
            }

            .carouselitem_image
            {
                height:70%;
            }

            .carouselitem_content
            {
                text-align:center;
            }
        </style>

        <script>
            function duplicate()
            {
                var wrapper=document.getElementById("carouselitems");
                var content=wrapper.innerHTML;
                content=content+content;
                wrapper.innerHTML=content;
            }
        </script>


Of course, for that to work, the div must have an id...
<div class="carouselitems" id="carouselitems">


And this has to be added to your body tag.
<body onload="duplicate();">


Run your code again. Does it work? Cool, dude.

The Final Touch

Now we want some semblance of control over when the carousel moves and stops. So do this to your CSS. This changes your mouse cursor to a pointer when you hover over the div, and pauses the animation! You could even say the animation was... Paul-sed. (hur hur)
            .carouselitems
            {
                width:200%;
                height:100%;
                cursor:pointer;
                animation-name: carousel;
                -webkit-animation-name: carousel; /* Chrome, Safari, Opera */
                animation-duration: 15s;  
                -webkit-animation-duration: 15s; /* Chrome, Safari, Opera */
                animation-timing-function: linear;
                -webkit-animation-timing-function: linear;
                animation-iteration-count: infinite;
                -webkit-animation-iteration-count: infinite;
            }

            /* Chrome, Safari, Opera */
            @-webkit-keyframes carousel {
                0%   {margin-left:0%;}
                100%  {margin-left:-100%;}
            }

            @keyframes carousel {
                0%   {margin-left:0%;}
                100%  {margin-left:-100%;}
            }

            .carouselitems:hover
            {
                animation-play-state: paused;
                -webkit-animation-play-state: paused; /* Chrome, Safari, Opera */ 
            }


This is how it should perform. Go on, move your cursor over it and out again.



From here on, you can make the pics link to different pages, or even bring up the Lightbox Effect for magnified pics. The possibilities are endless!

Till next time, stay Paul-sitive!
T___T