Semantic UI: A Light Review

In my previous posts, I outlined how I found working with Bootstrap and Bulma as part of a greater series on my company’s search for a new front-end framework. I’m now to working with Semantic UI and, though I like it, I’m not sold.

Semantic UI Result
Semantic UI Result

The first problem I had with Semantic UI was that it wasn’t as good as I thought it was going to be. For seemingly months now, I’ve heard nothing but praise for their amazing system. It was nothing short of a let down. I don’t like the naming conventions much (though they are much easier to use than Bootstrap’s), I don’t like how ambiguous some of it is (like adding spacing, or changing font-sizes), and I generally think the styling isn’t that great.
BUT, Semantic UI does have a lot to offer, and I found that while working with it, the most difficult thing to get used to was the ecosystem as a whole, and not any specific parts. What I mean is I just need to get used to working with it. It’s not a “standard” framework. It’s much more than that. I think it’s a whole front-end design system, and it needs to be used as such.
I did not like the Semantic UI result of my Site Rebuild. But I think that’s ok – this site was designed with a different goal in mind. I’m not going to keep this up, I think Bootstrap and Bulma did a much better job with this project. I think the problem is that those two frameworks won’t be as scalable as Semantic.

The Final Tally

Item Materialize Rank Bootstrap Rank Bulma Rank Semantic Rank
Ease of Use 3/5 4/5 4/5 4/5
Filesize 305kb (2/5) 188kb (4/5) 218kb (3/5) 875kb (1/5)
Components 4/5 3.5/5 4.5/5 5/5
Extendability 5/5 3/5 4/5 5/5
Durability 2/5 4/5 4/5 5/5
Overall: 3.2/5 3.7/5 3.9/5 4/5

So, Semantic UI comes in at the top with 4/5. A few things that haven’t already been taken into account that I’d like to mention: Icons are really easy to use (Semantic comes with FontAwesome prepackaged), the Grid System is better than any other I’ve used (even if it takes some practice), it’s really easy to extend the CSS (I created a whole “helpers” SASS file and compiled alongside Semantic), and it works the same across all platforms. It’s TRULY responsive. The result for Semantic can be found here

Bulma: A Light Review

In my previous post, I outlined how I found working with Bootstrap as part of a greater series on my company’s search for a new front-end framework. I’m now to working with Bulma and I really do like it.


I really like how easy it is to get started, but there are some intricacies that I don’t like. One example is the fact that almost all elements & components have strict requirements for class names. When I create a framework, syntax is really dry. A card’s HTML, for example, would look like this:


<div class='card'>
  <header>Card Header</header>
  <div class='content'>
    ...
  </div>
  <footer>
    <a href='https://example.com' target='_blank'>Link</a>
  </footer>
</div>

With Bulma, the header and footer both need classes of “.card-header” and “.card-footer”, respectively. Which, to me, goes against the ethos of DRY code.

Aside from doubling up on class names, the HTML is pretty lean, especially when compared to Bootstrap. I’m way into the grid system and the automatically sized columns. Here’s how it stacks up against Bootstrap and Materialize:

Item Materialize Rank Bootstrap Rank Bulma Rank
Ease of Use 3/5 4/5 4/5
Filesize 305kb (2/5) 188kb (4/5) 218kb (3/5)
Components 4/5 3.5/5 4.5/5
Extendability 5/5 3/5 4/5
Durability 2/5 4/5 4/5
Overall: 3.2/5 3.7/5 3.9/5

The better rating and overall look aside, there is one major issue I’m having: icons. Including the correct JS and CSS files, using the right tags, and checking for issues, I’m still not able to get some icons to load – mostly the social icons. Not sure what’s up with that, but my Googling has been fruitless thus far. EDIT: I figured it out. A different version of FontAwesome is used, meaning that some of the icon names changed. Hrm :/.
Another edit: I wanted to make a note about interactivity. Bulma is pretty light and unobstrusive. One thing I don’t like is the lack of default JavaScript features, like state-toggling and such. Building out my own system for modal triggers seems…dirty. Not that bad, but, just, dirty.


