DEV Community: Chris Connelly

PURE CSS SVG ANIMATIONS

Chris Connelly — Sun, 12 Sep 2021 18:21:32 +0000

Getting Started With Svelte.js

Chris Connelly — Tue, 24 Nov 2020 14:13:43 +0000

What Is Svelte

Svelte is a radical new approach to building user interfaces. Whereas traditional frameworks like React and Vue do the bulk of their work in the browser, Svelte shifts that work into a compile step that happens when you build your app.

Instead of using techniques like virtual DOM diffing, Svelte writes code that surgically updates the DOM when the state of your app changes.

Why Svelte

✅ Works on DOM, no Virtual DOM
✅ Svelte files has .svelte extension
✅ Each written in svelte files are scoped css.
✅ You can use its internal store apis. No need to install an external library
✅ Build by Rollup with default configuration. However, you can also use Parsel and Webpack.
✅ You can subscribe any variable easily, but it has some hacky ways to detect array mutations. (This one which i didnt like)
✅ You can write both javascript, html and styles in svelte files like you are writing a html file. ( has minor difference)
✅ You access DOM events with on: prefix such as,
✅ You do not need to pass callbacks from child to parents.
✅ You can use createEventDispatcher.
✅ You start a block with {#} and ends with {/} such as {#if}…{/if}

Getting Started With Svelte

Using NPX

You can use this command to start a to do list app

npx degit sveltejs/template svelte-todo-list

Online REPL

In my opinion the best way to get to started is the REPL

Once you are happy with your app you can download all the code for your app in a zip file. Once you've unzipped your file, CD into the folder and run

npm install && npm run dev

you can save your app in the REPL or edit it from your code editor from there.

I made a quick app on the REPL

App.svelte

<script>
  import ContactCard from "./ContactCard.svelte";

  let name = "Max";
  let title = "";
  let image = "";
  let description = "";
  let formState = "empty";

  let createdContacts = [];

  function addContact() {
    if (
      name.trim().length == 0 ||
      title.trim().length == 0 ||
      image.trim().length == 0 ||
      description.trim().length == 0
    ) {
      formState = "invalid";
      return;
    }
    createdContacts = [
      ...createdContacts,
      {
        id: Math.random(),
        name: name,
        jobTitle: title,
        imageUrl: image,
        desc: description
      }
    ];
    formState = "done";
  }

  function deleteFirst() {
    createdContacts = createdContacts.slice(1);
  }

  function deleteLast() {
    createdContacts = createdContacts.slice(0, -1);
  }
</script>

<style>
  #form {
    width: 30rem;
    max-width: 100%;
  }
</style>

<div id="form">
  <div class="form-control">
    <label for="userName">User Name</label>
    <input type="text" bind:value={name} id="userName" />
  </div>
  <div class="form-control">
    <label for="jobTitle">Job Title</label>
    <input type="text" bind:value={title} id="jobTitle" />
  </div>
  <div class="form-control">
    <label for="image">Image URL</label>
    <input type="text" bind:value={image} id="image" />
  </div>
  <div class="form-control">
    <label for="desc">Description</label>
    <textarea rows="3" bind:value={description} id="desc" />
  </div>
</div>

<button on:click={addContact}>Add Contact Card</button>
<button on:click={deleteFirst}>Delete First</button>
<button on:click={deleteLast}>Delete Last</button>

{#if formState === 'invalid'}
  <p>Invalid input.</p>
{:else}
  <p>Please enter some data and hit the button!</p>
{/if}

{#each createdContacts as contact, i (contact.id)}
  <h2># {i + 1}</h2>
  <ContactCard
    userName={contact.name}
    jobTitle={contact.jobTitle}
    description={contact.desc}
    userImage={contact.imageUrl} />
{:else}
  <p>Please start adding some contacts, we found none!</p>
{/each}

ContactCard.svelte

<script>
  export let userName;
  export let jobTitle;
  export let description;
  export let userImage;

  const initialName = userName;
</script>

<style>
  .contact-card {
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.26);
    max-width: 30rem;
    border-radius: 5px;
    margin: 1rem 0;
    background: white;
  }

  header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    height: 7rem;
  }

  .thumb {
    width: 33%;
    height: 100%;
  }

  .thumb-placeholder {
    background: #ccc;
  }

  img {
    width: 100%;
    height: 100%;
    object-fit: cover;
  }

  .user-data {
    width: 67%;
    display: flex;
    flex-direction: column;
    justify-content: center;
    padding-left: 1rem;
  }

  h1 {
    font-size: 1.25rem;
    font-family: "Roboto Slab", sans-serif;
    margin: 0.5rem 0;
  }

  h2 {
    font-size: 1rem;
    font-weight: normal;
    color: #5a5a5a;
    margin: 0;
    margin-bottom: 0.5rem;
  }

  .description {
    border-top: 1px solid #ccc;
    padding: 1rem;
  }
