jxnblk / blog

Personal blog on design & development

https://jxnblk.com

Personal site and blog with thoughts on design, development, and other things

blog's Issues

Static Site Generation with React and Webpack

Static Site Generation with React and Webpack

how well does this kind of a website is being crawled by google for indexing?

Mini MacBook Review

Hey Brent,

You still sold on the MacBook? Which model would you recommend?

I'm on the fence...

Cheers,
Jake

How about line-height being the baseline grid? (Mathematical Web Typography)

I enjoyed reading your article.

What do you think about line-height being the baseline and all margins and paddings being the halves or doubles of that baseline? (Which I assume most web designers practice like this article).

For example, I'm working on a website, and thinking the typeface looks good in font-size of 0.9375rem(15px) and line-height of 1.59375rem(25.5px). I understood the power of two, so treid doubling and halving that computed value of line-height to get spacing values, but like you said, I started "dealing with less-than-ideal numbers and complex calculations".

You suggested:

...setting body copy to 1.125rem (18px) and keeping other UI elements tied to the base 1rem can make spacing and alignment adjustments much simpler and help create a natural rhythm in the visual design.

So my question is:

• When you do your work, do you set baseline based on computed value of line height and use that baseline for paddings and margins? (in my case, spacing between elements would be either 6.375px, 13.25px, 25.5px, etc.)
• If your typeface looks good in 15/25.5px, how would you approach it?

How to import data in Header.js

In Header.js, you import title and description but it doesn't seem to be the proper way to see these datas.

How to import them correctly ?

✌️

Static Site Generation with React and Webpack

Great tutorial! After stumbling onto Basscss after finding Plangular, I decided to give this a go as well. I managed to reshape my personal website using this as a base. I went a bit further and added CSS transitions in the routing, but need to do some work to make it perform better and more logically with touch events on mobile.

You're doing great work. Also of note: you were mentioned at the Jquery conference yesterday when CSS Stats was shown on a slide.

One quick note for the tutorial is that I had to specifically add cssnext itself to get cssnext-loader to work:
npm i --save-dev basscss css-loader cssnext cssnext-loader
And a question, have you gotten the react hot loader to work with this setup?

jsx-loader deprecated in favor of babel loader

Thanks for the great work on the tutorial.

I was running into some issues using all new bits from npmjs.org: parsing errors in my first root JSX that I really couldn't account for. After some digging, jsx-loader topped the suspects list. And, I see it's now been deprecated in favor of babel-loader: https://github.com/babel/babel-loader.

npm install babel-loader babel-core babel-preset-es2015 babel-preset-react --save-dev

module: {
  loaders: [
    {
      test: /\.jsx?$/,
      exclude: /(node_modules|bower_components)/,
      loader: 'babel', // 'babel-loader' is also a legal name to reference
      query: {
        presets: ['react', 'es2015']
      }
    }
  ]
}

... is working for me w/package.json dependencies:

  "devDependencies": {
    "babel": "^6.3.26",
    "babel-core": "^6.4.5",
    "babel-loader": "^6.2.1",
    "babel-preset-es2015": "^6.3.13",
    "babel-preset-react": "^6.3.13",
    "react": "^0.14.6",
    "react-dom": "^0.14.6",
    "static-site-generator-webpack-plugin": "^2.0.1",
    "webpack": "^1.12.11",
    "webpack-dev-server": "^1.14.1"
  }

Static Site Generation with React and Webpack

Did you mean: perceived?
http://jxnblk.com/writing/posts/static-site-generation-with-react-and-webpack/#why

Patterns for Style Composition in React

Hi jnxblk and thanks for this post! It's an interesting pattern to apply to have better component :)
With this idea, one could create a js version of bootstrap!
I only want to share with you two doubts that come to my mind reading your post:

• the first is about performance: using inline css, that it's generated from js helper function, should create performance issue. For example, everytime a form with input or button is re-rendered, every input recompute the propreties with the helper function, like the shadow, margin, etc
  And this is done in the js thread, that should manage the dom. Instead, using thing like sass or less, precompute this propreties, and it's applied from a different thread of the browser, leaving the js free to compute dom or other data.