Overall, Bulma gets 3.9 out of 5 stars, or bananas, or thumbs ups, or whatever rating system pleases you. Better than I expected it to. We’ll see how it chalks up to Semantic UI in my next post. The result for Bulma can be found at this link.

Bootstrap: A Light Review

In my previous post, I outlined what Gittr is looking for in a framework and how I’m going to go about finding it. This post is the first of 3 reviews.

Site Refresh: Bootstrap Result
Site Refresh: Bootstrap Result. This is what I’ll be trying to recreate with Bulma and Semantic UI

Overall

Overall, Bootstrap has met my minimum expectations. I was able to build a good looking, responsive, adaptive, accessible, fast site. But it wasn’t fun. I don’t like their naming conventions much – they’re a little confusing. An example is in the utilities classes. Things like padding and margin have really long class names. A class of pt-sm-3 pt-md-4 pt-lg-5 could probably be taken care of easier with a single CSS Declaration, like .el {padding-top: 1.3rem;}. I’m not a fan of that at all, but it could probably be mitigated with SASS.
One thing I do like about Bootstrap are the colors. It’s pretty easy to get a custom pallett going and really easy to use the default colors in both SASS and in HTML.
Of all the components that Bootstrap does have, it was really disappointing to find they don’t have a toast-like function. Toasts are a part of Materialize and a pattern that I really like, so I’d like that to carry in to our next version. There is a plug-in for toasts, but I really do think it should be part of Bootstrap.
Ranking it against Materialize, here’s a table!

Item Materialize Rank Bootstrap Rank
Ease of Use 3/5 4/5
Filesize 305kb (2/5) 188kb (4/5)
Components 4/5 3.5/5
Extendability 5/5 3/5
Durability 2/5 4/5
Overall: 3.2/5 3.7/5

Overall, Bootstrap gets 3.7 out of 5 stars, or bananas, or thumbs ups, or whatever rating system pleases you. Better than I expected it to. We’ll see how it chalks up to Bulma in my next post. The result for Bootstrap can be found at this link.

Comparing Frameworks

Since I founded Gittr with my business partner, Brennan, we’ve used the MaterializeCSS front-end framework. It’s got all of the standard components a modern framework should have: a decent grid, modals, tooltips, navigation options, dropdowns, buttons, and more. It also offers SASS and JS source files so it’s modular, expandable, and you don’t have to load anything you don’t need. I really like all these things. I also really like how it looks and how easy it is to use. It’s pretty forgiving and building custom components using both pre-existing components and customized SASS/JS is a breeze.

With all that said, it does have its fallbacks. An issue that we constantly came across was tables in modals. While that’s not a huge worry (honestly probably not a good design choice, either), small annoyances like this were popping up all over the place and more frequently as time went on. When we launched in January, a big issue reported by some of our clients was double-loading navigation. Basically, when switching a phone or tablet from landscape to portrait (or vice-versa), the navigation would “double up” on itself, causing the visual element to be over a tap-target and making the navigation useless until the page gets refreshed.

Aside from the issues we had, we looked at MaterializeCSS 1.0 Alpha. Though some things to seem to be improved, I’m sad to say that the framework doesn’t seem to be much more useful. We used it to build our Documentation and I have to say I was not happy with it. A lot of the features they include don’t work out of the box (Timepicker, Datepicker, and Scrollspy, to name a few) and it seems like the quality has overall gone down.

Enough about all that though – here’s the point of this post: we’re looking for a new framework. We’ve selected three to try out: Bootstrap, Bulma.io, and Semantic UI. We’re going to score these frameworks against each other based on a few benchmarks:

  • Ease of Use
  • Filesize
  • Components
  • Accessibility
  • Extendability
  • Durability

We don’t have a “scientific” way of breaking down these qualifiers – pretty much we’re going to see what works best.

