.home-h1 {
    font-size: 0;
    width: 1px;
    height: 1px;
    overflow: hidden;
    position: absolute !important;
    border: 0 !important;
    padding: 0 !important;
    margin: 0 !important;
    clip: rect(1px, 1px, 1px, 1px);
}

In 2020, we needed a sub-navigation system on jtcc.edu that matched up to the HTML that an outside company had built for us and it turned out to be a bit more complex than you might expect. We needed it to automatically show the direct children of any page a visitor visits. However, if the page does not have children, we needed it to show the siblings of the current page. If the page has grandchildren, we did not want those to show and if the page has a parent, we did not want that to show.

What Made it Complex:

What made it complicated is the CMS we used, ExpressionEngine(EE) does not do this out-of-the-box. We used the Structure add-on to build the navigation on the site. However, it does not provide this specific functionality.

Example:

The below code would be output by EE/Structure but only the links within the span with the class of .children will show on the front-end of the site. In case you’re curious, the siblings spans are before and after the children span because the order they display is based on the order you have them in your Structure navigation for the entire site.

<ul>
  <span class="siblings">
    <li class="sub_nav_item">
      <a class="sub_nav_link not-current" href="/about/locations-tours/"
        ><span class="sub_nav_link_label">Locations</span
        ><span class="sub_nav_link_icon">
          <svg class="icon icon_caret_right">
            <use href="/images/icons.svg#caret_right"></use>
          </svg>
        </span>
      </a>
    </li>
  </span>
  <span class="children">
    <li class="sub_nav_item">
      <a
        class="sub_nav_link"
        href="/about/offices-and-divisions/institutional-effectiveness/"
        ><span class="sub_nav_link_label"
          >Office of Institutional Effectiveness</span
        ><span class="sub_nav_link_icon">
          <svg class="icon icon_caret_right">
            <use href="/images/icons.svg#caret_right"></use>
          </svg>
        </span>
      </a>
    </li>
    <li class="sub_nav_item">
      <a
        class="sub_nav_link"
        href="/about/offices-and-divisions/dean-of-students/"
        ><span class="sub_nav_link_label">Dean of Students Office</span
        ><span class="sub_nav_link_icon">
          <svg class="icon icon_caret_right">
            <use href="/images/icons.svg#caret_right"></use>
          </svg>
        </span>
      </a>
    </li>
  </span>
  <span class="siblings">
    <li class="sub_nav_item">
      <a
        class="sub_nav_link not-current"
        href="/about/employment-opportunities/"
        ><span class="sub_nav_link_label">Employment Opportunities</span
        ><span class="sub_nav_link_icon">
          <svg class="icon icon_caret_right">
            <use href="/images/icons.svg#caret_right"></use>
          </svg>
        </span>
      </a>
    </li>
  </span>
</ul>

The Solution

After many attempts to do it with EE and Structure code, I finally decided to get the back-end code to output everything(the entire navigation from the root of the site to the current page and all of it’s children) and use front-end code to get it to only show what we wanted.

CSS for Hiding Spans After

I used CSS to hide all the sibling links for a page if a page has children(.children ~ .siblings), all of the children links for a page if it has grand-children(.grand-children ~ .children), and lastly, all of the grand-children if a page has great grand-children(.great-grand-children ~ .grand-children).

.children ~ .siblings,
.grand-children ~ .children,
.great-grand-children ~ .grand-children{
   display:none;
}

The limit of CSS is that you can only affect elements after the current element you are calling. This is where JavaScript came in.

JavaScript(jQuery) for Hiding Spans Before

With a little bit of jQuery(which the site was already using in other places, so don’t come @ me JS Police!) I was able to hide all siblings if a page has grand-children and all siblings if a page has children.

<script>
   $(document).ready(function(){
    $(".grand-children").prevAll(".siblings").css({"display": "none"});
    $(".children").prevAll(".siblings").css({"display": "none"});
   });
</script>

Conclusion

I hope you found this helpful. If so, please share it so other developers can keep it in mind when building out their websites and navigation systems!

Projects

• The ShoutIt project was a nice intro(or, re-intro for me) to PHP while loops, database connections and insertions, as well as some basic SQL statements.
• The Quizzer project went through creating an editable PHP quiz with better syntax for connecting to the database and grading a user’s answers as they go through the quiz.
• The PHP Lovers Blog project introduces object oriented programming(OOP) with a constructor class as well as functions to select, insert, update, and delete data from the database. It also shows how to set up a more complex folder/file structure for larger projects and link files together through includes and link databases together using primary keys and foreign keys and JOIN statements.
• The Newtek project helped me to build my very first WordPress(WP) plugin. It uses jQuery with Ajax/Asynchronous JavaScript to create a widget in WP that allows a user to submit their name, email address, and message to a contact that is designated in the control panel of WP.
• The Address Book project was challenging because he uses the Foundation framework by Zurb but it has changed since the course was recorded so I had to reconfigure the JavaScript to get the AJAX to work properly. I liked how he showed how to add a loading image that shows until the data is fully loaded from the database. Users can add, edit, and delete contacts in the address book. Binding values from POST variables was a key piece to this project that was new.
• The Job Finds Board project introduces students to Cake PHP. This was my first time using this PHP MVC Framework. It was also the first time I had seen or worked with the HTML Kickstart Framework.

