Jordon Bedwell EnvyGeeks

Jekyll Assets 3 has been released, here's what's new.

Today, Jekyll Assets 3.0.0 has been released 🎂. It involved a major rewrite, for a sponsored feature (SourceMaps,) and a major speed boost, with a major boost to people's ability to make plugins that hook into Jekyll-Assets, in the future. Here is what's new:

One Tag to Rule Them All

We've removed {% css %}, {% link %}, {% img %}, and any other tag, and left only one tag to rule them all {% asset %}, since Sprockets 4 now requires you to add an extension for most asset searching, it's no longer necessary for us to carry multiple tags to set a series of basic content types, we now have a single tag that deals with everything, including determining content type.

Super Fast

Like the movie, but less funny, and less dumb (in all fairness it wasn't meant to be a serious movie). Now our system caches much better, we use the manifest more, we more efficiently process, and just, yeah see it for yourself.

Configuration file: /srv/jekyll/_config.yml
            Source: ./source
       Destination: ./site
 Incremental build: disabled. Enable with --incremental
      Generating... done in 6.133 seconds.
 Auto-regeneration: enabled for './source'
 LiveReload Server: http://0.0.0.0:35729
    Server address: http://0.0.0.0:4000
  Server running... press ctrl-c to stop.
      Regenerating: 1 file(s) changed at 2017-11-21 11:03:32
        ...done in 2.424920382 seconds.

Drop in replacement

We now support being a direct drop-in replacement for Jekyll's own basic asset processing, but unlike Jekyll, we put the power in your hands, as Jekyll Assets is truly hackable, and extensible, like Jekyll Core, but compared to Jekyll's very basic asset system, we give you flexibility.

🎉 We now strip ---\n---, which Jekyll uses to determine assets... 🎉

Default Sources

  • assets/css
  • assets/fonts
  • assets/images
  • assets/videos
  • assets/javascript
  • assets/video
  • assets/image
  • assets/img
  • assets/js
  • _assets/css
  • _assets/fonts
  • _assets/images
  • _assets/videos
  • _assets/javascript
  • _assets/video
  • _assets/image
  • _assets/img
  • _assets/js
  • css
  • fonts
  • images
  • videos
  • javascript
  • video
  • image
  • img
  • js

Sprockets 4.x Support

By default we still default to Sprockets 3.x but now we also support Sprockets 4.x if you are looking for some speed boosts (trust me, it's worth it.) It also enables some of our other features, like SourceMaps, and other features.

gem "sprockets", "4.0.beta"

Responsive Image Support

This has been a long standing request from the community. To support responsive images. Prior to this rewrite, it would have been a huge undertaking because I never designed 2.x to do the kind of stuff I designed 3.x to do. Now you can do basic responsive images (and kick on your own advanced responsiveness by going manual on media and sizes). You can learn more about how it works here: https://github.com/envygeeks/jekyll-assets#responsive-images

Example

{% asset img.png @pic
    srcset:max-width="800 2x"
    srcset:max-width="600 1.5x"
    srcset:max-width="400 1x"
      %}

Result

<picture>
  <source srcset="1.png 2x"   media="(max-width:800px)">
  <source srcset="2.png 1.5x" media="(max-width:600px)">
  <source srcset="3.png 1x"   media="(max-width:400px)">
  <img src="img.png">
</picture>

Example

{% asset img.png
    srcset:width="400 1x"
    srcset:width="600 1.5x"
    srcset:width="800 2x"
      %}

{% asset img.png
    srcset:width=400
    srcset:width=600
    srcset:width=800
      %}

Result

<img srcset="1.png   2x, 2.png 1.5x, 3.png   1x">
<img srcset="1.png 400w, 2.png 600w, 3.pnx 800w">

Support for <video> and <audio>

Sprockets 4 brought better audio/* and video/* support. We now support consuming any supported content type, and pushing out a <video> or <audio>, we've even let you customize the attributes that get passed to them.

Support for fast cp, with raw_precompile

in 2.x we had no ability to allow you to quickly copy assets you didn't need to go through the pipline, but wanted inside of your assets folder, this is particularly useful for cases of Emoji systems, where they provide a super huge set of images, but precompiling all those assets even at their most basic through the pipeline is expensive. You can cp these asses quickly now with Jekyll Assets by configuring your project like the following:

assets:
  raw_precompile:
  - twemoji/2/svg/1f3c3-1f3fb-200d-2640-fe0f.svg
  - src: twemoji/2/svg/*.svg
    dst: twemoji

Support for native <img asset>

Tired of not being able to see your assets when working in Atom Editor or any other editor that has support for markdown previews? We now support the native image tag with a custom attribute, <img asset>. So you can see our assets before they are processed, and then as your site processed, we transform that, it even works with proxies!

Example

<img src="asset.png" asset>
<img src="asset.png" asset="magick:resize=400">

Better Tag Processing

In 2.x we used a home grown tag parser, and we still do, except now it's extracted into it's own so bugs can be fixed. And aside from that, it uses Jekyll style standard syntax, with much more powerful handling of arguments. We now support array's, hashes, and it looks more like Jekyll.

{% asset asset.ext key:subkey=val array=1 array=2 %}

Proxies in SCSS

You can use proxies within asset_path and any other helper provided by Sprockets themselves. This works the same as the tag arguments, and works the same as asset_path except with extra spaces, this even works with global (read: site) variables, avoiding the Liquid broke my JavaScript problem with .css.liquid or .liquid.css, see it in action for yourself

body {
  background-image: asset_url("'{{ site.bg }}' magick:resize=1200")
}

SourceMaps

We now support SourceMaps. By default they are only enabled when you have Sprockets 4.x, and they are external, so you use them in production too, if you really want, but we disable them in production.

assets:
  source_maps: true

Plugins!

You can now customize the defaults. You can disable any default we create by shipping !attrName, which will tell us you don't want it, or you can add your own defaults if you want, for example, lets say you want your movies to autoplay, but you don't want to add @autoplay to every single {% asset %}. You can now create a simple plugin, make sure it's required inside of your Jekyll, and do the following:

# Frozen-string-literal: true
# Copyright: 2012 - 2017 - MIT License
# Encoding: utf-8

require "jekyll/assets"

module MyNameSpace
  module Assets
    class Default
      class Video < Jekyll::Assets::Default
        content_types %r!video/[a-zA-Z]+!

        # --
        def set_autoplay
          unless args.key?(:autoplay)
            args[:autoplay] = true
          end
        end
      end
    end
  end
end

Please Donate

Please remember, I'm trying to make a living on OpenSource, if you like my software, if you can! I never ask people to file pull-requests, and some projects take considerable time, I have no external funding. I also take paid jobs to fix bugs in other peoples OpenSource projects, or to take on features, no matter how large or small. If you would like to sponsor, please email. Or if you are looking for a full-time, contract or not, full-stack developer, I'm also available for hire.

Challenge #12

This week's challenge was reported to have been asked in interviews at Amazon

I've never been asked this kind of question. I've never interviewed at Amazon though. If that's the kind of question you are going to ask, let me go ahead and give you an answer ahead of time. Discussion, Repl.it (Javascript), Repl.it (Ruby) -- Yes even as an experienced programmer I still use CodeAcadamy for fun and practice. You should too, just not the paid version.

Ruby

max = 10000000; scores = [874300, 879200, 1172100, 1141800, 933900,
1170500, 1064500, 1190000, 1050200, 1090400, 1062800, 1061700, 1218000,
1177200, 1190200, 1110100, 1158400, 985600, 1047200, 1049100, 1138600,
1068000, 1127700, 1144800, 1195100]

def score_settler(array, max)
  return [] if array.size == 0

  gt = []
  pivot = array[0]
  lt = []

  # for i in 1..(array.size - 1)
  1.upto(array.size - 1).each do |i|
    next if array[i] > max
    gt.unshift(array[i]) and next if array[i] > pivot
    lt.unshift(array[i])
  end

  lt = score_settler(lt, max)
  gt = score_settler(gt, max)
  gt | lt.unshift(
    pivot
  )
end

score_settler(scores, max)
# => [1218000, 1195100, 1190200, 1190000, 1177200, 1172100, 1170500,
# 1158400, 1144800, 1141800, 1138600, 1127700, 1110100, 1090400, 1068000,
# 1064500, 1062800, 1061700, 1050200, 1049100, 1047200, 985600, 933900,
# 879200, 874300]

JavaScript

let max = 10000000, scores = [874300, 879200, 1172100, 1141800, 933900,
1177200, 1190200, 1110100, 1158400, 985600, 1047200, 1049100, 1138600,
1170500, 1064500, 1190000, 1050200, 1090400, 1062800, 1061700, 1218000,
1068000, 1127700, 1144800, 1195100]

function scoreSettler(array, max) {
  if (array.length === 0) return [];

  let gt = [];
  let pivot = array[0];
  let lt = [];
  let i;

  for (i = 1; i < array.length; i++) {
    if (array[i] < max) {
      if (array[i] > pivot) {
        gt.unshift(array[i]); continue;
      }

      lt.unshift(array[i]);
    }
  }

  lt = scoreSettler(lt, max);
  gt = scoreSettler(gt, max);
  return gt.concat(pivot,
    lt
  );
}

console.log(scoreSettler(scores, max))