</style>

<div class="contact-card">
  <header>
    <div class="thumb" class:thumb-placeholder="{!userImage}">
      <img src={userImage} alt={userName} />
    </div>
    <div class="user-data">
      <h1>{userName} / {initialName}</h1>
      <h2>{jobTitle}</h2>
    </div>
  </header>
  <div class="description">
    <p>{description}</p>
  </div>
</div>

as a fairly new developer and someone who is new to react I found svelte way easier to understand. In terms of making your app reactive I feel svelte is a great way to go especially if you aren't a huge fan of react.

How to add custom javascript to Hugo

Chris Connelly — Wed, 30 Sep 2020 14:20:27 +0000

Add the following to your config.toml

custom_js = ["js/custom.js"]

in your head.html

{{ range .Site.Params.custom_js -}}
    <link rel="stylesheet" href="{{ . | absURL }}">
{{- end }}

Under static -->js
save your custom.js file!

Rebuild

Creating custom shortcodes in hugo

Chris Connelly — Mon, 28 Sep 2020 20:37:40 +0000

layouts/shortcodes/placehold.html

{{ $width := .Get 0 }}
{{ $height := .Get 1 }}
<img src="https://placehold.it/{{$width}}x{{$height}}" alt="Placehold image"/>

We can now call

{{placehold 250 250}}

we end up with

have you built any cool custom shortcodes?

Developing A Realtor Theme For Hugo: Step 1 Building the pages

Chris Connelly — Mon, 28 Sep 2020 10:36:04 +0000

Introduction

I decided to develop a theme for realtors in my city as A LOT of realtors in my city are still using wordpress and I wanted to create an alternative for them.

The Plan

Here is the game plan:

Find an SSG that will work
Build out the pages first in HTML, SASS and JS
Build out the templates
Find a CMS that will work with the themes and SSG

For this article, I am going to cover the SSG and Pages

The SSG

For the static site generator, I decided to go with Hugo. It is simple to use and the templating engine is awesome! After reading the docs I think it will work with what I need.

Building out the pages

So, the main pages I require are:

Home
Listings
A listing
Staff Page
Contact Us

Home Page

Listings

For the listing page I will need to set up a filterable gallery.

The Gallery

I decided to go witht thise style of gallery I think it looks nice. Next to add some filtering

The filters

