Working From Home + Homeschooling During COVID-19

I’ve seen many resources for working from home if you don’t normally (not an issue for me), and plenty of resources for homeschooling your kid, but nothing about having both parents working full time while homeschooling your child(ren). The situation we are in for working from home now, is nothing close to what a normal work from home situation is, and keeping that in mind as you read this is important. We are all stressed to the max, and trying to be safe. Please be kind to each other, and remember that we’re all doing our best to get through this.

I’ve seen many resources for working from home if you don’t normally (not an issue for me), and plenty of resources for homeschooling your kid, but nothing about having both parents working full time while homeschooling your child(ren). The situation we are in for working from home now, is nothing close to what a normal work from home situation is, and keeping that in mind as you read this is important. We are all stressed to the max, and trying to be safe. Please be kind to each other, and remember that we’re all doing our best to get through this.

I realize there are going to be differences in situations, but I’m going to share this how we are doing it, and with some optional modifications for people who may not have quite the same skills or access we have.

Both myself and my spouse are professional developers. I currently work for an essential services company, and my spouse works for a company that supports essential services, so we are still working full-time from home. On top of this, we have our daughter half the time, who is now home from school when she is here. We have her 2-3 work days per week, depending on the week. A brief aside, I want to commend her school district and her teacher for their tireless commitment to providing distance learning activities, as well as Teachers Pay Teachers and education.com for the resources available on their sites.

As an elementary aged child, and particularly our child, she prefers to know her schedule, but also wants to exercise control over her schedule and her activities as much as she can. This can be absolutely infuriating sometimes, but I know that it is good for her to assert herself, and learn how to in a safe environment.

We, as parents and full time employees, require structure as well. As developers we need time to sink into code, and in my case, be in several meetings per day (despite the attempts to cut down on the number of meetings we have as an agile team), which means uninterrupted time. We sat down and came up with the following plan to allow my partner and I to trade availability to the kiddo, and still be able to do our jobs.

The Ground Rules
    1. We tell her when our meetings are, and which of us to go to during that time frame. If we both have a meeting (our standups overlap) we tell her who she can interrupt for that meeting – for which, we take turns being the interruptee.
    2. As reminders, we have sign cards that help her remember who and when. Green is “good for interrupting at any point”, Yellow/Orange is “I can be interrupted, but do you absolutely have to tell me this now?”, and Red is “Stop! Only in an emergency should you interrupt!”
    3. If a yellow/orange is out for whichever, whomever, and whatever, she should write it down so she doesn’t forget, especially if the other parent is also unavailable at that time. Which we try to avoid, but it has and will happen.
    4. We will all eat lunch together.
The Routine

She has a set routine in the mornings and evenings. On the mirror in her bathroom, there are checklists for her to go through. I erase the boxes each night and re-draw them for her to check off again. These are all the activities she knows she needs to do and can do on her own. She also enjoys checking off, and we don’t have to repeat ourselves 72658276304928475 times.

AM

    • Potty
    • Shower (I read Harry Potter to her while she’s in the shower — we’re on book 3!)
    • Take vitamins
    • Brush Teeth
    • Brush Hair
    • Breakfast
    • Check Seesaw (her class app that she talks to her teacher through) for assignments from her teacher
    • Write a journal entry

PM

    • Potty
    • Brush Teeth
    • Floss
    • Fluoride
    • Brush Hair

With these set lists, she knows how her day will start and end. The control over her day comes in the middle, and we call it Pick-a-Stick School. My partner and I discussed the activities that we should have her do to emphasize the learning that she was already doing at school, and I wrote them on jumbo craft sticks left over from our wedding. These are the ones that she didn’t get to today, below.

activities written on jumbo craft sticks

From the end of her morning routine (roughly when my standup starts — at least today, she slept in a bit) to the end of the work day, she picks a stick out of a vase, does the activity, picks another activity, does it, etc. Some of these are activities that her incredible school district sent home, some are activities we know she’d like, or that we already had to keep her fresh over summer break.  The colored ends mean that they are a category of an activity (physical activity is maroon, art is blue) and she can only pick 1-2 of those in a day. Some of these have time limits on them (sewing for example, because she still needs my supervision for that, and as you know, I still have a job to do), others are for her to do until she is done. One that is not shown here is to check in with her teacher on her app, if she hasn’t done so with one of her other activities already.

Everything she needs is in this corner, or very close by. In the picture below, you can see the vase with stick activities, the charts from her school, and a bowl with markers, pencils, colored pencils, a glue stick, and math/language arts packets I put together from Teachers Pay Teachers and Education.com.

Learning Station Photo shows vase and bowl of activities, charts of other activities

Today was the first full day of this process and it worked out rather well. This was her day today.

activities for today