Rating

Unfortunately, the Job Finds Board project is extremely frustrating to follow along with since the videos are now 3 years old and no longer compatible with the new versions of PHP and Cake PHP. The same issue happened with the Kewl CMS project.

Since those 2 projects were the main ones I purchased the course for, I’d rate it 1 out of 5 and would NOT recommend it for purchase.

Brad is a great instructor and puts out new courses all of the time, so just make sure the course is newer before you buy it. There’s no way he could redo every course he makes when code and frameworks get drastic updates so I do not blame him at all. However, I do think Udemy should provide a way for students to warn other students about outdated courses like this. At least it was only $9.99.

<link rel='stylesheet'  href='https://jeradsdesign.com/wp-main/wp-content/themes/jeradsdesign-wp/css/main.css?ver=5.8.2' type='text/css' media='all' />

Grab the theme version from your style.css file:

$theme = wp_get_theme();
define(‘THEME_VERSION’, $theme->Version);

Pass it as the 3rd parameter in your wp_enqueue_style() function in your functions.php:

wp_enqueue_style(‘main’, get_template_directory_uri() .’/css/main.css’, array(), THEME_VERSION);

If your style.css file has “Version: 1.0” in the top commment, it will now output this:

<link rel='stylesheet' href='https://jeradsdesign.com/wp-main/wp-content/themes/jeradsdesign-wp/css/main.css?ver=1.0' type='text/css' media='all' />

I’d say it comes down to specificity. “best apple pie recipe” has a high chance that great recipes display in the 1st results page & relate directly to what I’m looking for. However if I need to solve a specific error the results don’t always show me what I need on the 1st page.

— Jerad (@jeradsdesign) November 15, 2021

However, I felt like this answer needed some elaboration. Specificity is a huge part of it. However, sometimes you think you are being as specific as anyone ever could be and you still aren’t seeing the results you need in the results. Despite what most people seem to think, Google and other search engines ARE NOT PERFECT.

They use AI and all kinds of amazing code and technologies to make their results the best they can, but they still are not actual humans answering your questions. *Shockingly*, they have even been caught showing biased results for things like when someone asks a question like “how can I get a job?” versus “how would one go about attaining their career?” The second search was showing higher paid positions.

Other Search Engines

A trick I learned while researching for papers in college was: use more than one search engine. I know what you’re thinking… “wait, there’s something out there besides Google?” Yes, I’ll admit the rest are nowhere near the quality of what Google normally provides. However, the sheer fact that you can type in the exact same search and receive completely different results can be really helpful when you don’t want the same response all the other students in your class are going to turn in or if you are looking for an answer to your code issue that is a bit outside-the-box. Mostly because I like their stance on data-privacy, one of my main go-to search engines is DuckDuckGo.

Tips and Tricks

There are a ton of videos and posts that show special characters and ways you can remove specific things or show specific things in your results so I’ll let you search for those.

Hope you found this helpful!

Projects

The course teaches students how to build 5 drastically different projects. Each one building upon the skills gained from the previous.

• The Todo List Project taught me about local storage and how to add and remove DOM elements to and from it.
• The Beatmaker Project combined 2 of my favorite things: music and coding. I learned about interpolation, which is injecting variables into query selectors. He uses a class and constructor to better format the code. I’ve also never used the “this” keyword so many times in one JS file so that helped me to better understand it’s scope with closures.
• The Coloors Project introduced me to the chroma.js library which lets you do just about anything you can imagine with colors.
• The Website Project was a great introduction to GSAP for scrolling animations and Barba JS for page load animations. I also had never seen/heard of “mix-blend-mode” in CSS but that is an awesome way to add hover effects to text!
• Lastly, the Photon Project introduced me to working with the API from pexels.com and targeting and manipulating specific JSON data.

Pro Tip:

If you take the course, be sure to pay attention to the comments on the videos whenever you get stuck because most of the time, other people are having the same issue and there was quite a bit of help provided there from Ed and other students.

Rating:

I think it is a great course and Ed is easier to follow than most teachers that I have found. Overall, I would rate it a 4.9 out of 5 simply because there is always room for improvement. If you aren’t confident in your JS skills and want to brush up on them, or are starting to learn JS for the first time, I highly recommend this course!

