Marc Blase

1. Yo La Tengo
   422
2. Iron Chic
   247
3. Nancy Pants
   223
4. Hot Snakes
   154
5. Sturgill Simpson
   125
6. Built to Spill
   122
7. Galaxie 500
   120
8. The Magnetic Fields
   115
9. Jawbreaker
   113
10. Superchunk
    106
11. Leon Bridges
    100
12. Blended Babies
    92
13. The Menzingers
    91
14. Miles Davis
    79
15. The Velvet Underground
    77
16. PUP
    76
17. The Dead Milkmen
    76
18. teklife
    75
19. Ultramarine
    75
20. Big Star
    73
21. Diarrhea Planet
    72
22. Ol’ Burger Beats
    71
23. Guided by Voices
    69
24. Pavement
    65
25. Courtney Barnett
    64
26. Michael Bublé
    64
27. Thin Lips
    64
28. Melvins
    62
29. Pkew Pkew Pkew
    61
30. Pile
    58
31. Thee Oh Sees
    57
32. BROCKHAMPTON
    56
33. Waxahatchee
    55
34. The Modern Lovers
    54
35. Hop Along
    53
36. Keys N Krates
    53
37. The Joy Formidable
    51
38. Jlin
    49
39. Nice As Fuck
    49
40. Twin Peaks
    48
41. Big Thief
    47
42. Nick Drake
    47
43. The Aquabats!
    46
44. J Dilla
    45
45. The Beatles
    45
46. The Breeders
    45
47. Wilco
    45
48. Boys Noize
    44
49. Cass McCombs
    44
50. The Midnight Hour
    44

Published on January 5, 2019

1) Setup SSH jail in /etc/ssh/sshd_config
Match User JAILED_USER_NAME
  ForceCommand internal-sftp
  ChrootDirectory /jailed/directory
  AllowTcpForwarding no
  X11Forwarding no

2) Restart SSHD
systemctl restart sshd

3) Test

4) Setup dir share from somewhere else in filesystem using:
mount --bind /jailed/directory /somewhere/else

Remember that path to jailed dir must be owned by root and the share dir must be in a group that is writable by the jailed user. This will also only stick around till the next reboot, if you need something more permanent look into using fstab.

Published on June 1, 2018

Sometimes web content requires having a long URL which can extend or break the container which encloses it. Chris Coyier saves the day again. Thanks!

.dont-break-out {

  /* These are technically the same, but use both */
  overflow-wrap: break-word;
  word-wrap: break-word;

  -ms-word-break: break-all;
  /* This is the dangerous one in WebKit, as it breaks things wherever */
  word-break: break-all;
  /* Instead use this non-standard one: */
  word-break: break-word;

  /* Adds a hyphen where the word breaks, if supported (No Blink) */
  -ms-hyphens: auto;
  -moz-hyphens: auto;
  -webkit-hyphens: auto;
  hyphens: auto;

}

Published on February 28, 2018

A couple different ideas on a theme.

// Works once the whole element is in the viewport

function isScrolledIntoView(elem){
    var docViewTop = $(window).scrollTop();
    var docViewBottom = docViewTop + $(window).height();

    var elemTop = $(elem).offset().top;
    var elemBottom = elemTop + $(elem).height();

    return ((elemBottom <= docViewBottom) && (elemTop >= docViewTop));
}

// Works while any part of the element is in the viewport.

function isInViewport(elem) {
    var elementTop = elem.offset().top;
    var elementBottom = elementTop + elem.outerHeight();
    
    var viewportTop = $(window).scrollTop();
    var viewportBottom = viewportTop + $(window).height();
    
    return elementBottom > viewportTop && elementTop < viewportBottom;
}

Usage:

$(window).scroll(function() {
    if ( isInViewport($(<element_to_check>))){
        // DO SOMETHING
    }		
});

Published on January 11, 2018

1. Iron Chic
   444
2. Pkew Pkew Pkew
   343
3. Run the Jewels
   245
4. Diarrhea Planet
   240
5. Rush
   200
6. Shellac
   152
7. jank
   140
8. Thee Oh Sees
   140
9. Twin Peaks
   140
10. Bong Mountain
    125
11. Diet Cig
    122
12. Wilco
    120
13. Eurythmics
    111
14. Nick Drake
    98
