Latest Posts

  1. Smart Mistakes Are the Worst

    Tuesday, May 22 2018

    When writing bad code, playing smarter sometimes gives the worst results.

    Read More

  2. How to wrap a web REST API

    Wednesday, Apr 4 2018 in java

    When calling into a third-party REST API, it’s OK to define high- and low-level operations, and leave out the middle.

    Read More

  3. Lone Heroes on Software Projects

    Sunday, Mar 25 2018

    On a software project, communicate to colleagues, managers and clients when you’re in trouble:

    Read More

  4. Bit Twiddling

    Monday, Mar 12 2018 in mathematics

    Bit operations preserve De Morgan’s laws. Bit values are sequences of symbols. What makes them behave like booleans? Where does the essence of a boolean lie?

    Read More

  5. Validate like a Native with React

    Sunday, Feb 25 2018 in react javascript

    Validating a form doesn’t always require a lot of code. With HTML5 constraint validation, you can describe form validation rules with HTML attributes on the form fields.

    For example, to enforce that an <input> element should not be empty, add the required attribute to the element:

    <input id="name" name="name" required/>
    

    You can use HTML5 constraint validation even with React. Let’s look at an example.

    Read More

  6. How to turn an HTML form into JSON

    Saturday, Feb 24 2018 in javascript

    To send data from an HTML form to a JSON API, you can extract all the form data in one go with form-serialize.

    Read More

  7. React and refs, an eternal love story

    Tuesday, Feb 20 2018 in react javascript

    As in our previous exercise, we want to get the DOM node for a form component to validate the form with the HTML constraint validation API.

    Since React 16.3, we can store references to DOM nodes with React.createRef(). Let’s repeat the exercise with the new API.

    Read More

  8. React, forms and DOM nodes

    Monday, Feb 19 2018 in react javascript

    To validate a form with the HTML5 constraint validation API you need to call .checkValidity() on an actual <form> DOM node. With a custom React form component, how would you access the constraint validation API inside a parent component?

    Read More

  9. 3 Ways to Fine-tune Presentational Components

    Saturday, Feb 17 2018 in javascript react

    Here are three ways to make React presentational components work as re-usable building blocks.

    Read More

  10. React and the mysteries of this

    Friday, Dec 1 2017 in react javascript

    What’s going on with this in JavaScript and what does bind() do? Let’s explore how this behaves in JavaScript and learn why the React documentation recommends calling bind() on some methods in your class component constructors.

    Read More

  11. Introducing React Lifecycle Methods

    Wednesday, Nov 1 2017 in react javascript

    So-called lifecycle methods come in handy to change the default way React renders elements, like if you want to manipulate the DOM directly or compare the previous and the current props. In this post, we’ll examine three of the most common lifecycle methods. Since you can only use lifecyle methods in class components, let’s remind ourselves the difference between class and function components.

    Read More

  12. Three Steps to Learn React

    Saturday, Sep 16 2017 in react

    Have you looked at the React documentation already, but are still confused about how to go about building your first prototype? Try these steps on the path to React mastery.

    Read More

  13. 3 Web Servers for Frontend Developers

    Sunday, Sep 10 2017 in javascript

    Ever needed to quickly start a web server to check a few scripts you’ve been developing locally? Front-end developers don‘t need long complex set up: they can create an HTML file, include some JavaScript and open the file in the browser. But loading files directly from disk causes a few issues: absolute URLs like /mystyle.css don’t load correctly. And requesting any kind of assets via Ajax calls will fail in Chrome because of cross-origin security policies (scripts aren‘t allowed o load files from your local hard drive).

    Read More

  14. I did everything right… and npm throws EINTEGRITY errors!

    Saturday, Sep 2 2017 in javascript

    In my React book, I explain how to download your frontend project dependencies with npm; in this blog post I am going to explain how to recover from an oddball error that I’ve come across once or twice.

    Read More

  15. Make small React components

    Sunday, May 21 2017 in react frontend

    The more I experiment with React, the more I find small presentational components are the way to go. Take this markup for a panel component:

    Read More

  16. Create a Cloudfront distribution for an S3 website

    Tuesday, May 9 2017 in devops frontend

    The HTTPS protocol encrypts the data between your website and the browser; it makes it harder for third-parties to inject their content into your website and may boost search rankings. You can’t use HTTPS if you’re hosting a website on an S3 bucket on your own domain. To serve your S3 website with HTTPS, one solution is serving your website through the Amazon Cloudfront CDN.

    Read More

  17. 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

  18. 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

  19. 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

  20. 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