-the second doubt it's about reusability.
It's true that i can import the component and it's ready to go. But let say that I've a new project, with complete different style. I could not load the component from and external library and use it, because I can't override all the default style (like you have presented in the article). I've to create something like a variable file in bootstrap, or completely import the components in every project, like a boilerplate

Thanks again for your article
Byez Mix

Static Site Generation with React and Webpack references non-existent RouteHandler

Since 1.0 react-router has removed RouteHandler:

https://github.com/reactjs/react-router/blob/master/upgrade-guides/v1.0.0.md#routehandler

Static Site Generation with React and Webpack - Issue with webpack-dev-server

Hi, thanks for the awesome tutorial, I'm still at the beginning, did the first scaffolding part and try to run it now. I may miss something but I'm having this issue while running npm start:
Failed at the [email protected] start script 'npm run dev'.
This is most likely a problem with the react-static-site package, not with npm itself.
Tell the author that this fails on your system: npm run dev

Do you maybe know what am I missing?
Thanks

Mathematical Web Typography

In many stylesheets I see line-heights that are calculated as a quotient of the target line-height and the font size. This sometimes leads to irrational, magic numbers that need to be rounded and can cause unforeseen and unintended consequences.

The quotient of two natural numbers is always rational.

Static Site Generation with React and Webpack

Thanks for the clear write up! I'm in the process of changing a wordpress website into a static one, due to security, maintenance and speed problems, I think this is too much for 10 static pages, but anyway it was eyeopening.

Omid

Static Site Generation with React and Webpack

Great article. I love the edits.

Bug: #undefined url on blog post title

Description

When you hover on a blog post title, you can see that the URL it's showing is ending in #undefined. The screenshot below can show the bug in place. take a look at the URL browser shows on the left bottom of the page.

However, hovering on post body will show the correct URL and clicking on the post title will navigate to the single post page.

Generating Color Palette Documentation from CSS

Dig the updated /writing styles

Static Site Generation with React and Webpack

Why don't you use the browsers option of cssnext instead of disabling some features by hand ?

Hamburgers & Basements: Why Not to Use Left Nav Flyouts

Others have said a similar thing: why hide content? I think that question is certainly pertinent.

However, in 2015, hasn't the hamburger come to stand for 'this is the button for hidden content'? It has a kind of culturally appropriated meaning now, for better or for worse. Which somewhat begs the question of whether or not hiding content is all that bad if the user knows its there?

Static Site Generation with React and Webpack

Informative. Thanks.

Microbeats is the Best Journal I’ve Ever Kept

Hey there,

Not really an issue here, but a hello from a fellow DJ/Developer in Brooklyn. My name's Dave Bloom and I'd like to share a Web Audio project with you. In short, it's a beat maker similar to Ableton's session view - drag and drop synchronized drum loops - and I'd like to add something like Stepkit to the mix (to allow users to import drum configurations to lay over melodies).

If you'd like to grab a beer and talk some shop, I'm in Williamsburg. I'm also a typography head, I'm interested in what React can do for my business, and I'm making tools for non-coders to build websites in ten minutes. Based on your writings (especially 'it's ok to look the same'), I think you'd be interested in some of these projects and the principles behind them.

I'd have said hi on Twitter but I don't really use the thing. If you'd like to have a look, please hit me up. And have a great Saturday!

Dave
[email protected]

P.S. I also do Skype.

Mini MacBook Review - s/VIM/Vim

<petpeeve>
VIM is not an acronym.
</petpeeve>

Static Site Generation with React and Webpack

I'm trying to run your tutorial with the and I am getting the following warning when running the version with Routes.jsx:
90% optimize assetsWarning: React.createElement: type should not be null, undefined, boolean, or number. It should be a string (for DOM elements) or a ReactClass (for composite components).