// File#: _3_advanced-filter
// Usage: codyhouse.co/license
(function() {
  // the AdvFilter object is used to handle: 
  // - number of results
  // - form reset
  // - filtering sections label (to show a preview of the option selected by the users)
  var AdvFilter = function(element) {
    this.element = element; 
    this.form = this.element.getElementsByClassName('js-adv-filter__form');
    this.resultsList = this.element.getElementsByClassName('js-adv-filter__gallery')[0];
    this.resultsCount = this.element.getElementsByClassName('js-adv-filter__results-count');
    initAdvFilter(this);
  };

  function initAdvFilter(filter) {
    if(filter.form.length > 0) {
      // reset form
      filter.form[0].addEventListener('reset', function(event){
        setTimeout(function(){
          resetFilters(filter);
          resetGallery(filter);
        });
      });
      // update section labels on form change
      filter.form[0].addEventListener('change', function(event){
        var section = event.target.closest('.js-adv-filter__item');
        if(section) resetSelection(filter, section);
        else if( Util.is(event.target, '.js-adv-filter__form') ) {
          // reset the entire form lables
          var sections = filter.form[0].getElementsByClassName('js-adv-filter__item');
          for(var i = 0; i < sections.length; i++) resetSelection(filter, sections[i]);
        }
      });
    }

    // reset results count
    if(filter.resultsCount.length > 0) {
      filter.resultsList.addEventListener('filter-selection-updated', function(event){
        updateResultsCount(filter);
      });
    }
  };

  function resetFilters(filter) {
    // check if there are custom form elemets - reset appearance
    // custom select
    var customSelect = filter.element.getElementsByClassName('js-select');
    if(customSelect.length > 0) {
      for(var i = 0; i < customSelect.length; i++) customSelect[i].dispatchEvent(new CustomEvent('select-updated'));
    }
    // custom slider
    var customSlider = filter.element.getElementsByClassName('js-slider');
    if(customSlider.length > 0) {
      for(var i = 0; i < customSlider.length; i++) customSlider[i].dispatchEvent(new CustomEvent('slider-updated'));
    }
  };

  function resetSelection(filter, section) {
    // change label value based on input types
    var labelSelection = section.getElementsByClassName('js-adv-filter__selection');
    if(labelSelection.length == 0) return;
    // select
    var select = section.getElementsByTagName('select');
    if(select.length > 0) {
      labelSelection[0].textContent = getSelectLabel(section, select[0]);
      return;
    }
    // input number
    var number = section.querySelectorAll('input[type="number"]');
    if(number.length > 0) {
      labelSelection[0].textContent = getNumberLabel(section, number);
      return;
    }
    // input range
    var slider = section.querySelectorAll('input[type="range"]');
    if(slider.length > 0) {
      labelSelection[0].textContent = getSliderLabel(section, slider);
      return;
    }
    // radio/checkboxes
    var radio = section.querySelectorAll('input[type="radio"]'),
      checkbox = section.querySelectorAll('input[type="checkbox"]');
    if(radio.length > 0) {
      labelSelection[0].textContent = getInputListLabel(section, radio);
      return;
    } else if(checkbox.length > 0) {
      labelSelection[0].textContent = getInputListLabel(section, checkbox);
      return;
    }
  };

  function getSelectLabel(section, select) {
    if(select.multiple) {
      var label = '',
        counter = 0;
      for (var i = 0; i < select.options.length; i++) {
        if(select.options[i].selected) {
          label = label + '' + select.options[i].text;
          counter = counter + 1;
        } 
        if(counter > 1) label = section.getAttribute('data-multi-select-text').replace('{n}', counter);
      }
      return label;
    } else {
      return select.options[select.selectedIndex].text;
    }
  };

  function getNumberLabel(section, number) {
    var counter = 0;
    for(var i = 0; i < number.length; i++) {
      if(number[i].value != number[i].min) counter = counter + 1;
    }
    if(number.length > 1) { // multiple input number in this section
      if(counter > 0) {
        return section.getAttribute('data-multi-select-text').replace('{n}', counter);
      } else {
        return section.getAttribute('data-default-text');
      }

    } else {
      if(number[0].value == number[0].min) return section.getAttribute('data-default-text');
      else return section.getAttribute('data-number-format').replace('{n}', number[0].value);
    }
  };

  function getSliderLabel(section, slider) {
    var label = '',
      labelFormat = section.getAttribute('data-number-format');
    for(var i = 0; i < slider.length; i++) {
      if(i != 0 ) label = label+' - ';
      label = label + labelFormat.replace('{n}', slider[i].value);
    }
    return label;
  };

  function getInputListLabel(section, inputs) {
    var counter = 0;
      label = '';
    for(var i = 0; i < inputs.length; i++) {
      if(inputs[i].checked) {
        var labelElement = inputs[i].parentNode.getElementsByTagName('label');
        if(labelElement.length > 0) label = labelElement[0].textContent;
        counter = counter + 1;
      }
    }
    if(counter > 1) return section.getAttribute('data-multi-select-text').replace('{n}', counter);
    else if(counter == 0 ) return section.getAttribute('data-default-text');
    else return label;
  };

  function resetGallery(filter) {
    // emit change event + reset filtering 
    filter.form[0].dispatchEvent(new CustomEvent('change'));
    filter.resultsList.dispatchEvent(new CustomEvent('update-filter-results'));
  };

  function updateResultsCount(filter) {
    var resultItems = filter.resultsList.children,
      counter = 0;
    for(var i = 0; i < resultItems.length; i++) {
      if(isVisible(resultItems[i])) counter = counter + 1;
    }
    filter.resultsCount[0].textContent = counter;
  };

  function isVisible(element) {
        return (element.offsetWidth || element.offsetHeight || element.getClientRects().length);
    };

  //initialize the AdvFilter objects
    var advFilter = document.getElementsByClassName('js-adv-filter');
    if( advFilter.length > 0 ) {
        for( var i = 0; i < advFilter.length; i++) {
            (function(i){new AdvFilter(advFilter[i]);})(i);
        }
  }

  // Remove the code below if you want to use a custom filtering function (e.g., you need to fetch your results from a database)

  // The code below is used for filtering of page content (animation of DOM elements, no fetching results from database).  
  // It uses the Filter component (https://codyhouse.co/ds/components/app/filter) - you can modify the custom filtering functions based on your needs
  // Check the info page of the component for info on how to use it: https://codyhouse.co/ds/components/info/filter
  var gallery = document.getElementById('adv-filter-gallery');
  if(gallery) {
    new Filter({
      element: gallery, // this is your gallery element
      priceRange: function(items){ // this is the price custom function
        var filteredArray = [],
          minVal = document.getElementById('slider-min-value').value,
          maxVal = document.getElementById('slider-max-value').value;
        for(var i = 0; i < items.length; i++) {
          var price = parseInt(items[i].getAttribute('data-price'));
          filteredArray[i] = (price >= minVal) && (price <= maxVal);
        } 
        return filteredArray;
      },
      indexValue: function(items){ // this is the index custom function
        var filteredArray = [],
          value = document.getElementById('index-value').value;
        for(var i = 0; i < items.length; i++) {
          var index = parseInt(items[i].getAttribute('data-sort-index'));
          filteredArray[i] = index >= value;
        } 
        return filteredArray;
      }
    });
  }
}());

