Personal site and blog with thoughts on design, development, and other things
jxnblk / blog Goto Github PK
View Code? Open in Web Editor NEWPersonal blog on design & development
Home Page: https://jxnblk.com/
Personal blog on design & development
Home Page: https://jxnblk.com/
Personal site and blog with thoughts on design, development, and other things
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.
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...
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"
}
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
Great article. I love the edits.
Why don't you use the browsers
option of cssnext instead of disabling some features by hand ?
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.
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 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
Hey Brent,
You still sold on the MacBook? Which model would you recommend?
I'm on the fence...
Cheers,
Jake
Might be tripping, but it looks like you introduce the parsing module as parse-css
then refer to it as parse-colors
afterwards.
The breadcrumb navigation on this page and other blog posts doesn't work as one would expect.
Did you mean: perceived?
http://jxnblk.com/writing/posts/static-site-generation-with-react-and-webpack/#why
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
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.
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?
Dig the updated /writing styles
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)
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 base1rem
can make spacing and alignment adjustments much simpler and help create a natural rhythm in the visual design.
So my question is:
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.)15/25.5px
, how would you approach it?Nice tutorial. I really like to see this tutorial with the version 2.0 of React-router :)
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)
<petpeeve>
VIM is not an acronym.
</petpeeve>
Hi I trying to follow your article but there are some errors to build one.
ERROR in TypeError: React.renderToStaticMarkup is not a function
at render (bundle.js:62:21)
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)
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
Since 1.0 react-router has removed RouteHandler:
https://github.com/reactjs/react-router/blob/master/upgrade-guides/v1.0.0.md#routehandler
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
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?
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.
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?
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.
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.
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
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 :)
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?
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);
})
};
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.
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 ?
✌️
Informative. Thanks.
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?
how well does this kind of a website is being crawled by google for indexing?
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.