Written by Alesh Houdek, a web developer in Colorado. This is mostly code snippets and ideas I might want to reuse. HomepageTwitter

  1. May 06, 2019

    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.

  2. April 28, 2019

    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.

  3. February 05, 2019

    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.

  4. January 31, 2019
    Laravel logo

    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:

    Shockingly, DH's Knowledge Base is silent about Laravel. Here's what ended up working for me. If you're trying to follow these instructions and something is unclear or does not work, please reach out.

  5. January 31, 2019
    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:

  6. January 28, 2019
    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.

  7. January 28, 2019
    .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.