There’s an API that was added at some point that does exactly this. Unfortunately, that won’t work in the renderer process. If you’re in the background process, then that should work just fine. Also worth noting, if you’re doing file access and dealing with paths, you probably ** should ** be in the background process. Take a minute to think about that and whether or not you should refactor to make that a reality. There’s also another way to get at this, as suggested by this StackOverflow post.

require('electron').remote.app.getAppPath();

For whatever reason, perhaps an outdated Electron version, that did not work when I tried it. There’s a surprisingly simple solution to this. If you’re using a bundler, this may be a little different.

Here’s the trick that works no matter what. Put a file at the root of the application, called rootPath.js and return __dirname. __dirname in Node is the directory of the currently executing file. Since it is at the root, this will always give you the root path.

export default function rootPath() {
  return __dirname;
}

Import it however you usually import things, and call it and you’ll get the root path.

import rootPath from 'rootPath';
import path from 'path';
//or
const rootPath = require('rootPath');
const path = require('path');

const somePath = path.resolve(`${rootPath()}/some/path/to/something`);

That’s it! After some hand wringing, that works all the time, everywhere, no matter what. Undoubtedly, it won’t work for someone, and we’ll hear from them in the comments.

Deep merging objects in JavaScript is a bit tricky. Here’s one solution; there are many many others. While this was fun to write, you’ll probably want to go use the merge function in lodash instead. None the less here’s some code golf

function merge(...sources) {
  return sources.reduce((target, source) => {  // enumerate the sources
    return Object.entries(source).reduce((result, [key, value]) => {  // enumerate the properties
      if(Array.isArray(value)) {
        if(Array.isArray(result[key])) {
          result[key] = result[key].concat(value); // got two arrays, merge them
        } else {
          result[key] = value;  // clobber it, either undefined or not an array
        }
      } else if(value === Object(value)) {
        if(result[key] === Object(result[key])) {
          result[key] = merge(result[key], value); // two objects, recurse and merge them
        } else {
          result[key] = merge(value); // recurse and clobber it, either undefined or not an object
        }
      } else {
        result[key] = value;  // must be a primitive, clobber it
      }
      return result;
    }, target);
  }, {});
}

After having migrated my mail provider from Outlook.com to Fastmail I needed to get the contact form up and running for WordPress. The Fastmail settings are plainly available and located over here.

SMTP Host: smtp.fastmail.com
Encryption: SSL
SMTP Port: 465
Auto TLS: On
Authentication: On
SMTP Username: your primary email address
SMTP Password: <your password, use at your own risk, it’s better to use WordPress variables for this>

While your primary password may work, it’s better to create a unique password per application using Fastmail. This password can be revoked easily if something goes wrong. In Fastmail, under Settings -> Password & Security you’ll see there is a section called App Passwords. Generate a new password here and put these two variables into wp-config.php

define('WPMS_ON', true);
define('WPMS_SMTP_PASS', 'your per application password');

Use the “Send a Test Email” section to make sure everything works.

If you have a firewall setup (and you should), you’ll have to let that traffic out as well. If you are using Linux and iptables here are the iptables rules that allow that traffic to get out while still blocking new incoming connections on port 465. Note these must be run with sudo

iptables -A OUTPUT -p tcp –sport 465 -m state –state NEW,ESTABLISHED -j ACCEPT
iptables -A OUTPUT -p tcp –dport 465 -m state –state NEW,ESTABLISHED -j ACCEPT
iptables -A INPUT -p tcp –sport 465 -m state –state RELATED,ESTABLISHED -j ACCEPT

And now you’ve got WordPress using Fastmail for all of the notifications. Enjoy

Styling footers proves to be a bit tricky. On a site where there’s a lot of content, this is not an issue. However, if you want to have the page be full height and scroll when the content overflows, there is some subtlety to styling the footer. It’s pretty easy to accidentally have the footer float in the middle of the page when the content overflows and the page scrolls. It’s also pretty easy to have the content hide underneath the footer. I am hardly the first person to write about this; this post was inspired by and slightly modified from this blog post.

Here’s how to deal with that. First of all, if you don’t have a normalize and reset, you should probably do that. In the example I’ve included a quick reset of body and all of the header elements. Without that reset this won’t quite work like you might expect. The kernel of getting the page to be full height while allowing it to scroll is setting html to height: 100% and setting body to min-height: 100% and position: relative. With those styles, it allows the short pages to be full height, without scroll bars, and allows longer pages to scroll and keep the footer at the bottom. Finally, another important note: the main content container needs to have some padding so its content doesn’t hide underneath the footer.

A demo is worth many words; here’s a CodePen:

Given any URL you can download all pages recursively and have wget convert the links to local links after the download is complete. You could, for example, run this with the Ruby on Rails Guides. There is a wait included, which you can remove, but be aware that it might not be nice to overload some poor web server.

Here’s the command:

wget —mirror —convert–links —adjust–extension —wait=1 <url>

or the short form:

wget –mkE –w 1 <url>

There are a lot more options which are all documented here. However, here are the options used here.

-k or –convert-links

Converts links on the downloaded pages into local filesystem links 1ctvbeq.

-E or –adjust-extension

Saves files according their content type; CSS will be saved as a .css file for example

–mirror or -m

Flips on a bunch of options for exactly this kind of purpose. It is equivalent to –r –N –l inf —no–remove–listing

-r –recursive

Downloads all webpages recursively. All links will be followed and those pages will be downloaded as well.

-l inf

Sets the recursion level to infinite, so it will follow all links. This could be made smaller if you don’t want it to follow that many links.

-N or –timestamping

Turns on timestamping so that if you fetch the pages again it will not download the file unless the timestamp has changed.

–no-remove-listing

Not entirely sure about this one, but it has something to do with FTP files. See the documentation for it here.

The fix ended up being adding a parameter to the Linux kernel via Grub. That parameter is acpi_sleep=nonvs

Edit /etc/default/grub using whatever text editor you prefer and find the line that looks like this GRUB_CMDLINE_LINUX="rhgb quiet". And you’ll need sudo Add acpi_sleep=nonvs to the end of that string so it looks something like this

GRUB_CMDLINE_LINUX="<a bunch of other parameters>; rhgb quiet acpi_sleep=nonvs pcie_aspm=force acpi_osi=Linux"

Now you have to update Grub. In Fedora there is no update-grub command so you have to update it like this and then reboot. You’ll also need sudo to run this command.

grub2-mkconfig -o /boot/efi/EFI/fedora/grub.cfg

According to the kernel parameters documentation, this parameter “prevents the kernel from saving/restoring the ACPI NVS memory during suspend/hibernation and resume.”

Thanks to this helpful thread and this other helpful thread over here.

Let’s say you have a few routes that are all related, but don’t really map to the usual resources. For example, a login/logout controller named SessionsController doesn’t really fit the usual resourceful route model. One could use the usual routes HTTP verb syntax like this

Rails.application.routes.draw do
  #...
  get  'login',  to: 'sessions#index'
  post 'login',  to: 'sessions#login'
  post 'logout', to: 'sessions#logout'
end

However, there’s a nifty little helper that’s not in the routing guide but is in the API docs called controller which feels a bit cleaner.

Rails.application.routes.draw do
  #...
  controller :sessions do
    get  :login,  action: :index
    post :login,  action: :login
    post :logout, action: :logout
  end
end

After running rake routes or rails routes to see what routes we’ve got, we’ll see three routes.

login  GET  /login(.:format)  sessions#index
       POST /login(.:format)  sessions#login
logout POST /logout(.:format) sessions#logout

If there’s an even better way, let me know in the comments!

SASS is a really powerful tool, which sometimes means that one has to be careful. It can generate all kinds of insane CSS that is hard for debugging and hard for the browser to parse and apply. Now and then, you have to take a step back and ask yourself if you really need to use SASS for the task at hand. I’d like to attempt to coin a new term for an anti-pattern that I, and many others, have stumbled upon.

The Selector Bomb

A gigantic selector that is hard to debug and hard for the browser to parse and apply, generated by SASS when using @extend as a utility that spans across many selectors.

An Example

There is a lot of jargon in the above statement. Let’s break it down with a clear example with three pages. Keep in mind that three pages is not really a problem, but when you scale this up to a huge amount of pages, it really becomes a problem. This especially applies to utility classes – something like a clearfix class or a text-align class. Each page has a panel with a different background color. This is a fairly common pattern, especially if you’re concatenating all of your CSS into a single file. You want to share the common styles and yet still change the background color. You decide to use a SASS placeholder and use @extend to bring in the common styles. Let’s have a look at the markup and SASS for each page.

First Page

<div class="panel">
  <h2>Sass</h2>
  <p>CSS with superpowers</p>
<div>

.page.sass {
  .panel {
    @extend %panel;
    background-color: #e1faea;
  }
}

Second Page

<div class="page stylus">
  <div class="panel css-library">
    <h2>Stylus</h2>
    <p>Expressive, dynamic, robust CSS</p>
  </div>
</div>

.page.stylus {
  .panel {
    @extend %panel;
    background-color: #def0fc;
  }
}

Third Page

<div class="page less">
  <div class="panel">
    <h2>Less</h2>
    <p>Leaner CSS</p>
  </div>
</div>

.page.less {
  .panel {
    @extend %panel;
    background-color: #ebebeb;
  }
}