I’m going to be using all three to rebuild my portfolio iteravely. I’ll have three versions and keep up the version I liked building most. I’ll also be writing a review for each version. So this post is the first in a 4 or 5 part series, I guess.


Short overviews

We did go through a short selection process before deciding what frameworks to try out. We looked at the framework’s documentation and tried to look for a few key elements: a good grid system, logical HTML, class names, and a standard set of components. Here’s my thoughts on the three frameworks selected for further review.

Bootstrap
Bootstrap Homepage
Bootstrap Homepage

I think Bootstrap is an obvious candidate. They set a lot of standards in the industry and are a role model for other frameworks. Their grid system is really reliable, but not all that modern. We were really looking for something that utilizes the new CSS Grid system. The HTML is a little bloated and doesn’t seem all that semantic, but their focus on accessibility is definitely a plus. The thing I can’t get over is the class naming. Peruse the following from their documentation:

The classes are named using the format {property}{sides}-{size} for xs and {property}{sides}-{breakpoint}-{size} for sm, md, lg, and xl.

So an element could have a class of pt-md-3 pt-lg-4 pt-xl-5, rather than just a single CSS declaration based on relative units, say padding-top: 1.25rem;. That seems messy.
Bootstrap does offer a great set of default components, though, and is very extendable, which is a huge plus because we do use a few custom components.

Read my Bootstrap Review here


Bulma

Bulma Homepage
Bulma Homepage

Bulma was Brennan’s suggestion. On the surface, I think it looks much better than Bootstrap. Their grid system is based on Flexbox, which I utilize regularly, so I’m very comfortable with it. The features of their grid are all very standard – multiple ways to set width, offsets, and utilize breakpoints. Vertical centering is a breeze (big plus). I like how easy it is to understand their naming conventions, too. Their components are a standard set, but they also have media objects, tiles, and panels (I really like panels). It’s also SUPER lightweight with no JavaScript required. Dang!

Read my Bulma Review here


Semantic UI

Semantic UI Homepage
Semantic UI Homepage

Semantic UI sounds really interesting on the surface. I first hear of it about a year ago from some podcast as the only real “modern” framework. I think the visual design looks okay. Their grid system is also flexbox based, but the naming conventions seem…clunky. The HTML is rather slim, though. They definitely check all the boxes with the components and then some. Just browsing through the docs, I’m really really excited to use it.

Read my Semantic UI review here

CSS-Cropping: How To Preserve Aspect Ratio

I do a lot of “profile” type sites – a basic profile image with descriptions and maybe some social media links. One thing that I’ve always struggled with was the ‘circular’ profile image. I circumvented this for a while by hard-cropping in photoshop or requesting square images, then slapping the border-radius on it and calling it a day.
But now, I’m trying to build a site that has dynamically sized images, which presents a problem: setting a hard width and height screws with the aspect ratio of the image. After some thought and Googling, I was able to come up with this solution:

<img class='circle' src='image.png' />
img.circle {
  -o-object-fit: cover;
  object-fit: cover;
  height: 150px;
  width: 150px;
  border-radius: 50%;
}

Which presents this:

See the Pen Object-fit by Nate Northway (@the_Northway) on CodePen.

I definitely feel like this is the most elegant and straight-forward solution to this problem. I’m excited to put this into regular use.

Regex Cheatsheet

I’ve been writing some regex lately and compiled this handy little cheat sheet.

Start the expression: /^

Space: [\s] or \s

Parentheses: [(] and [)]

Optional flag: put a ‘?’ after the phrase
Hyphen (first or last character): - or [-]

Hyphen (not first or last character): \-

If you want options in a slot, put brackets around the options: [-.\s] = hyphen, period, or space required.

If you want options to be optional, add a question mark: [-.\s]? = optional slot, but a hyphen, period, or space required
Number: \d

Quantifier: {3} (exactly 3)

1 or more: +

n or more: {2,} (2 or more)

0 or 1: ?

0 or 1 digit: \d?

