Author: Isaac Horton

A Futurist Guide to WordPress and CMS Evolution

At the point of writing this article, WordPress holds nearly 40% of the market share of businesses using a CMS to control their company website. None of the other competitors even come close but wordpress is like Burning Man, it was cool when it was still pure in intention, but later it became filled with scammers that broke the system. Is WordPress broken? What if you just want to build a WordPress website today. What should you do?

Im not just a basher, I have some credibility when it comes to WordPress and any web cms. In 1998, I started my first web design company, New Image Technologies and one of our products was a cms called Elements which was our own spin on how to put together a project management application. Back then we were working with a completely different tech. PHP was just being introduced and the web programs were dominated by Perl scripts which were freaking awesome and idiotic microsoft platform crap, I forgot the name but that shit sucked. IE was the defacto testing platform in 1999. How things have changed but still stayed the same.

I regularly council my clients on economic concepts and how the technology should not be a burden but a tool for them which fits their business size and need for tech to solve the problems that come up. Ive always thought a good rule is that it should feel like its helping you when you are analyzing new technology. If it becomes a burden, discard it and innovate something new.

Today is an amazing day, filled with goodness all around me. Outside is like roar from the fun Im missing out on. Why? Because my email is filled with messages from my server. “Failed WordPress Login Attempt by IP ……” over and over again in my email. But wait I already went through some major security steps to lock down this server on the administration level. I run each site through a security shutdown that limits everything imaginable. And still Im getting hack attempts over and over.

How much time does it cost? At what point does it become a failure of the technology? I can tell you that it is like anything that gets that much of the population involved. It becomes prone to the problems of groupthink and exploitation. WordPress lost its focus much like Apple. But so did the internet. When we started building sites, the internet was an information landscape, much like a really deep encyclopedia. Anything you wanted to know from that time was available at our fingertips. Later it became about commerce and that broke the information landscape putting content behind paywalls and regurgitating content akin to billlboard ads in Vegas to the new internet. Social media played a big part in breaking the soul of the internet.

I regularly have to check my expenses because sometimes theres something I think is going to be a benefit for me and later it turns out to be less than imagined. Since the goal of bringing any new expense into the business is to benefit the business, it makes sense that you have to regularly go through and trim any “fruitless trees”. In the days of subscription based every fucking thing, its even more important. (Fuck you adobe I already gave you 20 grand why do I still have to pay?) Back when I used to build wordpress and drupal sites circa 2000 there was only small problems with security and most sites were not vulnerable to being hacked which made them much more profitable.

Ive always loved open source applications but there is something like a virus that has taken hold of the internet. At what point does the burden created by these ridiculous over involved security burdens become too much that it outweighs the benefit of even having and maintaining a website.

Most people dont think this way, but I still hold true to the belief that the internet should be a benefit to all and not just another construct that benefits plutocracy. At this point Ive been shutting down many of my old sites that were part of old portfolio contents or other things that used to make sense and now are just security risks if they were wordpress sites. If they were static sites, no problem. Although all our old flash files dont work anymore. But still, think about it. All that time, 20 years and the technology that built the first internet, static sites is still functional and the most secure. What’s the least secure? a WordPress site!

Git & Github – Why Every Designer Should be Using It

You’ve probably heard of Github before or Git. Git is a version control system for any type of digital file and it works great with many types of digital designs like websites. Many designers assume that there is nothing relevant for them because it’s something specific to software development and coding but I think there is a great deal of fun to be had once you get your head around what Git can do for you as a designer.

As a designer working in the early phases of web design, I’ve worked directly with large programming teams and at some point most of the companies started using version control to keep track of the their programs. As designers, we had to interface with those programs minimally. The first one I noticed was SVN and it was really quite a brain-twister to get installed. At this time I never felt a huge need to use SVN outside of work, probably because the complexity outweighed the benefit.