Followed by this error: ERROR in TypeError: undefined is not a function at render (bundle.js:73:13) at tryCatcher (/Users/jmendes/gitclient/react-static-site/node_modules/static-site-generator-webpack-plugin/node_modules/bluebird/js/release/util.js:16:23) at Function.Promise.fromNode.Promise.fromCallback

Does that ring any bells?

Use existing react-router setup

I have the following setup

export default {
  childRoutes: [{ 
    path: '/',
    getComponent(nextState, cb) {
        require.ensure(['./components/'], require => {
          cb(null, require('./components/').default)
        }, 'main')
    },
    getIndexRoute(partialNextState, callback) { 
        require.ensure([], require => {
            callback(null, {
                component: require('./components/home/').default
            })
        })
    },
    getChildRoutes(partialNextState, callback) {
        require.ensure([], function (require) {
          callback(null, [
            require('./page/route'),
            require('./Account/route'),
            require('./components/search/route'),
            require('./components/listing/route'),
            require('./components/view/route')
          ])
        })
    }
  }]
}

is it acceptable?

Rethinking Variables in CSS

This breaks down when you do a site update and you want your primary color to be blue instead of .green. Do you modify your CSS to make .green = blue or do you go around changing every style?

No, you would say the color should be called .primary or something like that which is exactly where Bootstrap and other frameworks ended up. That's why they have .button .button-primary as a typical style. The problems of course pile up when you need styles that have to make assumptions about certain DOM hierarchies. For example, you want a badge that floats right. That means it must be inside of a block element to work. This leads to the div-itis that bootstrap has become with a bunch of classes that you have to remember to put together in a certain order (.btn before .btn-default) but not on the same element as .float-right because that will mess with the text inside.

Just some thoughts...

Mathematical Web Typography

The breadcrumb navigation on this page and other blog posts doesn't work as one would expect.

Pagination

Static Site Generation with React and Webpack

It would be really great to see this updated to work with React Router 1.0.0.

I have been trying to go through the exact same setup as you mentioned in your guide but havent been able to figure it out with react router 1.0.0.

Just a suggestion.

Thanks

Static Site Generation with React and Webpack

Love this tutorial, but I'm running into issues due to the newest react-router 1.0.0.

I'm still new to React, so I'm trying to figure out how to re-write this part, but with react-router 1.0.0:

// entry.js
var React = require('react')
var Router = require('react-router')
var Routes = require('./Routes.jsx')

module.exports = function render(locals, callback) {
  Router.run(Routes, locals.path, function (Handler) {
    var html = React.renderToStaticMarkup(React.createElement(Handler, locals))
    callback(null, '<!DOCTYPE html>' + html)
  })
}

Their docs just show that you use React.render(<Router routes={routes}/>, el) but I'm not sure if the React.render callback function is going to function like the Handler you use in your write-up.

Sorry, if this is a dumb question. I just can't seem to find anything online to help.

Static Site Generation with React and Webpack

Hi there, Thanks for the tutorial! When using the safeStringify function I got:

ERROR in TypeError: Converting circular structure to JSON

Root.jsx

var React = require('react');
var Router = require('react-router');
var RouteHandler = Router.RouteHandler;
var Header = require('./Header.jsx');

var Root = React.createClass({
    render: function(){
        var initialProps = {
            __html: safeStringify(this.props)
        };

        return (
            <html>
                <head>
                    <title>{this.props.title}</title>
                </head>
                <body>
                    <Header />
                    <RouteHandler {...this.props} />
                    <script
                        id='initial-props'
                        type='application/json'
                        dangerouslySetInnerHTML={initialProps} />
                    <script src='bundle.js' />
                </body>
            </html>
        );
    }
});

// ERROR in TypeError: Converting circular structure to JSON
function safeStringify(obj){
    return JSON.stringify(obj).replace(/<\/script/g, '<\\/script').replace(/<!--/g, '<\\!--')
}

If I remove the safeStringify function and pass in this.props directly the app will compile and route between Index and About but throws an error in the console:

entry.js