1 or more digits: \d+

String: ^

String of length n: ^{n} (where 'n' is a number)

Quantified Number: \d{3} (exactly 3 numbers)

Literal: \ ([\@] would be a required 'at' sign)

1 digit number, in a range: [n-n] ([0-9] is a required single digit number ranging from 0-9)

(\+|1\s)? accepts a plus sign or (the pipe character is “or”) a 1 followed by a space and makes it optional.

End the expression: $/

Common Regex Phrases:

US Phone Number (123)456-7890: /^[(][2-9]\d{2}[)][2-9]\d{2}[-]\d{4}$/

(I’ll add more here as time progresses)

Hope this helps, I’ll be using it for sure.

Function Declaration in jQuery

There are a bunch of different ways to write functions is jQuery. I’m gonna cover a few here.

The Simple Function

This is the simplest way to declare a function (method) in JavaScript and jQuery. This is a great way to test and is good for a throwaway method, but it isn’t good practice to code like this because it doesn’t encourage code recycling.

function sayHello(name) {
    alert("Hello, " + name);
}

Get/Set

This is a great way to get/set/delete model values. It’s very common and is not too far off from the simple method declaration.

//declaring
var sayHello = function(name) {
    return "Hello, " + name;
}
//using
console.log(sayHello("Jon")); // "Hello, Jon"

Create Your Own

Extending the jQuery object is a great way to abstract pieces of code that will be reused. It encourages developers to use method chaining, so this keeps your code clean, too!

jQuery.fn.extend({
  backwards: function() {
    var text = $(this).text();
    var backwardsText = '';
    var bits = text.split('');
    var x = text.length - 1;
    while (x >= 0) {
      backwardsText += bits[x];
      --x;
    }
    return backwardsText;
  }
})
$(document).ready(function() {
  console.log($("#testText").backwards());
  //given $("#testText") looks like <p id='testText'>racecar tacocat</p>
  //the result is => tacocat racecar
})

Here’s a CodePen that uses the above method (plus another one) to determine if an element’s text forms a palindrome:

See the Pen Extending the jQuery Object by Nate Northway (@the_Northway) on CodePen.

CodeIgniter Class Level Variables

Class Level Variables in CodeIgniter was a big stepping stone to moving Gittr towards a better flow.

As the CTO of Gittr, I’m always looking for ways to improve the way we write our software, from utilizing different features and techniques to simplifying or compacting our logic. We’ve got a pretty good flow going, but there was one thing I saw that was tripping me up: constantly defining and redefining variables.

The big thing we’re working on right now is the ‘administrator’ section of our app, which allows privileged users access to methods to change settings, view stats, add, remove, and edit partnered merchants and generally manage the application. We’ve gone through a few different generic methods of rendering views, which always looks a little something like this:

<?php 
public function view($page) {
    //if the admin is logged in
    if ($this->UserModel->adminLoggedIn()) {
        //assemble the $data
        $data['user'] = $this->UserModel->getUserData();
        $data['company'] = $this->CompanyModel->getCompanyData();
        //load the view
        $this->load->view('admin/'.$page.'.php', $data);
    } else {
        //if the user isn't logged in, redirect to the login page
        redirect('admin/login.php');
    }
}
?>

We pass the $data['user'] and $data['company'] to each view to display the appropriate data and link to the right things. Things like the Company’s and User’s IDs are very important to keeping track of who did what, especially when dealing with multiple users. So these pieces of information are very important.

With these (and other variables) constantly being defined in every method, I wanted a way to not only make sure we’re keeping it consistent, but also cut down on file size. After removing every instance of the call to getUserData() and getCompanyData(), I counted just over 100 lines of code, or about 5,000 characters, saved altogether. The solution I found was variables defined on the class level.

The idea is this: each time the controller is constructed, the three variables ($user, $company, $loggedIn) are set. Then, they can be accessed within the methods to pass the data to the views. Here’s what that looks like:

