DEV Community: Arinze Chinweuba

SplideJS Revolutionize Your Website Design with Seamless Slider Integration

Arinze Chinweuba — Sat, 09 Sep 2023 03:39:10 +0000

Introduction

A popular computer language mostly used for web development is JavaScript (JS). It was developed in 1995 by Brendan Eich and is frequently referred to as the "language of the web" since it is crucial for creating dynamic and interactive web pages and web applications.

JS is a high-level, interpreted, and dynamically typed language, it is simple to use, doesn't need to be compiled, and allows variables to hold values of many data types at runtime.

JavaScript was initially created to manage client-side interactions in online browsers, but it has developed over time to allow server-side development (Node.js) and a variety of applications outside the web.

It is supported by all major web browsers, making it a versatile choice for front-end development.
Also, It makes use of a prototype-based inheritance paradigm, which makes it possible to program objects without using conventional classes.

Having stated all of this, let me introduce you to JavaScript's concept of libraries.

JavaScript libraries are collections of pre-written JavaScript code that offer particular functionality or features, enabling the development of apps simpler and quicker for developers. These libraries can be used in applications, saving developers the time and effort of writing new code.

I use to be the kind of developer that believed that "No you need to know how things are done and do them without making use of anything other than the concept" that is to say in other words "No shortcuts" till I started using libraries then I knew, I was so wrong in my decision.

Already made tools such as css-generators for example, improves your productivity and reduces work load. The same as libraries be it CSS, JS, Python and so on, they all reduce work load and make the process faster.

With all these said, I made use of a JS library to build my first e-commerce website. Continue reading to see the application of a library in action.

JavaScript libraries that are widely used include jQuery, Lodash, Moment.js, D3.js, Splide.JS, and many others.

But Splide.JS will be the main topic of our attention.

Prerequisites

To follow this tutorial, you’ll need to meet these requirements.

Working knowledge of HTML structure.
Working knowledge of CSS.
Working knowledge of JavaScript.
A text editor or IDE of your choice.
And lastly, check the Splide.js browser support.

What Is Splide.JS, then?

Splide is a TypeScript-based slider that is adaptable, lightweight, and user-friendly. By simply altering parameters, such as multiple slides, thumbnails, nested sliders, vertical direction, and more, it enables you to design different types of sliders. Additionally, you can improve the slider's functionality by creating extensions.lls or using APIs.

You might also wish to inquire as to what a carousel is, A carousel, sometimes referred to as a slider, is a common user interface component that is used to rotate or slide a collection of photos, information, or other media objects.

Multiple objects can frequently be displayed in a small area on websites and applications, usually in a visually pleasing and engaging fashion.

This guide will show you how to use the Splide.JS library to create an image carousel.

Getting Started with Splide.JS Library

Installation Guide

Option 1
Let's proceed on how to use Splide in our projects. It is important to note that the most preferred installation method is NPM.
Come on let's install Splide's latest version with the following commands.



$ npm install @splidejs/splide

Option 2
Another way of installing Splide is by downloading it's package from GitHub.
After you've downloaded the zip file, extract it, go to the dist/js directory, and import thesplide.min.js file by the



<script src="path-to-the-file/splide.min.js"></script>

Option 3
You also have access to this library from the Content Delivery Network(CDN):



<script src="
https://cdn.jsdelivr.net/npm/@splidejs/splide@4.1.4/dist/js/splide.min.js
"></script>



<link href="
https://cdn.jsdelivr.net/npm/@splidejs/splide@4.1.4/dist/css/splide.min.css
" rel="stylesheet">

React, Vue, and Svelte developers aren't left out, integration packages are available for you guys too:

Importing CSS

If you want to have full access to the Splide library, you should go for option 2, which downloading the zip folder from GitHub. You will see several CSS files in the dist/css and dist/css/themes directories to fully customize the carousel appearance.

Select the splide-core.min.css file that does not include arrows, pagination and progress bar styles. Otherwise, select splide.min.css or splide-[theme].min.css.

Next, link the stylesheets



<!-- Link to the file hosted on your server, -->
<link rel="stylesheet" href="path-to-the-file/splide.min.css">

<!-- or link to the CDN -->
<link rel="stylesheet" href="url-to-cdn/splide.min.css">

The Building Process

We will use simple HTML to build the Splide containers, use the following markups:



<section class="splide" aria-label="Splide Basic HTML Example">
  <div class="splide__track">
        <ul class="splide__list">
            <li class="splide__slide">Slide 01</li>
            <li class="splide__slide">Slide 02</li>
            <li class="splide__slide">Slide 03</li>
        </ul>
  </div>
</section>

Or you can choose to replace the section tag with a div tag depending on whether the carousel is directly related to your main contents or not.



<div class="splide" role="group" aria-label="Splide Basic HTML Example">
  <div class="splide__track">
        <ul class="splide__list">
            <li class="splide__slide">Slide 01</li>
            <li class="splide__slide">Slide 02</li>
            <li class="splide__slide">Slide 03</li>
        </ul>
  </div>
</div>

The next step, is to create an instance of the Splide class, import it, and use the mount() function.



import Splide from '@splidejs/splide';

new Splide( '.splide' ).mount();

Take note that the mount() method must be called if not nothing will be displayed on your choice of web browser.

If you chose option 2, use this :



<script>
  new Splide( '.splide' ).mount();
</script>

Initializing your script tag in the head tag, use this:



<script>

  document.addEventListener( 'DOMContentLoaded', function() {

    var splide = new Splide( '.splide' );

    splide.mount();

  } );

</script>

Conclusion

There're plenty of examples to use once you head on to Splide site. This is just a recap or let's say a quick guide of how you could start using this amazing JavaScript library.

Not withstanding the fact that practice makes perfection, I'm using this library to build my first e-commerce website.

You can visit here for more details.

I hope this helps you use this library to your advantage. Thanks for reading and feel free to ask about any problem you encountered in the comment section.

Stay Ahead of the Game Must Have Front-End Boilerplates and Starter Kits for Every Developer

Arinze Chinweuba — Thu, 07 Sep 2023 00:02:44 +0000

With Boilerplates, you can set up projects faster and get to work immediately, without having to write everything from scratch every single time.

Today, I'm writing on Boilerplates and Startup kits you should use for a variety of projects from static site templates to React and Vue frameworks.

1. A Boilerplate for Forms

Dealing with forms can be sometimes troublesome. Luckily there's an HTML and CSS boilerplate called Boilerform that can solve this issue. This handy little template gives your forms a kickstart by providing well-organized CSS based on the BEM methodology along, with attributes, on elements.

Prerequisites

HTML
CSS
JavaScript

Getting Started

Drop the CSS file into your head with the following snippet:

<link rel="stylesheet" media="all" href="https://cdn.jsdelivr.net/gh/hankchizljaw/boilerform@master/dist/css/boilerform.min.css?v=1.1.1" />

Then all you need to do is wrap your elements in a .boilerform wrapper. Something like this:

<div class="boilerform">
    <!-- Add all of your boilerform elements in here 👍 -->
</div>

Preview

Just head on to Boilerform to get started!!

2. GitHub Template Guidelines

This template provides a kick start for your user-friendly GitHub repositories. To get this project up and running in your local machine, do the following

$ npm install --global ghdocs
$ ghdocs

Here's the link to the gitHub repo by Augusto Cezar

3. Hackathon Starter

Well, I've never attended a Hackerthon before and have no prior knowledge of what it looks like.
But I happen to come across a guide that we'll help me start up when the time comes.
The Hackerthon starter will help you set up a NodeJS application and will help you focus on what is really important.
This starter also provides you with a boilerplate that features local authentication with email and password, authentication via Twitter, Facebook, Google, GitHub, LinkedIn, and Instagram, flash notifications, MVC project structure, account management, API examples, and much more to help you get started.

Prerequisites

MongoDB
Node.js
Command Line Tools

Getting Started

# Get the latest snapshot
git clone https://github.com/sahat/hackathon-starter.git myproject

# Change directory
cd myproject

# Install NPM dependencies
npm install

# Then simply start your app
node app.js

3. HTML Boilerplate

Copying and Pasting the HTML structure from the last site you did might not sometimes be the best option.
Thanks to Manuel Matuzovic who published a HTML boilerplate on his blog for everyone to use, along with detailed explanations for each line of code so that you know exactly what you’re dealing with. A great opportunity to dive deeper into the underlying structure of a page.