Multiple times yesterday she said she was super excited to start her new routine, and many times today she looked at me and said, “I love stick school!” Which, if you’re a parent, you know is so rare, and absolutely phenomenal.

Notes
    • You don’t have to use craft sticks. Regular paper cut or folded up, a trello board (free) and digital randomizer (lots of them are free).
    • Duolingo is free.
    • If technology is a barrier, focusing on reading and writing is a great option. Those don’t require technology, and her teacher has been emphasizing this a lot in her communications with parents.
    • Outside time is NOT playing with her friends in our neighborhood. Currently she is working on roller blading without falling down, and learning to ride a bike without training wheels. She knows to stay 6′ away from everyone who doesn’t live with us.
    • Both of us parents have managers who understand the situation and realize that we have a bit of a different day to deal with than people who have stay at home partners, no partners, or no kids.

Even though we this set up yesterday and it worked pretty well today, we expect some bumps and bruises. She is not always going to wake up in a good mood. Some days she’s going to want to only veg on videos, or need some extra snuggles. We all cope differently, and do the best we can. I will probably post again if we have a major change to our plan, definitely am willing to answer questions, and have conversations about how we’re all handling this. It’s hard, but as the kiddo put in her window art this morning: Treat yourself, and don’t give up.

picture of window that has art that says treat yourself and do not give up

Laravel + WordPress Part 2: The Laravel Part

Now that we have WordPress all set up, and secured, we can move on to setting up the Laravel portion of the process. 

If you haven’t read Part 1, you can read it here.

Now that we have WordPress all set up and secured, we can move on to setting up the Laravel portion of the project.

Setting up the laravel part

Now that you have WordPress installed in your public > blog folder, we can set up the connections in your Laravel project.

Open config > database.php and add the snippet below with the details set to your database’s info.

'wordpress' => [
    'driver'    => 'mysql',
    'host'      => 'localhost',
    'database'  => 'your_db_name',
    'username'  => 'your_user',
    'password'  => 'your_password',
    'charset'   => 'utf8',
    'collation' => 'utf8_unicode_ci',
    'prefix'    => 'wp_',
    'strict'    => false,
    'engine'    => null,
],

Two things to call attention to in the snippet above. First, is the name of the connection. I called it ‘wordpress’, but you can all it whatever you like. Second, is the ‘prefix’ key. If you are using WordPress, all tables have the ‘wp_’ prefix on them, so putting this in here is VERY important, so that you don’t have to type ‘wp_’ a bazillion times if you are pulling info from your blog to other pages as I do both here and at Patternography.

Now that we have our database connection set up, there is an optional step to follow. If you are planning on pulling the entirety of post_content anywhere, we need to add the functions.php file to our composer.json, then run composer update in your project. This makes the wpautop() function available to our project.

If you are not going to be using the entirety of a blog post’s content anywhere, you can skip this step.

"autoload": {
    [...],
    "files": [
        "public/blog/wp-includes/formatting.php"
    ]
},

Now that we have all of this set up, we’re ready to roll. Make the controller and corresponding view files in your project if you haven’t already.

FullPostController.php

<?php

namespace App\Http\Controllers;

use Illuminate\Support\Facades\DB;

class FullPostController extends Controller
{

    public function index()
    {
        $post = DB::connection('wordpress')
            ->table('posts')
            ->join('users', 'posts.post_author', '=', 'users.ID')
            ->select(array('posts.post_title', 'posts.post_content',
               'users.display_name', 'posts.post_name'))
            ->where('post_status', '=', 'publish')
            ->orderby('post_date', 'desc')
            ->first();

        $post_content = wpautop($post->post_content);

        return view('home', compact('post', 'post_content'));
    }

}

In the code above, the aim is to collect data to display one blog post’s title, author, and content in a view. This is where the name of the database connection is important. If you don’t specify the connection by name in DB::connection, you will use your default DB credentials which will fail since your blog isn’t in your standard DB for the project.

The $post variable then stores the return of the eloquent query from your wordpress connection, then the $post_content variable applies WordPress’ formatting to the post_content returned in the $post object. You then send both variables to your view, which we explore below.

fullpattern.blade.php

<div id="home-post">
    @if($post && $post_content)

        <h2>
            <a href="/blog/{{ $post->post_name }}">
                {{ $post->post_title }}
            </a>
        </h2>

        <div id="author">by: {{ $post->display_name }}</div>
        <div>
            {!! $post_content !!}
        </div>

        <div id="go-to-post">
            <a href="/blog/{{ $post->post_name }}">
                <h5> >>> </h5>
            </a>
        </div>

    @endif
</div>