15. Allison Crutchfield
    97
16. Day Wave
    87
17. The Bouncing Souls
    87
18. Kevin Morby
    86
19. The Magnetic Fields
    86
20. LCD Soundsystem
    84
21. OBN IIIs
    81
22. Cherry Glazerr
    79
23. Bad Cop, Bad Cop
    75
24. The Menzingers
    71
25. John Coltrane
    69
26. The Courtneys
    69
27. Donovan Wolfington
    64
28. Ryan Adams
    64
29. Real Estate
    63
30. Naked Giants
    62
31. Conor Oberst
    61
32. Miles Davis
    61
33. Obits
    61
34. Radiohead
    61
35. WESTERN SETTINGS
    60
36. St. Paul & The Broken Bones
    59
37. Arcade Fire
    57
38. gurr
    57
39. Hazel English
    57
40. Murs
    55
41. Built to Spill
    53
42. Leggy
    53
43. Kendrick Lamar
    52
44. The Damned
    52
45. Dude York
    51
46. The Obsessives
    51
47. PUP
    50
48. Chase & Status
    49
49. The Aquabats
    49
50. The Velvet Underground
    49

Published on January 2, 2018

You need to interpolate a SASS variable to have it print out inside calc.

$var: 100px;
div {
    height: calc(100vh - #{$var});
}

Documentation on the SASS issue: https://github.com/sass/sass/issues/818

Published on November 8, 2017

Need to exclude specific dirs when wrapping a site up to push to production, specifically bower_components and node_modules. Run this command from the site root of your WP install.

tar --exclude='wp-content/themes/THEME_NAME/bower_components' --exclude='wp-content/themes/THEME_NAME/node_modules' -zcvf SITE_NAME.tar.gz *.php wp-admin/ wp-content/ wp-includes/

NOTE: leave trailing ‘/’ off the path of dirs to exclude as tar doesn’t like it.

Published on November 3, 2017

This method is especially helpful in laying out Instagram images in a grid since they have rolled out their non-square media ability.

// HTML
<a href="LINK_GOES_HERE" class="square">
    <img src="IMG_GOES_HERE" alt="">
</a>

// SCSS
.square {
    width: 100%;
    height: 0;
    padding-bottom: 100%;
    display: block;

    img {
        width:100%;
        height:auto;
    }
}

Published on October 19, 2017

When creating Custom Taxonomies and Custom Post types with rewrite rules in WordPress, the order in which they are registered matters. With the taxonomy registered first, WordPress will be able to work it’s magic for the rewrite rules to work.

// TAXONOMY FIRST
$tax_args = array(
    'labels'  => 'TAX_NAME',
    'rewrite' => array( 'slug' => 'CPT/TAX/' )
);
register_taxonomy( 'CUSTOM_TAX_TYPE', 'CUSTOM_POST_TYPE', $tax_args );

// POST TYPE SECOND
$cpt_args =  array(
    'labels'  => 'CPT_NAME',
    'rewrite  => ' array( 'slug' => 'CPT' )
);
register_post_type( 'CUSTOM_POST_TYPE', $cpt_args );

Published on June 13, 2017

I have a site displaying mixed thumbnail images based on content created by the client consisting of either a featured image (sized via WordPress), YouTube thumbnails or a proxy image (static size). The featured image and proxy images are 16:9 sized images so there’s no problem there. YouTube thumbnail images, specifically hqdefault, are sized as 4:3 thus ruining the grid layout on the page I have all this content eventually displaying on. I wanted to find a low bandwidth solution to crop the YouTube thumbnails since the site was already looking to be on the heavy end. Without further adieu, my solution:

hqdefault = 4:3 = 0.75 = 75% // pre-crop images

16:9 = 0.5625 = 56.25% // cropped images

75% - 56.25% = 18.75% // difference in size

Now we take that difference in size, divide it in half and add that to the image as negative margins. Which creates our “crop”

18.75% / 2 = 9.375%

// HTML
<figure>
  <img src="https://img.youtube.com/vi/YOUR_VIDEO_ID/hqdefault.jpg" alt="">
</figure>

// SCSS
figure {
  overflow:hidden;

  img {
    margin:-9.375% 0;
    display:block;
    width:100%;
    height:auto;
  }
}

Codepen example.

Published on February 17, 2017