<!DOCTYPE html>
<html lang="en" class="no-js">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">

  <title>Unique page title - My Site</title>

  <script type="module">
    document.documentElement.classList.remove('no-js');
    document.documentElement.classList.add('js');
  </script>

  <link rel="stylesheet" href="/assets/css/styles.css">
  <link rel="stylesheet" href="/assets/css/print.css" media="print">

  <meta name="description" content="Page description">
  <meta property="og:title" content="Unique page title - My Site">
  <meta property="og:description" content="Page description">
  <meta property="og:image" content="https://www.mywebsite.com/image.jpg">
  <meta property="og:image:alt" content="Image description">
  <meta property="og:locale" content="en_GB">
  <meta property="og:type" content="website">
  <meta name="twitter:card" content="summary_large_image">
  <meta property="og:url" content="https://www.mywebsite.com/page">
  <link rel="canonical" href="https://www.mywebsite.com/page">

  <link rel="icon" href="/favicon.ico">
  <link rel="icon" href="/favicon.svg" type="image/svg+xml">
  <link rel="apple-touch-icon" href="/apple-touch-icon.png">
  <link rel="manifest" href="/my.webmanifest">
  <meta name="theme-color" content="#FF00FF">
</head>

<body>
  <!-- Content -->
  <script src="/assets/js/xy-polyfill.js" nomodule></script>
  <script src="/assets/js/script.js" type="module"></script>
</body>
</html>

4. All-In-One Front-End Boilerplate

This Boilerplate provides you with a starter kit to develop, build, and deploy your next web project.

Here are some of its features you should before embarking on this boilerplate. They include:

Multiple Frontend SCSS frameworks at your disposal ( Eg:- New - - Bootstrap 4 and Foundation 6 )
Easy to manage folder structure but you can change whatever you want ( Eg:- MVC framework-like folder structure )
A centralized place to manage your JavaScript, images, fonts, and all project-related settings.
Ability to auto-switch remote URL, if you prefer.
For Windows users easy to run dev and build tasks with provided shortcut bat files.
Hassle-free font-face generation with the ability to switch remote URLs during the build process.
Integrated project backup feature and ability to get the source and build files backup anytime
Automatic Deployment to the production server.

Prerequisites

Yarn
Node JS

5. Mobile-First Boilerplate

What do you normally start with mobile view or desktop view?

If you do start with mobile responsiveness, here's a Boilerplate for you. This boilerplate provides you with the following features:

A minimal, modern CSS reset
A responsive, mobile-first grid built on Flexbox
A well-designed, fluid typographic scale
CSS buttons
Simple table styling
Common form components Get started

6. Responsive HTML Emails Boilerplate

Do you struggle with formatting HTML emails?
Here's another handy pretty Boilerplate for sending out nice formatted messages to your clients as a whole.

7. PHP Boilerplate

PHP developers aren't exempted from the list. This could come in handy with exceptional performance you might want to try.

Here's a medium post by Jens Kuerschner where he talks extensively on this template.

8. SaaS Boilerplate (BedRock)

The modern full-stack Next.js and GraphQL boilerplate combines the best tools the JavaScript ecosystem has to offer into one solid foundation for your SaaS product.

BedRock allows you to focus more on your product rather than wondering what tool to use to get started. Most of the technologies used in BedRock can easily be removed and the best is, you don't have to know all of these technologies.

9. Static Site Boilerplate

This uses the latest tech to make the process of building static websites more straightforward.

Prerequisites

NodeJs
NPM
Git

Installation Process
Step 1: Clone the repo

git clone https://github.com/ericalli/static-site-boilerplate
rd /s /q .git && git init

Step 2: Install all dependencies

npm install

Step 3: Run the deployment server

npm run start

Get started here.

10. React Boilerplate

React developers aren't excluded from this list. To get started :

Make sure that you have Node.js v8.15.1 and npm v5 or above installed.
Clone this repo using git clone --depth=1 https://github.com/react-boilerplate/react-boilerplate.git <YOUR_PROJECT_NAME>
Move to the appropriate directory: cd <YOUR_PROJECT_NAME>
Run npm run setup in order to install dependencies and clean the git repo.
Delete the example app by running npm run clean
At this point, run npm start to see your application at http://localhost:3000.

Get started here.

Conclusion

Remember, all these Boilerplates are bound to save you time, highly scalable, and created with a focus on performance, best practices, and Developer's experience