Check that the variable exists, and has content, then get the title, author display name, post content, and the url you’ll be using. In this example, there is no looping because I only get the singular most recent blog post from the database to be on the page, but looping is possible here (and will be shown later in the post). If you are going to use pretty urls, be sure to turn on that functionality in WP settings.

A Note on Pretty URLS

I’m using the pretty urls on Patternography, though I am not on NextJen Mobile. I need to revisit pretty urls at a later date, because they work fine in production on PTY, but not on NJM, and I currently don’t have the bandwidth to figure out why.

If you are testing this using homestead on your local machine, you will not be able to use pretty urls. You do not have access to what you need to in homestead to be able to make them work.

This next example will use the standard URLs and show how to use excerpts. If you are going to use excerpts, you need to turn on excerpts for posts, and then you’ll need to suppress the excerpt from showing on the actual blog, unless you want it there, but I chose to suppress it via CSS.

ExcerptController.php

<?php

namespace App\Http\Controllers;

use Illuminate\Support\Facades\DB;

class BlogController extends Controller
{
    public function summaryPosts()
    {
        $posts = DB::connection('wordpress')
            ->table('posts')
            ->select(array('posts.post_title', 'posts.post_excerpt',
               'posts.post_name', 'posts.ID'))
            ->where(array(['post_status', '=', 'publish'],['post_type', '=', 'post']))
            ->orderby('post_date', 'desc')
            ->take(4)
            ->get();

        return view('blog/summary-posts', compact('posts'));
    }
}

Much like the previous example, we need to get the information to display. You’ll see that instead of post_name we get ID to build the plain URLs to the post(s), and the post_excerpt. I use ->take(4) to get the newest four blog posts instead of every blog post I’ve ever written.  Because I can control the excerpt given, I don’t apply the wpautop() function to the excerpt. I know that I will only ever use the first paragraph, no matter how small it is, in my excerpt so I don’t need the formatting of an entire post.

excerpt.blade.php

