code.alesh.com

Consider this:

const x = [1, 2];
x.length = 3;

For a while I’ve had a .bash_profile that creates a custom prompt which includes the nme of the current git branch. Recently I wanted to reuse that idea for something just slightly different, and it turned into a crash course in shell scripting.

Redux, boy. I don’t know of anything that has a steeper learning curve. Root reducers? Store factories? mapStateToProps? Higher-order functions? Connected components? Action creators? Thunks? Dispatch? For someone who’s feeling smug about getting a hang of basic React, it is a lot of moving parts to get a grip on. Anyways, here’s a basic cheat-sheet for getting started.

So you’ve been using create-react-app and now you want to do a simple web project, maybe with jQuery, but you want quasi-modules with private methods? Here’s what briefly worked for me, before I threw in the towel and installed webpack and switched to using import and export.

I’m working on an app for exploring the Dewey Decimal System. It’s based on three-digit numbers in which each number is a different level of specificity. The 700’s are arts, 770’s are photography, 774 is holography. I started with a text file with all the codes and their descriptions and made a flat array of objects like

[
  { "number": "000", "description": "Generalities " },
  { "number": "001", "description": "Knowledge " },
  { "number": "001.5", "description": "Communications " },
...

Which worked fine for searching, but we also want to browse. That is, see the 10 top categories, select one, see its subcategories, etc. So what’s required is a tree of nested objects.

function goBack() {
  if (document.referrer == "https://alesh.com/") {
    window.history.back()
  } else {
    window.location.href = "https://alesh.com/"
  }
}

I wanted to create a button with a “close” icon for my website that would make the feeling of going back to the home page feel light and easy. The homepage is fairly long, so I also wanted it to return to the same scroll position it was in when the user clicked. Solution, <a href="javascript:history.back()">Back</a>. Problem is, what if someone got to the page by following a link from another site, or what if I want to email someone a link to a page?

Then we want the button to be a regular link to the homepage. Result above, activated by <a class="close-button" href="#" onclick="goBack(); return false;" ></a>. This CSS makes a nice fixed circle with a close ‘X’ icon in the top right corner:

Unfortunately, this sort of information changes regularly. Google “dreamhost laravel” and you’ll get some articles from a few years ago which, while helpful, were not sufficient for me. A few examples:

• Setting up a Laravel application on a DreamHost shared hosting account
• Deploy Laravel 5 application on shared hosting
• The simple guide to deploy Laravel 5 application on shared hosting

.container {
  display: flex;
  justify-content: space-around;
}

Nicely spaces whatever elements are inside it. Other useful values for justify-content are center, space-between, and space-evenly. Complete details on flexbox here.

var fadeDuration = 2000

$(function () {
  var $slides = $("#slideshow > div")
  $slides.hide()

  var currentSlide = Number(location.hash.slice(1))
  $slides.eq(currentSlide).fadeIn(fadeDuration)

  $slides.click(function () {
    $slides.eq(currentSlide).fadeOut(fadeDuration)
    currentSlide++
    if (currentSlide == $slides.length) currentSlide = 0
    $slides.eq(currentSlide).fadeIn(fadeDuration)
    location = "#" + currentSlide
  })
})

This is pretty rough, but it does two notable things. First, a slideshow that advances on click with a fade from one div to another. More interestingly, it sets the URI with the slide number, and retrieves the number on load. In other words, it’s an bare-bones implementation of a persistent URI system.