<?php 
class Demo extends CI_Controller {
    //declare the variables
    protected $someVar;
    protected $otherVar;

    public function __construct() {
        parent::__construct();
        /* Load in libraries, helpers, models, etc */
        //set the variables 
        $this->someVar = $this->SomeModel->someFunction();
        $this->otherVar = $this->OtherModel->otherFunction();
    }

    public function index() {
        //use the variables
        $data['var'] = $this->someVar;
        $data['other'] = $this->otherVar;
        $this->load->view('view.php', $data);
    } 
}
?>

I think this accomplishes two things: it keeps your code DRY (Don’t Repeat Yourself) and it cuts down on the possibility of breaking things when you change how you call a function (ex. changing the parameters passed and accepted). I think this is a pretty basic use of utilizing class-level variables in the controller and I’m really excited to find other ways to implement this idea. If you have other ideas on using this, leave a comment!

CSS Counting: What, How, and When

Number

I recently read This awesome article on CSS-Tricks about a bunch of interesting CSS properties. While some of the properties were already well known to me, there were a few that stood out and. The one that stood out the most, though, was CSS Counting.

What CSS Counting Is

CSS Counting relies on a (sort-of) variable which, of course, is maintained by CSS. The counter can be manipulated by CSS rules to track their usage. The whole list of properties and values are listed below:

body {
    /* 
    counter-reset sets the value and names the counter 
    */
    counter-reset: el; 
}
.el {
    /* 
    counter-increment adds to the value with every 
    next instance of an element with the 'el' class
    */
    counter-increment: el;

    /* 
    counter() prints the value 
    */
    &:before {
        content: "Count: " counter(el);
    }
}

How To Use It

Well, the code above kind of goes into how to use it, but it doesn’t explain the logic. Basically, counters should be reset on a basic level. So if you have a counter for headings in an article, and your article is a single page, it would make sense to reset the counter on the <body> tag.
But if your articles come in a stream, say on an ‘endless scroll’ website, it would make sense to reset the counter on every <section> or <article> tag (or <div> tag, depending on how you built your site).
You can also have multiple counters, so using it to list article numbers with another counter for subheadings is possible. Or subsubheadings. Or subsubsubheadings. Or….
Here’s a demo!

See the Pen CSS Counting by Nate Northway (@the_Northway) on CodePen.

When to Use Counters

A few years ago, I built a site for a neighborhood association. I could have used this technique to label the bylaws efficiently.
Other areas where this could be used can be in list-type articles, or anywhere that uses labels to reference sections.

Drawbacks

The problem with this method is that the :before CSS pseudo-element is not selectable, meaning that if somebody needed to copy/paste the bylaws in the previously mentioned neighborhood association site, the section/subsection count wouldn’t have been copied over.
One way to circumvent this issue is by building the counter functionality in JavaScript. But that would totally invalidate the use of the CSS counter. Unfortunately, there is no way to access the CSS counter in JavaScript (even when using a library). Hopefully, a method can be developed to make the counter accessible to JS.

Although CSS Counters are cool (and could arguably be useful), they aren’t accessible because to show them requires the use of a pseudo-element. They aren’t selectable, won’t be seen by a screen-reader, and won’t show up in ‘reader’ views (like on Safari). Because of the lack of accessibility, I’d suggest against using this method (for now). As an alternative, consider using a JavaScript alternative.

Net Neutrality: What it Is, Why it Matters, and How it Concerns You

Ajit Pai being sworn in as FCC Commissioner. He will be a major player in the decisions on Net Neutrality.

Net Neutrality has been a hotly debated topic for a few years now. But after the 2015 ruling upholding the FCC’s classification of the internet as a utility (thus applying Common Carrier laws to the ISPs), it hasn’t been discussed as much. With the US’s recent election, however, the freedom of the internet is in question again.

What Is Net Neutrality?

