DEV Community: Andreas Ströberg

Single Page Applications in the cloud!

Andreas Ströberg — Thu, 07 May 2020 12:37:11 +0000

Step up and become a SPA superhero. Follow these four easy steps to SPA success without any need for backend programming. This article includes a cloud-based tool called Stackend.com - but it's freemium

Single page apps (SPA) aim to improve website performance and increase conversions. Some of the benefits: Fast and responsive design (if done correctly). Since a SPA updates the desired content only, it dramatically improves the loading time.

So — could this be for you? Let’s find out.

Why should I build a single page application?

A single-page application doesn’t need to reload the page during its use and works within a browser. You probably used Facebook, Google Maps, Gmail, Twitter, Google Drive, or even GitHub. All these are examples of a SPA.

The main reason for building a SPA is, however — speed. And speed is money. Studies done by Google and key findings by companies such as Amazon and Wal*Mart show that if a page takes more than 200 milliseconds to load, it has the potential to actually mess up your business or, at the very least, cost you much money.

Why shouldn’t I build a single page application?

Some stuff gets a bit more complicated. SEO needs to be done a bit different and some third party integration that relies on the complete page content being available on load may not work. Also, it (typically) increases the load on the browser.

As for now — Google is the only search engine that kind of works with javascript rendered SPA. Bing claims to, but according to tests does not.

Ok - I want to build a Single Page Application"

What we will look at here is a super simple way of building a SPA without the need for an application server such as node.js BUT if you want to take it to the next level and do server-side-rendering— you can still use whatever you create here.

First Step - Register (free) or login to Stackend.com and create a Stack.

Here’s the important part to just add what domains you want this stack to be available from. For this demo, we will use codepen.io — you can do the same when testing or use just about anything that can render HTML.

** Second Step** - Create three Code Bins and add some HTML.

Really, you’re that lazy? Ok…. here’s the HTML for this:

<div class=”blue”>
<h1>It’s wonderful in the SPA — Page 1</h1>
<p>Fun family entertainment everyone can enjoy</p>
</div>

and CSS:

.blue {
 width:100%;
 background:lightblue;
}
h1 {
 text-align:center;
 font-family:helvetica;
 padding:20px;
 color:white;
 font-weight: 700;
}
p {
 text-align:center;
 font-family:helvetica;
 padding-bottom:40px;
 color:white;
 font-weight: 300;
}

Create three code bins with different colors and change the <h1> text to Page 1 and Page 3. It’s just so you can see the difference later.

Third Step — Create three Pages and add your Code Bins to each Page.

Now create three pages. Process being: Create the page and add the created code bin. The name will be the link in the next step but you can change this later. To make it simple I’ll just stick to the colors.

Fourth Step — Create a Site and see your SPA in all its glory!

Simply Create a site, name it whatever you want, and add page red, page blue, and page green to your site. Once done click <>copy and paste the site code to your codepen or page. Voila! A single page application!

Now — get creative and start clicking around. For example, you can add a header to your site, change to verticle menus, or create your own. Read the doc for more info (that will get better - promise)

Here's the test-site created above:

Here's a site with

Hope you had fun!

Create a carousel without Javascript

Andreas Ströberg — Tue, 17 Dec 2019 13:10:03 +0000

There are many installable slideshows out there like OWL, glide.js, bootstrap js and a bunch of others but all these need some kind of installation.

This guide will show you how to not only get a slideshow up and running but also with the benefit of having it headless.

You will need the following:

Basic skills in HTML / CSS or you can copy-paste my code.
A pen on https://codepen.io/pen (For demo purpose)

Step 1 — Get your environment ready

Go to https://stackend.com and log in. The first step is to create a stack (if you already have one you can use that) — Do this by clicking on “My Stacks” in the top left corner and then “Add new stack”.
Give the stack a name. I named mine “Stackend Demo” but you can name it whatever you want.

Click on settings in the bottom of the left menu if you’re not already on the settings page. In the “ALLOWED DOMAINS” field add s.codepen.io & cdpn.io — if you want to use something else then make sure to add the correct domain.

Step 2 — Create your slides

Click on the "create new" button after Code Bins in the left menu to create a new module.
Name it Slide 1.

Add this to the HTML field (or whatever you want):

<div class="slide1">
 Hello World - this is my first slide!
</div>

Click Save.
Once again, click on the "create new" button after Code Bins in the left menu to create a new module. Name it Slide 2. Add this to the HTML field (or whatever you want):

<div class="slide2">
 Hello World - this is my second slide!
</div>

Click Save.

Once again click on the "create new" button after Code Bins in the left menu to create a new module. Name it Slide CSS.
Add this to the CSS field (or whatever CSS you want):

.slide1 {
background-image: url(https://api.stackend.com/media/get/c71/cms/mitchell-orr-389605-unsplash-jpg.jpg);
color:white;
height:500px;
width:100%;
background-size:cover;
background-repeat:no-repeat;
background-position:center center;
}

.slide2 {
background-image: url(https://api.stackend.com/media/get/c71/cms/wade-austin-ellis-677123-unsplash-jpg.jpg);
color:white;
height:500px;
width:100%;
background-size:cover;
background-repeat:no-repeat;
background-position:center center;
}

Ok, That’s it. Now you have 2 slides and some simple styling to make them look stylish (well.. kind of).

Step 3 — Create the slideshow/carousel

Head over to https://stackend.com/docs and look for Slideshow in the left menu under modules. There you can see the attributes for the slideshow module but if you copy the code below it’s a good start for the demo.

<!-- This is your stackend launch script -->
<script defer type="text/javascript" src="https://stackend.com/launch.js></script>

<div data-stackend-type="stackend-slideshow" data-stackend-indicators="true>

<!-- your slideshow goes here -->
</div>

Copy this code and create a new pen on https://codepen.io/pen/
Paste the Stackend code into the HTML field on codepen.
The first line is the basic stackend setup.
The second line is the start of your slideshow. Any code bins you add between here and the closing div will be in your slideshow.
Now let’s add the 3 code bins. Let’s start by adding the CSS.
In stackend, click on Code Bins in the left menu and locate Slide CSS on your right side. Click on it. In the top left corner, you will see a button that says <> COPY. Click on that and a popup will appear. Click the <> copy button for the first row (the module code). In my case it looks like this (yours will be different):

<div data-stackend-type="stackend-cms" data-stackend-id="71:5"></div>

Go to your codepen and paste it in the top or bottom, just not in the actual slideshow div.
Now, do the same for the code bin modules slide 1 and slide 2 but paste them between the slideshow divs.
So, when done you should end up with something like this:

<!-- This is the stackend launch script -->
<script defer type="text/javascript" src="https://stackend.com/launch.js"></script>
<!-- This is the css for the slideshows -->
<div data-stackend-type="stackend-cms" data-stackend-id="71:5"></div>
<!--This is the actual slideshow-->
<div data-stackend-type="stackend-slideshow" data-stackend-indicators="true> 
<!-- This is the code bins slide1 and slide2 -->
<div data-stackend-type="stackend-cms" data-stackend-id="71:21"></div>
<div data-stackend-type="stackend-cms" data-stackend-id="71:22"></div>
<!-- This closes the slideshow -->
</div>

You can view this example on codepen:

https://codepen.io/stackend/pen/xxKZgQX

See the Pen Create a carousel / slideshow witout Javascript (local css) by Stackend
(@stackend) on CodePen.