How Usable is a Driveway?

The driveway at our house has a big problem. It’s only wide enough to fit one car! Sure, if you live there by yourself, that’s no problem, but for the rest of us, it can become a big annoying headache! Sure, two cars can fit if we park one in front of the other, but then you have to play the game of “who’s leaving first and/or rotating the cars?” Yes, it is usable in that a car is perfectly capable of parking on it but that is not enough. Our house was clearly built for more than one person to live there so this problem should have come up somewhere along the way of building and laying out the driveway. Instead, one of us has to always park on the side of the street.

The Point?

When you are building a website, just because something looks standard and usable, doesn’t necessarily that mean it is for the users of that particular website. It’s important to always think about how people are going to actually use your site/page/function and how much sense does it make in terms of the route they will take through your site.

Portfolios, For Example

I have now designed and built this website 4 times and everytime I build it I do a lot of inspiration research to see what other designers and developers are doing. The standard portolio has a section or page of examples that are shown in little boxes and then the user clicks into the specific entry they want to view. A problem that I have found on a lot of portfolio websites is that once you have clicked into a specific entry, the only way to get to the other entries in the portfolio is by going back to the main page and then clicking on a different entry.

First off, how do your users get back to the main portfolio page? I find that most people seem to instinctively use the back button in their browser. On the current version of my site, the other option is that the navigation and particularly, the “My Work” link is always visible. I like having multiple ways of doing things since not everyone will use your site the same way.

I also added pagination links between the different entries of my portfolio so that if you want to view the previous or next entry you don’t have to go back to the main page. Is this important? Absolutely! The quicker and easier things are to access on your site, the better. Despite how much we click or tap on things throughout our use of devices/the internet, we do not like clicking or tapping if we can just scroll to see what we want to view and we certainly don’t like going backwards in order to go forward.

How I Learned

The way that I learned to build WordPress websites was I googled around for website development training and found this specific WordPress tutorial by Chris Coyier at css-tricks.com of how to design a WordPress site. I had never heard of WordPress and there were a ton of other options out there as far as learning, but I knew that the best way for me to learn(Everyone learns differently, if you can read the docs/support page for a language and start coding in that language, do it!) is to have someone show me how to do things and for me, a video is even better since you can pause, rewind and even skip forward to review and pick up the exact information that you need. At the time, there weren’t many free videos about WordPress out there like there are today and his was the best, step-by-step training I had seen for free.

What if I Waste Time?

I guess our biggest fear when choosing something new to learn is “What if I learn this and then never use it?” or “What if it’s like flash and suddenly stops being used?” Well, that is always a risk, but in the 10 years that I’ve been writing code, flash is the only language that has died and even it is still lingering around here and there in some way or another. As far as never using a language or tool that you have learned, that’s why I pick stuff I like. If I spend a lot of time learning something and never use it again(I’m looking at you, Java!) I can honestly say it was fun while it lasted. The majority of time that we feel is wasted not on things that we did but on things we DIDN’T do. I spent 1.5 years learning Java in college but I don’t feel like that time was wasted because I have been able to utilize the logic, theory, and other things that I learned from it over and over with other languages and tools like when I learned PHP and Javascript.

Taking Advice

I figure while I’m handing some out, I should also warn you about taking advice. I was once told that PHP was basically a dead language and wasn’t worth learning. Of course, I found out later that the opposite was true.

Never let other people tell you how good or bad of a developer/programmer you are. I have had 2-3 interviews where the interviewers made me feel like I knew nothing. It wasn’t because one of us didn’t know what we were talking about. It was simply because my training did not match what I thought they were looking for. You shake hands and keep going to other interviews until you find one that is a match.

Focus

Finding this one tutorial and sitting at the computer, typing along as he did, is what got me started in WordPress as well as content management systems(CMS) in general. Picking WordPress and it becoming the most widely used CMS was purely coincidental, but picking this one system/language/tool and running with it is what made me the developer I am today. Focus is one thing that developers and programmers have in common. At some point, they decided what they wanted to learn and focused in on that one thing. In the long run, it doesn’t matter so much what you pick as long as you focus in on it and learn as much as you can about it and build as many things as you can with it. The web is an exciting industry and there is always something new coming out to learn. What keeps me from being overwhelmed? I pick the stuff I like and tools that I believe will be valuable to me.

Hope this was helpful! There are hundreds of great resources out there but guess what? You have to pick one!

Here’s the link to download the ai file!

This is my FIRST tutorial! It is a beginner-level tutorial about how to make an envelope icon in Photoshop. You can also watch it on: http://screenr.com/jAD where I actually recorded it. As I say in the video, feel free to leave a comment or suggestion for the next tutorial. Thanks for watching!

Here’s the link to download the psd file!