Category: JavaScript

Categories
JavaScript Static Site Generators

Static Site Generator Opinions

Eleventy looks good for actual simplicity and genuine static sites.

Nuxt

Nuxt Update 2.13

19 June 2020: Now supports target: static to actually build a static site.

TL;DR: up to and including 2.12 do not support writing fully-static HTML without client side JS. It gets part the way there whereby you don’t need a Node server, however there’s still 150kb+ of client JS.

A coming version should support a ‘static’ directive to avoid that.

Just dabbled with this for potential client project. Seems powerful for apps and SPA, and it apparently does SSG and SSR; HOWEVER their definition of a static generated site means static files, but the page rendering is still done with JS!

I found issues on their Github, and log running RFCs to discuss making real static HTML files that have the content actually rendered there are built time, but still nothing implemented as of April 2020.

It’s pretty frustrating TBH, because if the result is static content on the page I’m not sure why the JS community cannot fathom writing it into the HTML file and not into a JS render function.

You’d lose the power of the SPA.

Whoever

Yeah, that’s fine. The browser is really good at navigating pages. If they are static HTML they will be super fast, the routing is automatic, the whole thing is super portable and SEO friendly.

Gridsome & Eleventy

These are probably the best of the non-React JS ones to try next.

Gridsome uses GraphQL and if you know that might offer power for fetching data.

Eleventy looks like it probably can with Data sources that use functions/async funcs to fetch data for build. If you were iterating on a site could you separate fetching API data from each build so you have more control about when that runs?

Categories
JavaScript

JavaScript Thingies

Destructuring

let idaCalledEm, others
[idaCalledEm, ...others] = ['Chazwazzars', 'Simpsons', 'or perhaps', 'Futurama Quote']

To Do: Incorporate Wes Bos’ default object parameter post.

Categories
JavaScript Laravel

Encoding strings for Vue components

If you’re passing server side data from a Laravel Blade template into a Vue component prop, the standard {{ encoding }} structure won’t work. The HTML encoding is parsed by Vue and will break the template parsing.

<coffee-history-list
  :name='@json($cafe->name)'
>
</coffee-history-list>

Using Blade’s @json directive will escape the quotes correctly, but the prop value must be wrapped in single, not double quotes.

Categories
JavaScript Laravel

Laravel Elixir Notes

gulp –production minifes and removes console.log which may not be what you want! Especially when debugging the process.

 

Categories
JavaScript

JavaScript Email Protection

Write email addresses like this in your source to (hopefully) make them a little harder to scrape and spam:
[js]Need info? Email me: <span class="obs">info [at] example [dot] com</span>[/js]
Use jQuery like this to convert back to regular mailto links:
(Alter the selector as needed)
[js](function() {
var address;

jQuery(‘#content span.obs’).each(function(i, el) {
address = el.innerHTML.replace(/\[ ?at ?\]/g, ‘@’);
address = address.replace(/ /g, ”);
address = address.replace(/\[ ?dot ?\]/g, ‘.’);

jQuery(el).html("<a href=’mailto:" + address + "’>" + address + "</a>");
});
})();[/js]

Categories
JavaScript

Require.JS

It seems to be a popular way of managing JS dependencies. From what I gather it expects files to be self contained anonymous functions that stay out of the global scope. jQuery can be hacked to fit Require.JS’ approach, but the jQuery file won’t by default.

I don’t think it’s about LazyLoading so much as getting all the scripts you need for a given page without having to call them explicitly in the markup.