bishless.com

Daniel Bishop mumbles in hypertext

Tag: webdev (page 1 of 2)

Fix for ‘error establishing a database connection’ after homebrew update

I build WordPress websites in a local development environment powered by Laravel Valet. I’ve been using this setup for a couple years now. It’s fast, light weight, and it’s been awesome – until it isn’t. 😉

This has happened to me twice in the last 6 months.

I run an alias for a few homebrew update commands…

brew update; brew upgrade; brew cleanup; brew doctor;

At the end of the summary of what’s been updated, sometimes a little advisory pops up and advises me to run brew prune to remove unneeded files.

brew prune

All of the sudden, my local development sites start failing to find their associated local database.

The first time it happened, I couldn’t find a good solution and ended up losing some data and starting over–completely rebuilding my development environment.

When it happened again yesterday…

I hunted for a solution for a little longer. I did not want go through that again.

Turns out there’s a really simple fix.

Apparently, when brew prune gets run, a temp directory gets removed. I figured I’d write this down to save myself a headache next time this happens.

Recreating that directory and restarting MariaDB or MySQL will restore access to your local databases.

mkdir /usr/local/etc/my.cnf.d
brew services restart mariadb

BINGO!

Bumpr

I use a lot of browsers throughout the day.

screenshot of several browser icons in a Launchpad folder on macOS

Up until a couple days ago, that meant when testing specific things, I had to right-click a link, copy the url, then paste into the browser I wanted to test in.

With Bumpr installed and set as my default browser, it intercepts links I click and pops up a quick menu of my installed browsers[^ or a subset of them… you can configure which are available] for me to quickly choose from. It’s a tiny interruption in my normal browsing around, but it’s so worth it for the convenience it offers.

But it doesn’t stop there… it provides the same functionality with email apps. Say you have the native Mail.app configured with your work email account and some other app like Spark or Airmail setup w/ your personal account. Click on a mailto link and Bumpr will ask you which email app you’d like to use to compose and send your message.

Bumpr's UI for choosing a mail client after clicking a mailto link

Fickle Dev

I’m a loyal husband.

When it comes to software… I’m apparently quite fickle.

I seem to cyclically rotate from Chrome > Firefox > Safari > Opera (and some of their developer/preview versions) as my default browser every couple months. I also tend to do the same with code editors like Sublime Text, Visual Studio Code, Atom, and others. Looking back, I’ve done it with WordPress, Ghost, and some other CMSes over the years.

Freedom to switch is a powerful thing. But I’d really be a fan of myself if I’d jot down a note in some consistent place about why I’m switching.

Someone build Switch Log or Fickle Logic or whatever you think it should be called.

Offline Docs

You know those moments of realization where you discover something and feel like you’ve had your head in the sand for years?

That’s been my morning.

I just discovered Dash (or Zeal for Linux/Windows users) and I’m loving it!

Dash is an API Documentation Browser and Code Snippet Manager. Dash stores snippets of code and instantly searches offline documentation sets for 150+ APIs (for a full list, see below). You can even generate your own docsets or request docsets to be included.

If you dabble in web development at all, Dash is worth a download. Here are the docsets I grabbed without effort – all available for quick search.

Killer.

Operation Homecooked Mobile Device Lab

TL;DRI’m a web developer nerd that wanted to test my sites on multiple devices at once. So, I built a thing to do that.

Background

I’m the in-house web developer at an excellent CPA firm in Southern Arizona. I build/maintain all their web properties – internal and external. As it stands, all but our main site are responsive and feel modern-enough1. Our main site is based on a non-responsive WordPress theme I chose (D’oh!) in 2010 that’s been heavily customized over the years2. It needs a major responsive redesign – yesterday! Based on other job responsibilities/projects, I haven’t had time to focus on it until now. As I really started to stare the project down, I started to wonder how I’d make sure the new theme looked right across multiple devices.

Devices

The proper way to go about this would be to identify ‘target devices’ currently used by our visitors via our analytics provider of choice. However, at least initially, I’m attempting to do this on my own dime aka «on the cheap» … so, I’m using whatever I can get my hands on. I currently have access to:

  • iPad w/ Retina screen (Previously provided by employer)
  • iPhone 5s (Previously provided by employer)
  • Kindle Fire
  • Droid X

Use what you can! Perhaps you own an Android phone… Tell your friends what you’re doing and ask if you can borrow a previous-model iPhone that they’re not using or something. I’m hoping to get my hands on a newer Android device or two – especially if they’re different screen sizes. I’m debating whether or not to send an email to the firm asking folks to donate a dusty device or two.