And finally, the common styles are in the placeholder, which is extended in each panel.

%panel {
  padding: 1em;
  margin: 1em;
  width: 300px;
}

This will render these three components on each of the three different pages.

Unfortunately that will compile to this. See how it merges all of the selectors into one for the common styles? This is the selector bomb. Every time you add a page that has @extend %panel , it will add one more selector here. Do that across enough pages and you can get a huge selector that is hard to debug and hard for the browser to parse and apply.

.page.sass .panel, .page.stylus .panel, .page.less .panel {
  padding: 1em;
  margin: 1em;
  width: 300px;
}

.page.sass .panel {
  background-color: #e1faea;
}

.page.stylus .panel {
  background-color: #def0fc;
}

.page.less .panel {
  background-color: #ebebeb;
}

Solutions

There are a couple ways to get around this. Depending upon the context of what you’re doing, one of these (or even something else) may make sense. First, a mixin will alleviate the pain, since a mixin will actually copy the CSS everywhere it is included. This could cause more pain, since it makes the file size a bit larger. However, worrying about the size of a CSS file is very likely to be overthinking the problem.

@mixin panel() {
  padding: 1em;
  margin: 1em;
  width: 300px;
}

.page.sass {
  .panel {
    @include panel();
    background-color: #e1faea;
  }
}

.page.stylus {
  .panel {
    @include panel();
    background-color: #def0fc;
  }
}

.page.less {
  .panel {
    @include panel();
    background-color: #ebebeb;
  }
}

Secondly, CSS is called Cascading Stylesheets for a reason. Depending upon the context, it’s probably better to not even bother with SASS features. Sometimes SASS makes you forget about some of the reusability features that plain old HTML and CSS have in the first place. Just add a class for scope and style it globally. I know, I know, global is bad from what you’ve heard, but often it makes sense. Here is what that might look like.

<div class="page sass">
  <div class="panel css-library">
    <h2>Sass</h2>
    <p>CSS with superpowers</p>
  </div>
</div>

<div class="page stylus">
  <div class="panel css-library">
    <h2>Stylus</h2>
    <p>Expressive, dynamic, robust CSS</p>
  </div>
</div>

<div class="page less">
  <div class="panel css-library">
    <h2>Less</h2>
    <p>Leaner CSS</p>
  </div>
</div>

.page .panel.css-library {
  padding: 1em;
  margin: 1em;
  width: 300px;
}

.page.sass {
  .panel {
    background-color: #e1faea;
  }
}

.page.stylus {
  .panel {
    background-color: #def0fc;
  }
}

.page.less {
  .panel {
    background-color: #ebebeb;
  }
}

Don’t avoid @extend and placeholders out of principle, but do be very careful, particularly if @extend is used for some kind of common utility. It will not scale out to many, many pages. Know what you’re using, and know what CSS it’s generating.

HTML:

<div class="box">
  <div class="icon"></div>
  <span>
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
  </span>
</div>

CSS:

.box {
  margin: 20px;
  border: 1px solid black;
  padding: 20px;
  background-color: #eee;
  min-width: 430px;  /* Set a min-width, so the images don't spill outside of the container */
}

.icon {
  height: 100px;
  width: 450px;        /* Set a fixed width, so the images don't float off to the left and right */
  margin: 0 auto;      /* Center the images */
  margin-bottom: 20px; /* Push the text away by 20px */
  background-image:
    url('https://www.barnesian.com/wp-content/uploads/2015/12/ruby.png'),
    url('https://www.barnesian.com/wp-content/uploads/2015/12/php.png'),
    url('https://www.barnesian.com/wp-content/uploads/2015/12/go.png');
  background-repeat: no-repeat, no-repeat, no-repeat;
  background-size:
    100px,       /* height and width of 100px */
    auto 100px,  /* height auto and width of 100px */
    100px;       /* height and width of 100px */
  background-position: left, center, right;  /* You can also set an offset here if you need to */
}

Those will produce the following result:

Here’s a quick demo on JSFiddle:

Recently I came across the need to parse a bit of a config file, in this kind of format: “Category=filetype;…” Here is how one would do such a thing using split, inject and map.

raw_config = "Image=jpg,tiff,png;Document=docx,doc,pdf;Other=rb,cs,c;"

config = raw_config.split(";").inject({}) do |result, fragment|
  type, extensions = fragment.split("=")
  result[type.strip.downcase.to_sym] = extensions.split(",").map{ |s| s.strip }
  result
end

The result is a hash where you can get an array of the file extensions for a given category like this config[:image] and the resulting hash looks like this:

{
  :image => ["jpg", "tiff", "png"],
  :document => ["docx", "doc", "pdf"],
  :other => ["rb", "cs", "c"]
}

Let me know in the comments if you have a better way!