Latest Posts

  1. Long term caching with webpack and templates

    Saturday, Apr 22 2017 in frontend

    Far future expiry on your CSS and JS resources ensure visitors load them from cache as often as possible, improving page speeds and reducing bandwidth costs. But it can be complicated to force visitors to load a new version before the old one expires. CDN amplify the issue. When you distribute your assets to a CDN like Cloudfront, the CDN servers all over the world only request a new copy when the assets expire.

    Read More

  2. MobX gotchas

    Friday, Apr 14 2017 in react javascript

    To decide which technologies to cover React book, I’ve developed the same example with Redux and MobX. While I ended up with less code with MobX thatn with Redux, I’ve found out that structuring an application with MobX still requires rethinking your data structures compared to a plain React application. get() and set() everywhere One advantage of React is that you can think about each component separately. Define the props that you need for a section of the interface and you’re good to go.

    Read More

  3. Taking Glimmer for a ride

    Saturday, Apr 8 2017 in javascript

    Glimmer is a JavaScript library to create user interfaces for the web that’s been launched last week at EmberConf. The big differentiating factor is that it’s the same engine that’s used in the Ember framework. While Ember includes a router and a model layer, Glimmer just defines a way to update the UI when the data changes. As one example in my React book is a word counter, I tested Glimmer by building word counters with other frameworks.

    Read More

  4. Is React hard to learn?

    Monday, Apr 3 2017 in react

    Paradoxically, React might feel more difficult at first than other frameworks because it is simpler in the sense that it uses more general, less ad-hoc mechanisms. The Vue documentation is amazingly well-written. But I suspect Vue sometimes feels easier because each concept that you need to build an application with Vue.js maps explicitly to a part of the Vue.js API. For example, the UI is not just the return value of a function; it’s labelled template in the actual code that you write.

    Read More

  5. Test many npm packages at once with Lerna

    Monday, Mar 27 2017

    If you develop multiple JavaScript packages, and you already use npm scripts to automate your tests in each package, Lerna can help you run the tests for all packages. When you tell Lerna to run a script, Lerna reads the script definition from the package.json file in each directory, so Lerna runs the right script even if you define it differently in different packages. That’s very useful, for example to test all packages at once with a single lerna run test command, even if test is defined differently in each package.

    Read More

  6. Comparing CSS in JS solutions

    Tuesday, Mar 14 2017 in react

    After testing a few CSS in JS solution, I have found these criterias useful to help me decide which to pick: whether they generate inline styles or a separate stylesheet whether they require to define class names whether they supply a helper to create a new component from just a style definition In a React application, defining styles with JavaScript allows you to store style definitions in the same place as your React components and easily modify the styles in response to props or user actions.

    Read More

  7. A math editor with React and Katex

    Thursday, Mar 26 2015 in react

    Most websites use LaTex to let users input mathematics. We are going to see how to build a LaTex input widget with React. Two JavaScript libraries can transform LaTex input into proper mathematics: Mathjax and Katex. I chose Katex for this demo because it works out of the box as a npm package. Usually, Katex scans the whole document to find latex strings to convert. We instead wish perform the conversion inside a React component as the user types.

    Read More

  8. Null event properties in a React callback

    Friday, Mar 20 2015 in react frontend

    When you use setState with the new (in React 0.13) callback argument, all the Event object properties are null inside the callback. How can you update this.state based on the value of the event target? handleEvent(event) { /* Fails! event.target is null */ setState(function() { return {text: event.target.value}; }); } <input onChange={this.handleEvent}/> The easiest workaround is to extract the information you need from the event outside the callback: handleEvent(event) { var text = event.

    Read More

  9. React analog clock

    Sunday, Mar 1 2015 in react

    The ractive.js website has this demo of a beautiful analog SVG clock. I wanted to replicate the fuctionality in React. The markup is exactly the same, but we have subdivided the application into a React component for the digital clock face. Here is the final React SVG analog clock.

    Read More

  10. Integrate jQuery UI autocomplete and React

    Friday, Feb 27 2015 in react

    You can integrate jQuery UI widgets and React by taking advantage of React lifecycle methods. React will call a component function named componentDidMount after it creates the markup corresponding to the component. In this function, you can access the markup that React has created directly and modify in any way that you want, before anything else happens in the application. Therefore it is the ideal place to initialise the jQuery UI autocomplete.

    Read More

  11. React without JSX, part 2

    Saturday, Feb 21 2015 in react

    In part 1, we have seen that JSX has a simple JavaScript equivalent and that you can use React with just plain JavaScript. Now, let’s make the code more concise. React defines helper functions to create common HTML tags in the React.DOM namespace. For example, React.DOM.div, React.DOM.ul, and so on. These functions take a variable number of arguments. The configuration object is always the first argument and all the next arguments are the child elements.

    Read More

  12. Code linting with webpack and JSHint

    Wednesday, Feb 11 2015

    In this post, we are going to configure webpack to automatically check your code with JSHint with each build. First of all, you need to install the jshint webpack loader. Assuming you are using npm, type npm install jshint-loader in your project directory. This should download jshint-loader into your local node_modules directory and make it available to webpack. Now let’s look at how to configure the webpack JSHint loader. If you want to check your code before any transformations are applied (for instance, because you do not want JSHint to check code generated by a transpiler) you should configure JSHint as a preloader.

    Read More

  13. Can you use React without JSX?

    Monday, Feb 2 2015 in react

    That XML which appears to be mixed with JavaScript puts React newcomers off. This XML-like syntax is called JSX. Can you use React without JSX? You can, and it is easier than you imagine. I’ll show you how into this two-part series. First, we need to make something clear: JSX is not XML. Before you deploy your React.js code, you usually use the react-tools package to transform the source into plain JavaScript.

    Read More

  14. ES6 classes as React components

    Friday, Jan 30 2015 in react

    The upcoming JavaScript standard, commonly referred to as ES6, will introduce a new syntax to define classes. With React 0.13, you can do without React.createClass and define components with plain functions. You can use ES6 classes to smooth the component definition process. Let’s see how it works. The React functionality is available in the 0.13 beta. Of course, ES6 classes are not implemented in any browser yet, so you will need a transpiler.

    Read More

  15. FixedDataTable React.js tutorial

    Thursday, Jan 29 2015

    Recently, Facebook has released FixedDataTable , a library to build data tables with React. I tried it out to see how it stacks up against the alternatives. For reference, I have used DataTables, one of the most popular JavaScript table libraries. Setting up the table Creating the table is simple. You just compose and render the Table React component. You pass the data to the table through a rowGetter prop.

    Read More

  16. Uploading a directory to Amazon S3

    Wednesday, Jul 30 2014 in devops

    If you want to translate a directory structure on a disk to Amazon S3, you need to use the file path as the object key for the file. For instance, if you want to obtain the path /bar/foo/baz.jpg, you need to store ‘baz.jpg’ with an object key of ‘bar/foo/baz.jpg’. In the administration console, it is possible to create “folders”. There is no such thing in the API. Amazon has decided to introduce this concept in their interface.

    Read More

  17. Automated deployment

    Thursday, Jan 24 2013

    Recently, I’ve had to work on an application where, for reasons that are best glossed over, a lot of the business logic resides in the Apache configuration. This requires continuously updating a fairly complicated set of mod_rewrite configuration. The configuration needs to be installed on the test server and Apache itself restarted in order to test again. This is not terribly time-consuming, but repeating the over and over can become wearisome and above all, tempt you to modify the Apache config in place instead of keeping all changes under version control.

    Read More

  18. Computing’s layer cake

    Monday, Jan 21 2013

    There is the ISA, an abstraction built on top of the physics of the materials out of which electronic calculators are built. From the standpoint of the application developer, the ISA, this incredibly powerful abstraction, is a meaningless mechanism. Its concepts, its meaning and its purpose are the fruits of further abstraction. So, in a computer at least, abstraction is a relative concept. One could fend off accusations of abstract thinking in more general matters by pointing out this fact.

    Read More

  19. Scraping ISO country codes with Nokogiri

    Wednesday, May 9 2012

    The ISO country codes are used in many business settings to identify the countries of the world: for instance, to indicate the destination of a shipment. ISO makes the two-letter codes available for free, but the three-letter and the numeric codes are jealously guarded and even if you pay you will not receive them in a very friendly format (only PDF and Microsoft Access are available). Wikipedia has got a table containing all the ISO country codes you will ever need, so I have decided to write a little script to extract the ISO country codes from the web page.

    Read More

  20. Simple Java builds with SBT

    Wednesday, May 2 2012

    SBT is a build and dependency management tool written in Scala. When I need to quickly setup a project with some dependencies, I often use SBT, because setting up a simple build is very easy and takes much less typing than with Maven. There are also a couple of other advantages with SBT, namely: sbt automatically recognises your application’s main class and can launch the application just by typing sbt run (no need for a plugin like the Maven exec plugin just to run the application).

    Read More