mmistakes / made-mistakes-jekyll Goto Github PK
View Code? Open in Web Editor NEWDeprecated source for mademistakes.com. Previously built with Jekyll, Gulp, and Netlify.
Home Page: https://mademistakes.com
License: MIT License
Deprecated source for mademistakes.com. Previously built with Jekyll, Gulp, and Netlify.
Home Page: https://mademistakes.com
License: MIT License
It's that time again where I burn it all down, redesign, and rebuild. Let's start with giving the page, work, and archive layouts a refresh.
Design goal: feel more like a "personal" site and less like a typical blog. Standards like social sharing links, tag clouds, etc. are overkill and not needed (as indicated by analytics).
Mockups:
Investigate serving images via https://web.wurfl.io/
TL/DR plan of attack: relegate Jekyll to Markdown parsing and building HTML and leave assets (CSS, JS, images, and fonts) to Gulp (or equivalent task runner).
jekyll-picture-tag
with Gulp task.jekyll-assets
with Gulp tasks.layout: compress
with Gulp minify task.The time to jekyll build
and deploy the site has gotten out of hand the last couple of years. Test disabling various build tasks and plugins to determine offenders and investigate removing the dependency or developing a lighter weight alternative.
Made Mistakes Jekyll stats as of 8/23/2016:
.yml
Windows Test System:
Mac Test System:
Initial build: bundle exec jekyll clean
. Verify _site
, .asset-cache
, and any other .tmp
folders and files have been removed.
To test build tasks, disable or remove from source and compute average time of 3 builds using bundle exec jekyll --profile
.
task | task time (Windows) | task time (Mac) |
---|---|---|
Generate responsively sized page.image.feature photos |
1288.289s | 1429.255s |
Minify HTML with layout: compress |
39.348s | 11.18s |
Read /images/ and copy to _site/ |
32.385s | 23.629s |
Build tag pages with jekyll-archives | 17.398s | 9.994s |
Build tag index page with sort_tag filter |
2.62s | 0.586s |
List related posts with jekyll-tagging-related_posts, jekyll/tagging, and LSI: true |
38.356s | 17.867s |
List related posts with vanilla related_posts |
1.649s | 4.899s |
Preprocess, concatenate, minify, and cache bust SCSS and JS with jekyll-assets | 78.751s | 25.031s |
Display masthead and overlay menu from _data | 9.656s | 7.815s |
List post comments from _data | 7.103s | 2.216s |
Display colophon from _data | 0.2s | 0.486s |
List post taxonomy metadata | 3.479s | 1.182s |
List post breadcrumb links | 2.834s | 1.029s |
List featured posts | 0.195s | 0.439s |
Build style guide collection | 1.161s | 0.314s |
List post social sharing links | 5.092s | 0.973s |
Worst case offenders appear to be resizing large amounts of images, copying images from source
to destination
, and building the site.
Decoupling asset generation tasks from main Jekyll build so they don't trigger a rebuild each time they are updated should help with development build times. Browsersync can also come to the rescue injecting updated CSS/JS to circumvent the entire Jekyll build process.
Jekyll build times comparison:
build type | Jekyll + plugins | Jekyll Gulpified |
---|---|---|
clean build (Mac OS) | 26.01 min | 14 min |
clean build (Windows) | 26.31 min | 17 min |
build with images already resized (Mac OS) | 2.21 min | 1.58 min |
build with images already resized (Win) | 5.23 min | 4.17 min |
Very beautiful jekyll-based blog, however, I have no luck to run it on my Mac.
When $ bundle install
pkg-config could not be used to find libiconv
Please install either pkg-config
or the pkg-config gem per
gem install pkg-config -v "~> 1.1.7"
*** extconf.rb failed ***
Could not create Makefile due to some reason, probably lack of necessary
libraries and/or headers. Check the mkmf.log file for more details. You may
need configuration options.
Pleas make it possible to choose from different feed providers (e.g. feedburner) just as you can choose from different comment providers.
Improve maintenance of Gulp tasks by pulling out hard coded paths into a paths.js
file ala http://savaslabs.com/2016/10/19/optimizing-jekyll-with-gulp.html
position: fixed;
sidebar table of contents so its always in view, perhaps with the help of the jQuery plugin Sticky-Kit.
Spacing seems off. Possibly related to Jekyll 3 and switch to Rouge for syntax highlighting?
<div class="component__code">
<figure class="highlight">
<pre>
<code class="language-html" data-lang="html">
...
<div class="component__code">
<div class="highlight">
<pre>
<code class="language-html" data-lang="html">
...
Though you might find this valuable: https://www.aaron-gustafson.com/notebook/crossposting-to-medium-from-jekyll/
Rebuild CSS using mockups from in #81 as a starting point.
Seems to be related to posts becoming a collection in Jekyll 3. Wait for a fix or just roll with it.
Build times out after deploy. Kill background process for ssh-agent
ssh-agent -k
Reference: travis-ci/travis-ci#8082 (comment)
Build a helper that leverages {% include %}
variables to build a gallery container that pulls from image data from YAML Front Matter. This will help remove the need to write HTML in .md
which is hard to maintain and "junks" up the readability of Markdown only content.
Something similar to the helper built for Minimal Mistakes:
{% include base_path %}
{% if include.id %}
{% assign gallery = page.[include.id] %}
{% else %}
{% assign gallery = page.gallery %}
{% endif %}
{% if gallery.size == 2 %}
{% assign gallery_layout = 'half' %}
{% elsif gallery.size >= 3 %}
{% assign gallery_layout = 'third' %}
{% else %}
{% assign gallery_layout = '' %}
{% endif %}
<figure class="{{ gallery_layout }} {{ include.class }}">
{% for img in gallery %}
{% if img.url %}
<a href=
{% if img.url contains "://" %}
"{{ img.url }}"
{% else %}
"{{ img.url | prepend: "/images/" | prepend: base_path }}"
{% endif %}
{% if img.title %}title="{{ img.title }}"{% endif %}
>
<img src=
{% if img.image_path contains "://" %}
"{{ img.image_path }}"
{% else %}
"{{ img.image_path | prepend: "/images/" | prepend: base_path }}"
{% endif %}
alt="{% if img.alt %}{{ img.alt }}{% endif %}">
</a>
{% else %}
<img src=
{% if img.image_path contains "://" %}
"{{ img.image_path }}"
{% else %}
"{{ img.image_path | prepend: "/images/" | prepend: base_path }}"
{% endif %}
alt="{% if img.alt %}{{ img.alt }}{% endif %}">
{% endif %}
{% endfor %}
{% if include.caption %}
<figcaption>{{ include.caption | markdownify | remove: "<p>" | remove: "</p>" }}</figcaption>
{% endif %}
</figure>
.btn +.btn
top margin declaration is causing alignment issue on social sharing buttons found in the article layout.
Entire page zooms in Paper 3. Include note about the removal of the zoom loupe tool.
Using mockups in #81 rebuild and restructure _layouts/_includes as necessary.
Investigate better way of handling responsive images by writing in Markdown and replacing with Srcset markup. Possibly via a plugin.
References:
{% highlight linenos %}
tagHi,
I am not able to find this function breakpoint in any of the mixin file.
The jekyll is throwing error -
Undefined mixin 'breakpoint
Am I doing something wrong?
I forked the project to test like gh-page but Github show me the following message.
Github Settings : Your page is having problems building: The tag stylesheet in _layouts/default.html is not a recognized Liquid tag. For more information, see https://help.github.com/articles/page-build-failed-unknown-tag-error.
Output style guide collection documents and iframe
to hopefully make styling them easier.
https://www.sitepoint.com/setting-up-a-living-styleguide-in-jekyll/
Looking through this repo trying to figure out if I can glean how you did the text callouts danger
, warning
etc so I can add them to Basically Basic. Is there already a way to do this in that theme that I am missing and if not could you advise how to accomplish this or add it to that theme?
I'm Install mademistake and get error :
Liquid Exception: incomplete "\n" on UTF-16LE in _layouts/default.html
No line number information
Steps to reproduce bug:
#comment-parent
sets value 0
which causes comment to not be included in the display loop.Relevant code from /assets/javascripts/main.js that needs adjusting:
t.I( 'comment-parent' ).value = '0';
Improve typographic hierarchy with a modular scale.
Should point to /support/
instead of old /subscribe/
page.
Build a helper that leverages {% include %}
variables to build <figure>
elements containing images and a caption. This will help remove the need to write HTML in .md which is hard to maintain and "junks" up the readability of Markdown only content.
Replace hand-rolled SEO with jekyll-seo-tag
.
page.url
to make layout more portable.site.description
with page.excerpt
conditional.Investigate amp-jekyll plugin and possible use.
Rename modified
variable to last_modified_at
to utilize dateModified
via Jekyll SEO Tag plugin.
modified
to last_modified_at
in post/page/collection YAML Front Matter.page.modified
to page.modified
in _includes and _layouts as necessary.๐ Michael
Did you know that you can cache rendered outputs from stateless includes and improve your build times with a plugin..?
The plugin is called jekyll-include-cache and is whitelisted for use at GHP
(just not bundled by default, since its dangerous for novices)
The plugin can be used to cache any "include" that does not change its output from page-to-page.
Such includes can simply be plain HTML without any Liquid or an include that only references the global constant {{ site }} e.g., src/_includes/footer.html
I did not submit a PR because I thought I'd gather your feedback first and allow you to implement it first-hand so that you know where it can be used and where it should not be used..
Results from --profile
on my system show that you may be able to shave of ~15 seconds but I may be wrong..
Current experience
fullcss
cookie is set with a value of true
.Need a way to cache bust the cookie value. Perhaps leverage the values set in the asset manifest to evaluate against instead of true
.
/assets/images/filename.jpg
Investigate increasing regeneration times with each successive change on Windows. Possible fix is to add gem wdm
to Gemfile.
Goal: rely on JavaScript as little as possible. Rip out jQuery if possible.
Scripts to keep:
Hi @mmistakes
I just notices a bug with bigfoot while implimenting on my website, and is present on your website too.
Bug - On mobile device (my mobile screen res - 720x1280), the popup overflow from the screen if shown on extreme left on the screen.
I thought of putting this issue on bigfoot.js repo, nut the project is stale with many issues pending. However I found this opened issue which might be the same -lemonmade/bigfoot#46
I tried using positionContent: "true"
as mentioned on http://bigfootjs.com but no success.
Hoping that you can catch something...
On your website (about page)- -
I slowly resized screen in chrome (desktop) to emulate the bug.
On my website -
this page - happens on mobile device only
For example:
Masterpaper - Mix - have favicon
Masterpaper - Basics - doesn't have favicon
and so on...
I saw a few examples building my website.
Hi @mmistakes ,
Kindly help with a question related to your website
Just like your contact form , I have managed to make wufoo working, without using <script>{% include_cached wufoo.js %}</script>
Doubt 1 - I was wondering what is the use of including above script? Nowhere on the original site of wufoo they have mentioned about this JS code
Doubt 2 - Are you using hidden text box to prevent spambots from spamming the form?
i.e. this one - <textarea name="comment" id="comment" rows="1" cols="1"></textarea>
There is some white space getting added somewhere between send square cash
and send bitcoins
buttons on the support page.
Overflowed content with scroll lack momentum.
Add -webkit-overflow-scrolling: touch;
Reference: https://css-tricks.com/snippets/css/momentum-scrolling-on-ios-overflow-elements/
A declarative, efficient, and flexible JavaScript library for building user interfaces.
๐ Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
An Open Source Machine Learning Framework for Everyone
The Web framework for perfectionists with deadlines.
A PHP framework for web artisans
Bring data to life with SVG, Canvas and HTML. ๐๐๐
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
Some thing interesting about web. New door for the world.
A server is a program made to process requests and deliver data to clients.
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
Some thing interesting about visualization, use data art
Some thing interesting about game, make everyone happy.
We are working to build community through open source technology. NB: members must have two-factor auth.
Open source projects and samples from Microsoft.
Google โค๏ธ Open Source for everyone.
Alibaba Open Source for everyone
Data-Driven Documents codes.
China tencent open source team.