A Listing

Images

Tabs

I set up some tabs to host all of the main content for the listing. I think this will help separate everything and make it easier for the user to navigate.

Information

There is a lot of information that goes into the listing. So I used a template for a FAQ section and separated all the information within it.

Using .ENV to Hide Your Air Table Credentials In React

Chris Connelly — Thu, 03 Sep 2020 10:23:20 +0000

Create a dotenv file

First you'll want to create a .env file

AIRTABLE_API_KEY=xxxxxxxxxx
AIRTABLE_BASE_ID=appxxxxxx
AIRTABLE_TABLE_NAME=base-1

Install dotenv

Once you have this created you can use it by installing dotenv

npm -i dotenv

Set up dotenv in airtable.js

require('dotenv').config();
var Airtable = require('airtable');
var base = new Airtable({ apiKey: process.env.AIRTABLE_API_KEY }).base(
    process.env.AIRTABLE_BASE_ID
);
const table = base(process.env.AIRTABLE_TABLE_NAME);

module.exports = { table };

Testing My Static Sites Speed and SEO

Chris Connelly — Wed, 20 May 2020 14:36:22 +0000

I recently decided to check out some of my pages scores on Google LightHouse to see how great the site load times and SEO REALLY were on a SSG on Netlify. Here are my results

My main page

Build:

Platframe
PUG
Stylus
Babel
Roll Up

Hosting:

Github
Netlify

Performance: 98%

My Portfolio

Build:

Jekyll
HTML
SCSS
JS
Markdown

Hosting:

Github
Netlify

Performance: 100%
SEO: 100%

jamStack : the what now?

Chris Connelly — Fri, 24 Apr 2020 02:34:21 +0000

Im super excited about Jamstack. When it comes to serving pages, technology hasn't changed for a very long time. The traditional LAMP stack was old, sluggish and coasting.

What are you even talking about?

JAMstack is revolutionising the way we think about workflow by providing a simpler developer experience, better performance, lower cost and greater scalability.

JAM stands for JavaScript, API & Markup.

BENEFITS

Faster performance

Serve pre-built markup and assets over a CDN

More secure

No need to worry about server or database vulnerabilities

Less expensive

Hosting of static files are cheap or even free

Better developer experience

Front end developers can focus on the front end, without being tied to a monolithic architecture. This usually means quicker and more focused development

Scalability

If your product suddenly goes viral and has many active users, the CDN seamlessly compensates

Font Awesome Now Includes Social Distancing Icons

Chris Connelly — Wed, 22 Apr 2020 13:52:32 +0000

The newest version of font awesome has been released and with it comes some new social distancing icons including, a "bacteria", "hands-wash", "no-handshake" and my personal fave "head-side-mask"

Whats your opinion on this? has anyone request anything like this as of yet?

I built a simple rest API with node and a Raspberry Pi

Chris Connelly — Sun, 19 Apr 2020 21:14:04 +0000

This was a lot of fun for me and I will be updating this more as I go!

I installed ubuntu server on a raspberry pi 4.

From var/www/html

mkdir api && cd api

sudo npm init -y

sudo npm install express

touch index.js && sudo nano index.js

For now I am going to just make one GET response to test.

var express = require('express');        
var app = express();                 
var bodyParser = require('body-parser');
app.use(bodyParser.urlencoded({ extended: true }));
app.use(bodyParser.json());
var port = process.env.PORT || 8080;  
const router = express.Router();
router.get('/', function(req, res) {
    res.json({ message: 'API is Online!' });   
});

app.use('/api', router);
app.listen(port);
console.log('Listening on port ' + port);

control x to save and quit

from the root

node index.js

now from postman

`http://your-server-ip:3000/api`

You will see

API is online

Accessibility for the colour blind #3: Forms

Chris Connelly — Thu, 16 Apr 2020 01:53:40 +0000

Ok.... So this one is a big one for me. I have MAJOR issues seeing forms. Especially when people use white on... a little less white... With light grey text... WTF!??!?!?

Labeling

Using a placeholder without a label is problematic because placeholder text usually lacks sufficient contrast. Apple has this problem with their registration form:

Using labels works a lot better.

But even then the border is too light and I personally would have issues seeing that.

Adding a darker / thicker border or even some shadow helps even more.

Required Fields

The picture below is a perfect example. I cannot tell which one of these if any... or all of them are required...

Instead try:

Marking required fields with an asterisk.
Even better, marking required fields with “required.”
Where possible, remove optional fields altogether.

In the next article I'll be wrapping up this series with a few more examples and tooling!

Hello, World!

Chris Connelly — Wed, 15 Apr 2020 18:49:44 +0000

Hello DEV, this is my first post from the DEV Api