// webpack will read this to build bundle.js
var React = require('react');
var Router = require('react-router');
var Routes = require('./Routes.jsx');

// only run client-side
if(typeof document !== 'undefined'){
    var initialProps = JSON.parse(document.getElementById('initial-props').innerHTML);
    Router.run(Routes, Router.HistoryLocation, function(Handler){
        React.render(React.createElement(Handler, initialProps), document);
    })
}

module.exports = function render(locals, callback){
    Router.run(Routes, locals.path, function(Handler){
        var html = React.renderToString(React.createElement(Handler, locals));
        callback(null, '<!DOCTYPE html>' + html);
    })
};

Static Site Generation with React and Webpack

Thanks for writing an article about this — really awesome topic. I've been going through the process of creating a fairly large static React site and had a few observations.

The static-site-generator-webpack-plugin is pretty awesome, but I ended up not using it for a few reasons:

Currently it doesn't work with the webpack.optimize.CommonsChunkPlugin, so this means that bundle.js will get quite large depending on the number of pages on your website. In my experience, the primary difference between single page apps and static sites is that static sites tend to have large amounts of code that might only be applicable on certain pages. That being said, it's unfortunate that a user has to incur the cost of downloading bundle.js for a page that could have only a single paragraph of text.

Another advantage of statically rendered sites that is lost with this approach is download speed.

<body className='p2'>
  <Header />
  <RouteHandler {...this.props} />
  <script
    id='initial-props'
    type='application/json'
    dangerouslySetInnerHTML={initialProps} />
  <script src='bundle.js' />
</body>

If the props are just a few strings it's not a huge deal, but if the props contain complex JSON objects, the user has to download a large chunk of data in the initial payload which can't be utilized until bundle.js is downloaded.

Due to the issue above, the user is downloading two copies of the critical css on each payload — once in a <style /> tag and once in a <script /> tag.

Finally, because the webpack entry needs to be run in node as well, a good deal of webpack functionality is lost — any resolve configurations, CommonsChunkPlugin, and a few others.

The code I ended up writing to avoid these issues isn't as pretty as the approach described in your post, but now that I have the final output I want, I'm hoping I can optimize the build code.

Let me know if you have any thoughts on some of these issues — I probably spent way to long trying to solve some of them :)

Rethinking Variables in CSS

This idea works well for a single site. Here's an example where this approach is scaled and will not work:

Example:
.btn-primary is green, and .btn-secondary is blue, we have 2 brands (A & B) sharing the same markup yet with different themes. Brand A wants a green primary button, brand B wants a blue one.

Static Site Generation with React and Webpack

http://jxnblk.com/writing/posts/static-site-generation-with-react-and-webpack/

The site looks super clean, but the aesthetics shouldn't override the usability. The code blocks lack highlighting, and make it really hard to parse.

Also although the tutorial is very well-writhing, having a git repository would be very helpful. A lot of us want to just see the finished code in the end.

Thanks for the post!

Ge

Static Site Generation with React and Webpack

An alternative solution is to generate static website pages and routing based on the list of React components in a specific folder. For example:

/src/app.js
/src/components/*.js
/src/pages/index.js
/src/pages/articles/index.js
/src/pages/articles/some-article.js

will be compiled into

/build/app.js                        - common chunk of the application bundle (code splitting)
/build/index.html                    - pre-rendered HTML page (good for SEO)
/build/index.js                      - an additional chunk just of the index.html page
/build/articles/index.html
/build/articles/index.js
/build/articles/some-article.html
/build/articles/some-article.js

And the compiled application bundle will contain all the routing information for these pages.

app.js will contain only common chunk of the application bundle, and when user browsers the site additional chunks are loaded asynchronously so the site works as SPA and at the same time you don't load everything upfront into the browser.

Here is an example: https://github.com/koistya/react-static-boilerplate

---

Follow me on Twitter or GitHub

Static Site Generation with React and Webpack

Hi I trying to follow your article but there are some errors to build one.

1. This bug is because in entry.js "renderToStaticMarkup" is in react-dom/server now. I solved it

ERROR in TypeError: React.renderToStaticMarkup is not a function
    at render (bundle.js:62:21)

2. For this error, I have no clue how to solve it. The error points to bundle.js not the original code so I don't where and how to debug?? Hope to get some feedback. Thank you!!

ERROR in TypeError: Cannot set property 'exports' of undefined
    at Object.<anonymous> (bundle.js:62:17)
    at __webpack_require__ (bundle.js:30:30)
    at bundle.js:50:18
    at bundle.js:53:10
    at webpackUniversalModuleDefinition (bundle.js:3:20)
    at bundle.js:10:3
    at ContextifyScript.Script.runInContext (vm.js:37:29)
    at ContextifyScript.Script.runInNewContext (vm.js:43:15)
    at module.exports (/Users/juby/code/react-static-site/node_modules/eval/eval.js:69:12)
    at Compilation.<anonymous> (/Users/juby/code/react-static-site/node_modules/static-site-generator-webpack-plugin/index.js:42:22)

Static Site Generation with React and Webpack: Rendering to Document Error

Invariant Violation: You're trying to render a component to the document but you didn't use server rendering. We can't do this without using server rendering due to cross-browser quirks. See React.renderToString() for server rendering.

When attempting to render to document. This presents a problem, because it's suggesting we render to something /inside/ the dom, be it body or a generic div. If we use a dom element as the anchor, then naturally we can't use your Root (the component that wraps <html> around all other components) for client side rendering.

Zero-Configuration React Static Site Generator

Hello there,

It was a very good initial step by step understanding to generate the html via react components using jsx.

I am successful in creating and generating one html via multiple jsx files; now my curiosity is to make it work for a full fledged website and thinking of single page web applications and compatible with mobile and doing responsiveness.

Any other tutorial or code reference which you have in which this points are covered.
(I am already on it to explore it but require some reference)

How are you passing props to the root component?

I have been trying to wrap my head around this but can't seem to get it.
In data.js, you build the post meta-data and everything and export a data object.

How and where is that data object passed as props to any of the components you are using?
For example, I can't find anything like this:
render() { return <Posts posts={posts} /> }

Has this got something to do with data being passed to the plugin:
new StaticSiteGeneratorPlugin('bundle.js', data.routes, data)

Unit testing UI

I like that concept a lot. I think given that React components and styles are nearly all in JS, with npm, there's no reason why we can't start running tests against them and validating patterns.

If you think about design, a lot of designers are influenced by other designers work right? The old saying, "Great artists steal"? So if we take this statement to be true, wouldn't that criteria call for pattern recognition? Considering we're moving more and more toward Machine Learning and AI. It could be the case that patterns are automatically created from what people think is good design, high conversion, etc.

If there's a landing page with a headline and image laid out in a certain way, a UI test could model that structure using Machine Learning and give it a score. The score could then be used against a component that would need to align with that same model in order to pass. For example, the CSS would need to match how the Headline and Image look. The margins, padding, etc. Then the test would pass.

If this approach was actually possible, you could have a test framework, based on taste using Machine Learning. For example, components with certain colors, spacing, layout could all fit a particular theme that is modeled continually using Machine Learning. All tests would fit this taste and allow you to "Steal" those influential design patterns.

Isn't that how designers are mostly coming up with what looks good vs bad anyways? They have hypothesis about what works and what doesn't.

Thoughts?

Static Site Generation with React and Webpack

Other than API changes introduced from package updates, do you still endorse this method? I've been building a small site in react that really should be compiled to flat HTML for production. It's based create-react-app.

I'm almost at the point where I'm ready to go live, so I'm researching all the options available.

Thank you.

Generating Color Palette Documentation from CSS - parse-css.js & parse-colors.js

Might be tripping, but it looks like you introduce the parsing module as parse-css then refer to it as parse-colors afterwards.

Static Site Generation with React and Webpack

Nice tutorial. I really like to see this tutorial with the version 2.0 of React-router :)