Sometime around circa 2012, everyone seemed to be switching over to using git and Github to host their repositories. Github is a free repository hosting service that really is an amazing free resource designed specifically for the development community and the building of open source software since it is open-source by nature. This is why I fell in love with GitHub. Im a big fan of open source software. I like to work on it, help make it better, etc. I used to browse sourceforge for new scripts and resources every day. Github was a gamechanger back then. and installing it was much better than svn.

So why do you want to be using Git if you are a designer, why would you care about version control? The truth is there are a multitude of open source software projects that need help or can help you. There are projects looking for designers and there are amazing projects like svg generators and static website builders that you can access for free and they can separate you from the build everything yourself method giving you new tools to improve workflow expediency and keep your inspiration moving.

A great example of this is the NFT Art Generator by Hashlips. What it does is take a layered artwork made in photoshop or krita or similar and build out a unique image from all the layers uniquely matched with each other giving you the ability to build out 10,000 item NFT collections with only a few clicks.

git clone https://github.com/HashLips/hashlips_art_engine.gitCode language: PHP (php)

I recommend checking that one out, its really fun to let the computer do the building for you and it gives that feeling of satisfaction that makes the computer investment seem like its ACTUALLY improving your life by saving you time doing mundane repetitive tasks.

If you haven’t ever installed Git, you can do so by going here completing the instructions and downloading the appropriate installer for your system and running it.

Once you have Git installed, you will also want to go and set up a GitHub account and follow the instructions for setting up your own ssh keys which will allow you to authenticate without a password while working on your repo and pushing the changes to Github.

Once you’ve made any changes inside your repo like changing the configuration files or adding files you have to add that change to Git. Make sure you are working inside the repo, to add the files use the following command:

git add -A

This tells Git to add All the files that have made changes. Now we need to commit these changes to the repo. To do so use this command:

git commit -m "An informative comment about the changes made"Code language: JavaScript (javascript)

Git will give you a small message saying how many files were changed/deleted and from there we can easily push these committed changes to the main repo on Github. Use this command to push your changes to Github:

git push origin main

Wrap Up

With so many pieces of software made for designers, it makes sense to understand how Git works and how easily it can help you build something useful. Additionally the massive online community using git makes it a great landscape to learn something that makes you stand out from the crowd as a designer. Do you have any ideas on great ways for designers to use Git? Let me know, I’d love to hear from you!

How to use MINIML

MINIML is a Base Template Static Website Builder for GitHub Pages using UIKit and Jekyll. It is designed to work on GitHub Pages like other Jekyll sites. It’s an extensible theme Gem that can be customized easily and styled using the UIKit Framework by adding some easy to use markup. Now you can host a site for free on Github Pages and still have a ton of interactive capabilities from UIKit. To work with Miniml you should be familiar with Git and CLI administration. Using Jekyll and Miniml is a great way to get familiar with using CLI.

To start you must first download the project to your computer. Open Terminal on Mac or your preferred CLI and browse to the directory you want to develop inside. I use a directory called gitsites but it can be anything just so you remember it and can come back to it later.

cd gitsites

Got to the git repo here or use the following to download the repo to your local machine:

git clone https://github.com/st4rlab/miniml.gitCode language: PHP (php)

Now that you’ve got the files downloaded. Start editing the construct to suit your needs by going to the _config.yml file in the root directory and editing the pertinent details.

You can edit the navigation by going to the _data/navigation.yml and following that structure exactly to make up the navigation how you want. Additionally you can create create your own collections by following these instructions to create a portfolio or other custom content type.

Once you have your configuration details the way you like them run the following command in the CLI:

bundle install

This will build out the dependencies now you can run the following command to create a test dev site on your machine.

bundle exec jekyll serve

This will create a fully browsable static website and give you some feedback which you should become familiar with. As you work on your site, there are tools that can assist content management like Forestry.io.but you will want to first gain a good understanding of whatever it is you working on.

As you complete your project and are ready for deployment, just push it to Github like any other repo and set it to use Github Pages in the Settings for that particular Repository.

Particles Interactive Cellular Background