<div>

    @if(isset($posts) && !empty($posts))

        @foreach($posts as $post)
            <div>
                <h4><a href="/blog/?p={{ $post->ID }}"><strong>{{ $post->post_title }</strong></a></h4>
                <p>{{ $post->post_excerpt }}... <a href="/blog/?p={{ $post->ID }}"> <em>read more ></em> </a></p>
            </div>
        @endforeach

    @endif

</div>

Like in the previous example, we check the $posts variable is there and not empty before proceeding. In this example we use a @foreach loop to create the view for the user, and show all four post excerpts. You’ll also notice that for the URL to the post, we do a little more work, and add the /?p= before dropping in the post ID. This is instead of using post_name that you use for pretty urls.

Now, I’m not sure why pretty URLs works in Patternography and not here on NextJen Mobile, but I’m guessing it has something to do with migrating between servers, and I missed something when I moved NJM to its current home. But you can bet I’ll write about it if I figure it out, I just don’t have the energy to take down my production site for the hours it would take to troubleshoot for something as small as this.

Suppressing excerpt on main blog pages

Because I use the first paragraph of each post as the excerpt, it would obviously be very repetitive to have the excerpt right under the title of the post and then immediately be the first thing you read again. If you are using your own theme, just add this to the styles.css you created with that theme. If you are not using your own theme, you can directly edit the CSS in your theme, but any changes you make will be wiped out after any updates. Making a child theme is a better long term solution, but you are welcome to do whatever suits you best.

.entry-summary {
    display: none;
}

one last note

You may have, at this point, realized I haven’t said anything about routing. You’re right, I didn’t. WordPress handles all of its own routing, and when you land on your /blog, you’ve left Laravel and landed in WordPress. Due to this, there is no need to add a /blog route to your laravel project. Even though I know this to be the case, it still wigs me out a bit to not have the route there.

I think that pretty much covers everything you need to incorporate WordPress into a Laravel project!

Happy Coding!

 

Laravel + WordPress Part 1: Setting Up WordPress

When I discovered Laravel a few years ago, I was mainly a front-end dev professionally and buried in the millions of frameworks that seem to multiply every day. Another day, another framework that claimed to fix all your problems. Needless to say I was rather tired of it all, so when I learned that there was a framework for PHP – I was not exactly thrilled. But, I downloaded it anyway to test it out, because I’m a glutton for punishment — why else would I be a developer?

When I discovered Laravel a few years ago, I was mainly a front-end dev professionally and buried in the millions of frameworks that seem to multiply every day. Another day, another framework that claimed to fix all your problems. Needless to say I was rather tired of it all, so when I learned that there was a framework for PHP – I was not exactly thrilled. But, I downloaded it anyway to test it out, because I’m a glutton for punishment — why else would I be a developer?

I ended up loving the framework. Sure, there are adjustments, and things I don’t want to do the laravel way because I’m stubborn, but I’ve adjusted. One of the things that I really appreciate is ease of multiple MySQL connections, which is a part of what I’m going to be talking about in this series of posts.

There is a frustrating lack of information if you don’t want to build your own blog tooling out on your site, and want to use WordPress for that functionality instead, like I do. Originally when I built the redesign for NJM in PHP/Laravel on 5.7, I used the built in WP API functionality with every intention of building out all of the front end nonsense for the blog part of the site. I never got back to actually finishing any part of that, and I learned new things before it even mattered, when working on Patternography, that would make it easier to do.

First, a warning: with this setup, you will not be able to use Envoyer for your deployments, or your blog will break for every publish.

Set up wordpress

Create a new Laravel project if you haven’t already, and create a blog directory in your public directory.

Visual showing the blog folder in the public directory of a Laravel project

Next, download WordPress and drop all the files into your blog directory. If you already have a database you want to use, update the wp-config. When you go to yoursite.com/blog, you will then go through the normal WP setup process. If you let the WP set up handle creating the database, be sure to save the credentials, you’re going to need them.

Login to your new WP back end and go to Plugins > Add New Plugin. Search for iThemes Security. It should be the first result and titled ‘iThemes Security (formerly Better WP Security)’. Install and activate.

Screenshot of iThemes Security listing in WP Plugin Search

A new link  (‘Security’) should appear with a notification in the top menu bar. Follow the prompts to get a free API key for your site. When that is complete, you should be dumped into the ‘Security’ menu item that appeared in your left menu. You’ll be in their settings menu at this point. Scroll down until you see ‘WordPress Tweaks’ and click on ‘Configure Settings’.

Visual of WordPress tweaks and the configure settings button

A new window will pop up. Scroll down until you see ‘REST API’. In the dropdown menu next to it, change ‘Default’ => ‘Restricted Access (recommended)’, then ‘Save Settings’.

Visual with arrows pointing to the dropdown box and save button mentioned

Now, no one without a specifically defined access can get to your API. There are tools out there that will allow you to do a very similar thing to what I outline here (like Corcel), but you would need to set up access to your API with other plugins not outlined here.

The next post will discuss the Laravel set up needed to include WordPress in other parts of your site, other than at /blog.

You can read part 2 here.

Thoughts on Mental Health, or, Can’t You Just Make Yourself Do It?

You may be wondering what this post could possibly have to do with technology. Everything, and nothing. Nothing to do with any technology we work with, but everything to do with the people who make it. When asked in a 2018 survey on mental health in technology by Open Sourcing Mental Illness (OSMI), 99% of the 191 respondents (out of 417) who answered the question, ‘Have you ever been diagnosed with a mental health disorder?’ said yes. In the 2017 survey, 324 of 756 respondents who answered the same question, 97% said yes. In the 2016 survey, all 1570 respondents answered the question, ‘Do you currently have a mental health disorder?’ 42% said yes, 36% said no, 22% said maybe. On the same 2016 survey with all respondents answering, ‘Have you been diagnosed with a mental health condition by a medical professional?’, 51% said yes, 49% said no.

You may be wondering what this post could possibly have to do with technology. Everything, and nothing. Nothing to do with any technology we work with, but everything to do with the people who make it. When asked in a 2018 survey on mental health in technology by Open Sourcing Mental Illness (OSMI), 99% of the 191 respondents (out of 417) who answered the question, ‘Have you ever been diagnosed with a mental health disorder?’ said yes. In the 2017 survey, 324 of 756 respondents who answered the same question, 97% said yes. In the 2016 survey, all 1570 respondents answered the question, ‘Do you currently have a mental health disorder?’ 42% said yes, 36% said no, 22% said maybe. On the same 2016 survey with all respondents answering, ‘Have you been diagnosed with a mental health condition by a medical professional?’, 51% said yes, 49% said no.

So, it has everything to do with Technology. If you’re interested in more data, please visit osmihelp.org/research.


On a recent Saturday morning, after two weeks of troubleshooting after LeaseWeb took a crap for 24 hours, and the subsequent move to another provider (LiquidWeb), I finally, FINALLY had my portfolio website up and running again. I still don’t know what went wrong in the move to LiquidWeb, but deleting the entire Laravel app off the server and re-publishing fixed the hanging server issue. I also (after much confusion) remembered to switch a debugging change on a route back to a “get” from a “view” so that the now error-loading website, would continue on its merry way.

I’m back to zero now, and can get back to work on Patternography again, which I’ve been slowly chipping away at when I have the time and energy. Great! Except, even with my laptop open, the code right in front of me, I can’t make myself work on it. Why?

I wish I had an answer to that question, but I don’t. I have been diagnosed with a condition called Cyclothymia, which, before I was diagnosed, I jokingly would say I feel like I have bipolar light, which, it turns out was closer to the truth than I expected to be. I also have been feeling pretty burned out at my job, but I don’t have enough vacation time to really get away and deal with the fallout. This, I think is part of the answer as to why I just can’t. make. myself. do. it.

There are many things that have been suggested to help make it bearable, or even better, but unless I can really unplug from my job for a month (spoiler alert, I can’t, I can’t afford that), I won’t really be able to fix the root issue. However, I have a few tips that have worked for me to help keep my Cyclothymia under control, even if the burn out is a continual problem.

Finding something that seems manageable.

I couldn’t make myself write code, so I started doing other, smaller, more manageable tasks. Namely, writing blog posts on things I’ve done that I probably should have written months ago (this is the third post I’ve written today). Writing felt like a doable task. It doesn’t always have to be something on the laptop, but a change of gears of some kind helps. Today it was writing, sometimes it’s sewing, sometimes it’s just letting it happen. When I let it happen, I usually end up napping for several hours (which I really wanted to do also on this particular day) or veg out and binge watch something.

Baby steps, but only tell yourself you’re going to do one.

Something my therapist taught me to do has been very helpful. When I’m feeling overwhelmed by something, a sewing project for example, I tell myself, I’m just going to print the pattern, I’m not going to put it together, I’m just going to print it. Then, I’m going to put it together, but I’m not going to cut it out, and so on and so forth. If I already have the pattern ready to go, the baby step to start might be, I’m not going to cut the fabric, but I’ll get it out and look at it. Then I’ll cut it out, but not sew anything. Through out this process, I also give myself permission to walk away at any time, which takes the pressure off, because I’m a completionist to the nth degree. Once I start it, I frequently feel a drive to complete it, no matter how late at night it is.

Anything worth doing is worth half-assing it

Now, this is a little strange, but I promise once you get it, it will change your life. There are things worth half-assing in your life. As a former G&T kid, I have a perfectionist streak that makes me not want to do something if I’m not going to amazing at it with relatively little work. This theory, however, points out that a little of something important is better than none of it. Don’t feel like slamming in a whole workout? Do 5 minutes, or 5 pushups. Dry shampoo is a miracle like no other when you’re not feeling like taking a shower, as are the cloth wipes to wash your face and hit the highlights with.

For crying out loud, GO TO SLEEP, get some exercise, and get some SUN!

You need that vitamin D. It’s winter in the northern hemisphere at the moment, so you may need to get a sun lamp to get that precious vitamin that helps you out on these cold, grey days. And, even just a few endorphins help from that 5 minutes of exercise you talked yourself into doing because you know 5 minutes is better than none.

I also can’t stress enough how much better I manage the swings that come with Cyclothymia than I do with a solid 8 hours of sleep, on a relatively consistent schedule. I try not to stay up extremely late (though these midnight deployments at work make that a lot more difficult), and I get up roughly the same time every morning, no matter what the snooze button on my alarm says.

Even though these have helped me, they may not all work for you, so my last piece of advice, is see a therapist and talk to your doctor. Therapy has absolutely done wonders for me, more than the consistent sleep schedule to be honest. As much as I wish I could just make myself do X, Y, or Z, it’s just not possible. We’re all trying to figure out this balancing act, and I hope I’ve helped, even a small amount with yours.

I’m off to get 5 minutes of cardio in before I hit the sack for 8 hours (which will sound super weird, because I scheduled this to publish in the middle of a Wednesday) and hope that tomorrow, my code will get written.

dog snuggling up to its human for a nap
sleeeeeeeeeep

Name For State: A Volunteer Site You Can Believe In

The title may be overstating my development abilities a little bit, but I did build a volunteer sign up site for a friend of a friend who was running for office in 2018. The candidate wanted to be able to have volunteers sign up to hand out literature at polling places in their district. I was asked to handle the front end, since the friend who asked is a former co-worker from when I did only front end work.

The title may be overstating my development abilities a little bit, but I did build a volunteer sign up site for a friend of a friend who was running for office in 2018. The candidate wanted to be able to have volunteers sign up to hand out literature at polling places in their district. I was asked to handle the front end, since the friend who asked is a former co-worker from when I did only front end work.

I had just upgraded an ng2 site at work to 6, so I thought, why not! I’ll use ng6, it can’t be THAT different starting from scratch at 6 vs 2. Well, it was different enough that in my time crunch, I didn’t have enough time to really re-familiarize myself with the framework to build in ng2. Someone I met at PHP Detroit in July 2018 had mentioned Vue.js in a then recent twitter conversation. I briefly checked that out as well. Though it may be quick to pick up, I didn’t have the time to do it and not completely screw it up, so I went back to what I’ve been working in the most — Laravel and Blade.

I have always been terrified of passwords, so this was the first time that I had actually implemented a log in of my own of any kind. And, it was… not that bad. PHP makes it a lot easier than I thought it would be, and really the data breaches that keep happening have more to do with server security (and terrible business practices) than with how I hash and salt the passwords before storing them. (But, like, if you’re new to coding, Rule #1: Don’t store passwords plain text. Don’t send them from your site to your server in plain text either.)

woman waving her hands to get someone off screen to stop doing something.
Trust me, just don’t.

I didn’t know about all the cool auth stuff that is built into Laravel yet (because I didn’t read, I was in such a rush), so I manually wrote the authentication for the users, and, surprise surprise, I didn’t die, and the world didn’t end.

Another thing I didn’t get to do (because I didn’t control the database on this project) was use Eloquent or write any migrations. Which sucks, because now I know that writing migrations is actually fun! (Unless it’s the initial set up of a database, then it’s a beast and a half.) However, since eloquent still allows you use raw SQL, I was easily able to work around that problem.

As stressful as it was to build this and almost not make it in time for any volunteers to have time to sign up, it was a super fun project, and I learned a ton doing it. I learned to:

  1. Not be afraid of passwords (be paranoid about server security instead).
  2. Do not let the size of the project and the short amount of time paralyze you, it only makes the stress worse!
  3. If it scares you, do it anyway (though this is a lesson I need to learn over and over and over again, apparently.)

I will (probably?) clean it up and offer it as a part of the volunteer work I will be doing with FlipBlue on the 2020 election cycle. I’ve definitely gotten more politically involved, and I plan to use the skills I’ve learned at work, to work in a way that is more satisfying to me. This was a nice dip into that pool.

Dog in floaty toy in pool.
Can it be summer now? This winter is killing me!

AddThis: A New Love Affair

I’m 1000000000000% certain I am very late to this party, because there was a long time between the first time I used AddThis, and the most recent time that I used AddThis. The new interface, the excellent customizing options, I’m in love.

I’m 1000000000000% certain I am very late to this party, because there was a long time between the first time I used AddThis, and the most recent time that I used AddThis. The new interface, the excellent customizing options, I’m in love.

My main complaint was that I didn’t like the floating buttons being the only option, if I’m recalling correctly. But I was so very pleasantly surprised when I had to implement AddThis at work recently. They have made some vast improvements to all options available, and the tool set is free now! Though, to be honest, I didn’t realize they weren’t before?

Being able to choose between floating and embedded is HUGE for me. I love how the buttons look, the ability to customize the colors for both types of tools, naming the different tools you use for easy tracking, the analytics.

At work, it was super easy to implement into our Magento 2 instance, which, if you’ve done any Magento 2 development, you know that is no easy feat. It seems (to me, anyway) that integrating anything in Magento is a giant pain. So, after that seamless experience with implementing at work, I decided to implement here too.

So I did.

After getting really frustrated trying to figure out why my site wasn’t working after moving servers, I took a break to update my social links in the footer to align left, and use the embedded AddThis, then added the share buttons to the individual blog posts that I pull in dynamically using the API. (Eventually I’ll get comments back on the bottom of the posts, but it’s not one of my highest priorities.)

It was so easy to use, 10/10 will use again. And again and again and again and again and again and again and again and again and again and again and again.

**I was not compensated in any way for this post.**

The Brand New NJM

Welcome to my latest labor of love, the NextJen Mobile Redesign!

Welcome to my latest labor of love, the NextJen Mobile Redesign!

I worked on this on and off for about 2 months, and really struggled through some weird issues. Even though I’ve made notes, I do not remember all of the issues, and my notes are rather cryptic. Oops…

This site was designed using Material Design (MD) principles and the Material Design Light (MDL) classes, though last I knew, Google is trying to move from MDL to integrated Material Design, only.

I re-built the site from its half built (Angular2) state, in Laravel + PHP. I’ve been wanting to really learn Laravel, and though I’ve taken a couple classes, I don’t ever feel like I’ve really learned a language or framework until I build something with it.

First thing I learned that I won’t do again, is use the material design classes of either the light or full version. I found the documentation lacking, implementing was confusing, and a lot of the functionality, you can get from using CSS grid or Flexbox with Bootstrap instead. I will probably still use the Material Design tools to be able to capture the ideas and principles behind MD without using the actual framework. High contrast colors, simple icon design, and the general accessibility to the end user is what drew me to it in the first place, but carrying those principles into your design doesn’t have to be through use of the confusing and frustrating MD framework.

I absolutely would recommend the Resizer tool though. It is a neat tool that allows you to see your (or whatever site you put in the url box) site at different breakpoints all at once, or individually. In the mobile portion, you have several different sizes you can choose from. I’ll definitely will be using this tool again.

Another design element that I use in this site (and am a big fan of) is the sticky footer. It stays nicely where it’s supposed to be and doesn’t get in the way of the content. I always struggle with them, though, and refer to this article frequently, if I don’t remember what I did the last time.

The next thing I learned is that I freaking love Laravel. It can be convoluted at times, and I definitely am not a tried and true expert (yet) but after re-designing and re-building this site over the summer, I built a volunteer sign up site for a friend of a friend who was running for office using Laravel. I learned even more building that, as it involved log ins, etc, but more on that in a future post.

This brings me to the next thing I learned, which is that it is possible to publish a Laravel site on a shared server. It’s not always the easiest thing to do, but you can do it. I might write more about it later, though I have the advantage of living with my server admin, so I definitely have more access than most on a shared server instance. This is a cPanel server, and I know that, like with PHP, people like to shit on it. But, I like it (and PHP) so if you want to give me grief about it, don’t @ me. I also see a lot of people asking about cPanel servers and Laravel, so I’m not alone.

Completely switching gears now, let’s talk about the software I used to build it. JetBrains continues to kill it with their toolbox, and I use PHPStorm daily in my development at work and at home. One thing you may have noticed this summer though, with the 2018.2 update is that you start to get weird Composer errors for ext-curl and other things you may use implicitly in your app. To solve this you just need to add “ext-curl”: “*” (or whatever it is that its throwing an error on) to your composer.json and re-run the composer commands. It will make the error go away, and no one could give me a satisfactory answer as to why. Someone may have found one and published it since I made this note I’m referring to in July 2018, but it works, and to be honest, that’s all that matters to me at this moment.

I have four more notes to cover from my Trello checklist for this post, but given that I waited almost 8 months to write this post, I don’t remember exactly what they are referring to, so I’ll list them here and hope that I remember what were referring to at some point. ¯\_(ツ)_/¯

  • Paging WordPress (I used the WP-API to pull in blog posts)
  • .htaccess breaks if missing on WP-API (I’m guessing this has something to do with the myriad of .htaccess issues I had once I published the site)
  • rewrite condition (This may be a reminder to make sure that you have your rewrite for your public folder in your Laravel app or nothing will work)
  • use config() instead of $_ENV when accessing .env variables (this, I believe, has to do with accessing the WP-API on LIVE vs local, but I’m not positive. I’ll come across it when I break everything again, though!)

This post got a little rambly, but I had a lot to cover, and trying to martial my brain to remember 8-10 months ago development is a lot harder than I expected it to be! I’m really happy with how the site turned out, and I will be (hopefully) more frequent with my blog posts. Especially as I catch up on what I’ve been doing the last few months outside of work, and continue to add features to this site!

✌🏻

Shiiiiiiiiit…. Or: I just told Chrome to Always Do Something that I don’t want it to

It was late in the day at work yesterday when I was trying to get some new code into some new repositories with our local git install of BitBucket + SourceTree.

It was late in the day at work yesterday when I was trying to get some new code into some new repositories with our local git install of BitBucket + SourceTree.

Because I was at work, I found it necessary to do some on the Mac side and some on the Windows side. Once I finished getting Windows all set in order, I started on the Mac side, and that’s where shit gets weird.

I was tired of having to consistently tell Chrome, “yes, flipping open the SourceTree app and clone the repo, GEEZ.” I finally told it to, “always do this.”

Then I clicked Do Nothing.

Shiiiiiiiiit….

I spent about a half hour googling last night before I decided to come back to it in the morning and finished up my other repo creations/cloning/etc, then went home for the day.

When I finally managed to get back to figuring this out, my Google Foo powered by caffeine and a semi-decent night’s sleep, I found this, the answer to my problems!

This doesn’t include steps on how to find this file, so I will outline end-to-end steps here, for Mac only. Note: You may have to have invisible files/folders visible for this.

  1. Kill Chrome completely (cmd+Q)
  2. Open Finder
  3. Go to your home directory
  4. Library > Application Support > Google > Chrome
  5. Open Local State file from the Chrome Folder in a text editor (I used Sublime Text)
  6. Find the Protocol Handler section
    -Find the magnet you’re looking for under excluded schemes (in this case: sourcetree)
  7. Change ‘true’ to ‘false’ and save
  8. Re-open Chrome
  9. Voíla! You can re-do the workflow the way you want.

I hope this saves someone some time.

Floodlight Tags: The Ugly

Back in February, I was a part of creating and publishing a super-rush-get-it-out-now website that I spoke a tiny bit about here. We have a less than desirable MVC implementation, but it’s up there, it works, we capture leads, I’m hoping it ends up in sales, but that’s not my area here.

We recently launched an AdWords campaign that involved the use of floodlight tags on aforementioned rush job. Based on the, erm, hacky, way we implemented the pages, doesn’t go to a separate thank you page. This tag has to fire on submission, track which “page” the tag came from, on a hacky site.

We just published this solution this morning, so it may ultimately still fail. However, here is how I solved this to fire appropriately.

The contact form loads the same every time, regardless of the content of the, let’s say, Hogwarts Houses page. The main Hogwarts page is the only page that doesn’t have a floodlight tag, so houses.hogwarts.magic was safe from this sorcery. The rest were not, so let’s dig in.

We have four houses, Hufflepuff (Yeah, I’m a badger. #hufflepuffpride), Ravenclaw, Gryffindor, and Slytherin. Those URLs are set up to be houses.hogwarts.magic/?[HOUSENAME]. These are the URLs that the respective AdWords campaigns send future Hogwartians to.

Now, because of the awful (we, the team, hate the page implementation in case that was not blindingly obvious yet) implementation we did, the initial answer to the first (and at the time, only) floodlight tag was to fire the tag from the head section, but only when the submit button was hit from houses.hogwarts.magic/?gryffindor. Messy, awful, gross, but it worked. Then I went home and took two showers.

Last week I was informed that I needed to implement the tag to fire correctly for the remainder of the Houses. There were swears. And then a puzzlement to make this fire correctly for all of them without having code all over the place. Remember that the correct place to put a floodlight tag is in the <head> of the page. Then know that I just had to implement that in the exact opposite manner.

Wrapped in a <script> tag and a document.ready() with some other fun (read: hacky) stuff at the bottom of the page part containing the contact form is this delight:

//Form submit woo!
$('.SubmitButton').click(function () {
      //what page are we on, based on the URL
      if (window.location.href.indexOf('griffyndor') !== -1) {
           //Start of DoubleClick Floodlight Tag: Please do not remove  
           var axel = Math.random() + ""; 
           var a = axel * 10000000000000; 
           
           //Make the iframe
           document.write('<iframe></iframe>'); 

           //Put the iframe in the head tag.
           $('#floodlight').contents().find("head").html('<iframe></iframe>');
           //End of DoubleClick Floodlight Tag: Please do not remove
      }
      //repeat process for remaining Houses
      else if (window.location.href.indexOf('hufflepuff') !== -1) {
           //Hufflepuff Floodlight
           var axel = Math.random() + "";
           var a = axel * 10000000000000;
           document.write('<iframe></iframe>');
           $('#floodlight').contents().find("head").html('<iframe></iframe>');
     }
     else if (window.location.href.indexOf('ravenclaw') !== -1) {
           //Ravenclaw Floodlight
           var axel = Math.random() + "";
           var a = axel * 10000000000000;
           document.write('<iframe></iframe>');
           $('#floodlight').contents().find("head").html('<iframe></iframe>');
     }
     else if (window.location.href.indexOf('slytherin') !== -1) {
           //Slytherin Floodlight
           var axel = Math.random() + "";
           var a = axel * 10000000000000;
           document.write('<iframe></iframe>');
           $('#floodlight').contents().find("head").html('<iframe></iframe>');
    }
});

Despite requiring a long run and two-to-three more showers, it works (so far). Using Google’s Tag Assistant, it records the tag firing upon submission of the form, and the external vendor who is handling the campaign for us is pleased with the results at this time.

Let’s hope that until we have the bandwidth to do this site right, it continues to function properly and give the numbers marketing is looking for.

Using S3 for Media Storage on WordPress

This post, really, is for me more than anyone else. There is usually enough time between the set up of my WordPress sites using S3 for media storage that I forget one step or another and spend way too much time trying to figure out what I missed.

Create a bucket with an appropriate policy Amazon has a bazillion. I roll with a customized version, but Amazon has good options. Be sure to enable the static website check box in the bucket settings.

aws bucket preferences

Once you have the bucket, create a user and add user access info to the config and create a user policy. Again, Amazon has templates to choose from, so make sure you’re picking appropriately.

If you haven’t already, install WordPress on your server. Their 5 minute install is great. Then you need to install the AWS and WP Offload S3 plugins. At this point, double check and make sure that the uploads folder was created. This bit me for the first time in my last install. What I think happened was that I was working behind a firewall, and that interrupted my connection to the off-site server, and prevented the auto-creation of this folder.

Add a CNAME record to the DNS for the new media site on your server.

A final step is to make sure that the WP Offload S3 plugin is configured correctly.

wp offload s3 settings

Yours may be different, but these are the settings I roll with.

Even if I am the only person who this helps, I will be very pleased to have this anyway.

Have a step I missed? Something weird you’ve run into with these plugins? Drop it in the comments!