Wikipedia has a really good article that on Net Neutrality. To summarize, it’s the principle that ISPs (Internet Service Providers – ATT, Time Warner, Comcast, etc) and governments regulating the internet should treat all data the same, without discrimination (throttling or price changing) against type, source, or destination of data. Additionally, practicing Net Neutrality ensures that discrimination doesn’t occur based on the type of hardware attached to access the network or the mode of communication.

The principles of Net Neutrality cover quite a few bases: it ensures that dissenting ideas are not silenced, ensuring a freedom of speech. It also ensures that users can use common hardware to access networks, which makes it accessible to all classes. Additionally, the principle ensures that those using different modes of communication are able to access the network, too, further ensuring the Net’s accessibility.

Accessibility and the free flow of information are ingrained in the DNA of the internet. Since the internet’s inception, data exchange has been at it’s heart. Since then, partly thanks to Net Neutrality, accessibility has become a cornerstone of the internet. Governments have requirements outlining the ways in which their websites need to be accessible so that users with disabilities can access them. Most websites are built with accessibility features, like the WAI-ARIA initiative headed by the W3C.
In fact, accessibility is a part of most technology. Hardware and software implementations of accessibility features have been present in most technology for a long time, and has been reported on since at least 1980. With accessibility being such a pillar of technological design, it’s logical to ensure accessibility for a part of technology that is (probably the most) public part of modern and future technology.

The Role Of Data

Though hardware plays an important role in making the internet neutral, it’s meaningless without data. The other facet of Net Neutrality is non-discrimination of data. Since ISPs have the ability (and arguably the responsibility) to monitor data, it’s origins, destinations, and type, it is their duty under the principle of Net Neutrality to ensure the equal handling of data.

If that’s a little difficult to understand, let’s use an example: without net neutrality laws, ISPs like Comcast could charge consumers extra for data that comes from sources that criticize them, their supporters, the political or social leaders they support. Additionally, they could throttle, corrupt, and/or edit the data that is sent to the end user to ensure that their agenda and goals are met.

Why it Matters

Net Neutrality matters because it ensures the equal distribution of data and access thereof. Without net neutrality, it’s possible that the public could live in a sort of corporate dystopia – one in which the ISPs are the lawmakers. With lobbying being such a huge part of politics in the United States, lack of net neutrality could lead to a lot of problems. Not only could giants such as Comcast and ATT use lobbyists to get politicians to make laws in their favor, they could also control the information being distributed to the public, so it’s possible that they could be making deals in their favor and nobody would know about it.

How it Concerns You

Recently, there has been a lot of talk of a phenomenon known as “fake news“. Fake news exists to encourage complacency in a population which does a good job of just skimming the surface – meaning that facts and research aren’t looked into often. Often, fake news confirms beliefs that certain parts of the populous already have, without any evidence to support those beliefs. This is confirmation bias and has lead to numerous misunderstandings, misconceptions, and a disregard for facts on a number of social issues.

Even with net neutrality in place, fake news is a huge part of social media and has had an effect on politics in America. Without net neutrality, verifiability of sources would be next to impossible, meaning that the spread of fake news would be rampant. It’s truly Orwellian.

So, to the end user, a lack of net neutrality means the loss of journalistic integrity and a return to old ways of obtaining news and verifying it: newspapers and trips to the libraries, finding sources still under common carrier laws (like television and radio), and putting a heavy dose of skepticism on everything.

What You Can do to Ensure the Net Stays Neutral

The best things to do include figuring out who your representative is and writing, calling, and emailing them in support of net neutrality. Sharing articles about net neutrality on social media to tell your friends about it is important, too (and encouraging them to contact their representatives is good practice). You can also donate to the Freepress, which is dedicated to fighting anti-Net Neutrality.

If you don’t donate or write your representatives, at least tell your friends about net neutrality and it’s importance to freedom in the United States and the world. Here are some good articles on Net Neutrality:

Again, if you don’t donate to Free Press or contact your representatives, at least tell your friend about Net Neutrality and it’s importance to freedom. Start by sharing the articles above and discussing the topics with your friends.