Available Solutions

Thankfully, in this day and age, we’re able to hop on the internet and look up how other folks have solved similar problems. After poking around the web, I found a cool project/movement called Open Device Lab. It aims to highlight device labs that are open to public use for free and encourage the creation of more. It’s certainly a very cool idea; one that I think could be a really cool addition to any of the co-working locations in downtown Tucson. However, it’s an idea I don’t think I can pitch w/o having a working example to demo.

The well-made, professional solution

I’m just gonna leave this here and say, yeah… looks really nice.

Vanamco’s $149.00 Device Lab

My improvised solution

Stand hardware

Items from Home Depot & Amazon:

Note: If you anticipate needing to test more than 4-5 devices, you may want to double up on these items. The beauty of the pegboard used in this build is that it’s designed as an expandable system. Two of them will lock together really nicely with a couple screws.

Software

There are two pieces of software magic that make this setup work beautifully.

DesktopServer by ServerPress

Cloudup rjmauqxttnm

You can certainly pull off this setup with any local web server stack (MAMP, LAMP, XAMPP, VVV) or with ServerPress’ free version, DesktopServer Limited, however, I want to point out that after using that version for a few hours one day a couple months ago, it was enough to convince me to upgrade to their fully-featured DesktopServer Premium version. I have not been disappointed.

DesktopServer allows you to quickly and easily generate optimized WordPress projects that run locally.

Prior to DesktopServer you would have had to install a LAMP stack, edit multiple configuration files, create databases, create security credentials, and repeat the process for each new project or site you wanted to run; a painful time consuming and unfriendly process for non-developers and seasoned programmers alike. DesktopServer diminishes mundane tasks and is preferred even by advanced developers who like to tinker with WordPress Multisite based projects, domain aliases, and host files.

ServerPress has done a great job putting together a software package for Mac or Windows that lets you run a local version of your sites quickly, with very little fuss.

ServerPress’ Videos

For more information on how DesktopServer can exceed your needs, hit their YouTube channel!

BrowserSync

If DesktopServer is the cake, BrowserSync is the frosting. It allows you to inject live-updating code into your pages and then sync scrolling, mouse clicks, and form input across any browsers viewing the URL on the same network. No more saving your code, switching to each browser you’re testing in, and refreshing the page. It refreshes each connected browser automatically. It’s free, open source, and ridiculously wonderful.

I’ve got it hooked into my Gulp build process. PHP, JS, and SCSS files are watched, compiled/concated on-save, and all connected browsers are refreshed w/ the latest changes.

Here’s the gulpfile from one of my projects:

Solving Real Problems

Using the hardware and software covered above, I was able to tackle a pain-in-the-butt issue last week. Long story short: we had embedded a survey (thanks Survey Monkey) into a dedicated, responsive landing page on our site. In testing, the survey loaded when viewed on an iPad or any computer… but it wouldn’t show up on any phones we tried. Using the device lab, I was able to discover that Survey Monkey’s embed javascript was specifically NOT rendering the form on any devices with a screen smaller than 760px wide. From that Ah-ha moment, I was able to build a ‘warning’ pane that would only show up on the smaller screens offering to launch the survey in a new view.

Mobile Device Lab getting it done!

BOOM! Problem solved!

Future Plans

Obviously, the goofy Guitar Hero stand needs to be replaced by a sturdy solution of some sort. It does the job for now, but I’ve already spent some time sketching out some ideas for a wooden frame (with room for two panels mounted together – I went ahead and bought another one :)).

For now, version 1 works really well for me.

Operation Homecooked Mobile Device Lab is a success!

I’ll definitely add photos of version 2 when it gets to that point. Perhaps that’ll be one I can replicate down at CoLab Workspace or Connect Co-working?


1: Everything changes so fast on the web, I don’t dare declare anything modern or ‘done’. ^

2: A year or two after launch, we added a mobile device sniffer and have been redirecting that traffic to a /mobile/ subdir… which has worked well-enough. But it’s 2015, dangit! Time for a completely mobile-friendly approach. ^

Today in ‘people telling you what you should probably already know’, working late is a terrible idea and you should never do it. Unless you have to, in which case: you have to.

via Versioning #222

Three Things Almost No One Gets Right About CSS

If there’s a lesson I learn over and over in web development, it’s this: Never stop learning.

CSS