This is an easy and awesome to use pattern. It is the first code pattern to be introduced to sdg and its really frikkin cool. It’s so cool we’re using it on our homepage and still pulling an “A” speed rating… WTF?

Let’s get into into it.

It’s a combination of js/css with some very limited markup. This is great for keeping things isolated. We use this on our homepage and why would we want this to be included on every page? If we want to do this right, we separate things and make sure that our includes are only being called on the page that matters. In this case it’s the homepage of our site.

The original idea was posted here by Vincent Garreau who should receive any credit for the writing of the code. Here is his codepen:

What I did was to include an html section for the yootheme pro components and add the following code to that section:

<script type="text/javascript" src="https://cdn.jsdelivr.net/particles.js/2.0.0/particles.min.js"></script>
<style>
#particles-js {
  position: absolute;
  width: 100%;
  height: 800px;
  background-color: #fbf6ed;
  background-image: url("");
  background-repeat: no-repeat;
  background-size: cover;
  background-position: 50% 50%;
    z-index:0;
    top:0;
    left:0;

}
</style>
<div id="particles-js"></div>
<script>
particlesJS("particles-js", {
  "particles": {
    "number": {
      "value": 100,
      "density": {
        "enable": true,
        "value_area": 1000
      }
    },
    "color": {
      "value": "#111"
    },
    "shape": {
      "type": "circle",
      "stroke": {
        "width": 0,
        "color": "#ffffff"
      },
      "polygon": {
        "nb_sides": 5
      },
      "image": {
        "src": "img/github.svg",
        "width": 100,
        "height": 100
      }
    },
    "opacity": {
      "value": 0.5,
      "random": false,
      "anim": {
        "enable": false,
        "speed": 1,
        "opacity_min": 0.1,
        "sync": false
      }
    },
    "size": {
      "value": 3,
      "random": true,
      "anim": {
        "enable": false,
        "speed": 40,
        "size_min": 0.1,
        "sync": false
      }
    },
    "line_linked": {
      "enable": true,
      "distance": 150,
      "color": "#111",
      "opacity": 0.4,
      "width": 1
    },
    "move": {
      "enable": true,
      "speed": 2,
      "direction": "none",
      "random": false,
      "straight": false,
      "out_mode": "out",
      "bounce": false,
      "attract": {
        "enable": false,
        "rotateX": 600,
        "rotateY": 1200
      }
    }
  },
  "interactivity": {
    "detect_on": "canvas",
    "events": {
      "onhover": {
        "enable": true,
        "mode": "grab"
      },
      "onclick": {
        "enable": true,
        "mode": "push"
      },
      "resize": true
    },
    "modes": {
      "grab": {
        "distance": 140,
        "line_linked": {
          "opacity": 1
        }
      },
      "bubble": {
        "distance": 400,
        "size": 40,
        "duration": 2,
        "opacity": 8,
        "speed": 3
      },
      "repulse": {
        "distance": 200,
        "duration": 0.4
      },
      "push": {
        "particles_nb": 4
      },
      "remove": {
        "particles_nb": 2
      }
    }
  },
  "retina_detect": true
});

</script>Code language: HTML, XML (xml)

Now add a div with an id of ‘particles-js’ somewhere on the page. Once you have this in place on your site, (We use it for a background on the homepage) you can alter the html and css to suit your needs. Make sure to keep the script include for particles.js which does the heavy lifting in this although it should be called light cause it’s blazing fast, just like I like it.

In our case we had to add some extra build out in the css and markup to accommodate the new absolute positioning taking up the whole top section of the page. (Add some relative positioning)

Depending on your markup, mess around with z-index of elements to get your stacking order working correctly.

Wrap Up

So what we have here is an easy to use html snippet that can create some interesting effects like the one we used on our homepage this month. There’s really lot’s of ways you can implement this code and the variables can be played with to alter the effects. I like how it engages the user with interest about connections with the obvious connection to connecting with other users on our system or any system that simulates connections.

Follow Us

© Slo Design Group. All rights reserved. Design by IJH