I ran across an eye-grabbing headline — “3 Things (Almost) No One Knows About CSS” — in the April 17th edition of Versioning1. The author writes about a free CSS test that’s been online for about 6 months and observes…

“…plenty of practicing developers don’t know CSS as well as they think. Out of over 3,000 people who have taken the test so far, the average score was just 55%.”

SitTheTest: CSS

Before I read much further, his mention of the test made me wonder how well I’d done when I took it last fall. So, I jumped over to the site, logged in, and discovered I’d only taken the HTML test2. The CSS test had been untouched. #memoryfail

It was either the coffee I was drinking this morning, or I physically felt the pride in me swell. In fact, I’m pretty sure my pride got up from wherever it was lounging, turned to my intelligence and said, “Hold my beer.”

The Test

After lunch today, I decided to take the CSS practice test. It touched on some areas I haven’t dealt with much. I tried to mentally fight through some of the more difficult questions, but since it was a practice test, I gave myself permission to go try a couple things in CodePen. Even with that affordance, I ended up earning an 80%. I learning a few things in the process. Not bad, but definitely wasn’t feeling as confident as I did while taking the HTML test.

I then figured, well… while that was humbling, I’ve now got my CSS knuckles cracked as it were. Let’s do this!

The questions for the real test were along the same lines, but they were different enough to make it just as hard the second time around. At around question 7 or 8, I realized that taking this test ~30 minutes after eatling lunch was probably a really bad idea. By realized, I mean that I actually caught myself falling asleep. I got up, walked a lap around the building to get my blood moving and sat back down to push through the rest of the test.

Results

My SitTheTest CSS results - 80%

Turns out, the 3 things mentioned in the article were a doozy for me, too. Along w/ a couple more (they indicate which ones you got wrong for the practice test; but they don’t reveal it when you take the real test).

.feeling {
    d'oh: 100%;
}

Sidenote

All this thinking about CSS reminded me of this old gem:

I guess I can only claim to “do that CSS up right” 80% of the time? 😉



  1. If you do anything related to webdev, go subscribe to this newsletter. It’s totally worth the time it takes to read each morning. 
  2. 92%, baby! 

Wow! I saw this link go by on Twitter this morning before I was headed to work and made a mental note to take a peek during my lunch break. I’m so glad I did.

Chris Coyier is someone I’ve been following around the internet for several years. His CSS-Tricks site, and CodePen tool have been extremely valuable to me over the years and the ShopTalk Show podcast he hosts with Dave Rupert is one of the few I’ve remained subscribed to for any length of time.

In Envato’s latest “Made By:” episode, we feature web designer and author Chris Coyier, best known for CSS-Tricks, CodePen and the Shop Talk Show podcast. Now living in Milwaukee, Wisconsin, Chris gives us a unique look into his life.

It’s so cool to get to peek into the day-to-day life of someone I have a ton of respect for.

Nice work, Chris & Envato!

Top 10 Brackets Extensions

Turns out I’m a fickle developer that wastes some time every now and then jumping back and forth between Sublime Text and Brackets. I’ve been on a Brackets kick for the last couple weeks and figured I’d make note of my favorite extensions.

Brackets is an ever-evolving, freely available, open source, cross-platform editor being developed and maintained by Adobe + a community contributors. It launched with some great features a while back and is maturing at at great pace.

Top 10 Brackets Extensions

  1. Emmet — extremely fast html & css shorthand/generation
  2. Brackets Git — Truly excellent Git integration
  3. Search with Google
  4. Markdown Preview
  5. Brackets Icons
  6. TODO — Manage Todo items and Notes within your projects.
  7. Alice — Interact with GitHub Issues from within Brackets
  8. JSHint
  9. PHP Syntax Hint
  10. Handlebars Syntax Highlighter

Developer’s Toolbox: Brackets

Recently, over at Learnable, @lcatdesigns put together a 10-minute video of her favorite parts of Brackets. It’s worth a watch if you’re new to Brackets.

Honorable Mention

This one is more of a novelty, but quite cool. Brackets-Wakatime allows you to automatically track what you spend time on within Brackets (or in several other editors, really). Pretty slick.

New Host

I’m excited to be moving this site (and the wife’s) to a new host later this week. I’ve been relying on them for about a year for a work project and I’ve been really impressed with features, user community, and especially the price. Spun up a new droplet (virtual server) this evening.

Five. bucks. a month.

Digital Ocean, here we come!

Older posts

© 2018 bishless.com

Theme by Anders NorenUp ↑