サクサク読めて、アプリ限定の機能も多数!
トップへ戻る
画力アップ
www.jackfranklin.co.uk
March 4, 2024Exhaustive branch checks with TypeScriptIt's very common when working with TypeScript that you will have a type that declares a list of values, such as an enum or union type: enum SupportedColour1 { RED, YELLOW, BLUE, } type SupportedColour2 = 'RED' | 'YELLOW' | 'BLUE'And then you will often have functions that need to run differently or return different values based on what variant i
May 3, 2022Why I don't miss React: a story about using the platformJust over two years ago I left a role at a London based startup where I lead development of a large, React based e-commerce frontend to join Google to work on Chrome DevTools. My initial focus was to introduce Web Components as the new fundamental building block of all new DevTools features and UI. With the recently launched Record
March 9, 2021Comparing Svelte and ReactLast year I created Pomodone, a small time tracking application based on the Pomodoro technique of working in 25 minute intervals. It's a pretty basic app; it has a 25 minute timer (that runs in a Web Worker) and saves a history of your "poms" to a small Firebase database. I initially built it using React (well, Preact actually) but I then started to play aro
April 12, 2019The perfect unit testThere's a common theme I find with people who tell me that they don't find unit testing useful, and it's normally that they are writing bad tests. This is completely understandable, particularly if you're newer to unit testing. It's hard to write good tests and it takes practice to get there. All the things we're going to talk about today were learned the hard wa
January 28, 2019Configuring ESLint on a TypeScript projectWhenever I've used TypeScript in the past, I've set up TSLint as my linting tool of choice. However, I've always wished I could use ESLint instead, for a few reasons: I am more familiar with ESLint, and I know its rules better and have my preferred set of plugins.All the JS projects I work on use ESLint, so having all my projects use the sa
December 18, 2017Using React Fragments for the first timeReact v16 was a very exciting release for React, and included many new features. In the recent React 16.2 release, improved support for Fragments was announced, and it's this feature that I want to talk about today. The problem that fragments solveUp until React 16 each component had to return a single element: // will error class Demo exten
July 17, 2017Extracting Logic from React ComponentsIn the previous screencast we took a React component that was doing too much and refactored it, splitting it into two components that are easier to maintain, use and test. Although I'd recommend watching that video first, you don't need to have watched it to read this blog post. You can find all the code on GitHub if you'd like to run it locally.
February 13, 2017Context in ReactJS ApplicationsThere is a lot of confusion amongst React developers on what context is, and why it exists. It's also a feature that's been hidden in the React documentation in the past and, although it is now documented on the React site I thought a post on its usage and when to use it would be of use. The short answer is that you should very rarely, if ever use co
January 4, 2017Authoring and publishing JavaScript modules with FlowFlow is a static type checker for JavaScript which adds the ability to annotate our JavaScript code with extra information on what types we're expecting values to be, what types functions can return, and so on. Having done a lot of work in Elm, a language that is typed, I began to recently explore the popular options for adding ty
October 21, 2016Migrating to Webpack 2Webpack is on the verge of having its latest major version released, and it's expected to drop very soon. However, the main thing holding the release back is documentation, and the code is mostly written. I recently took the time to update our work project from Webpack 1 to 2, and thought I'd document the steps taken for anyone else who wants to make the move.
February 5, 2016Better bundles with RollupRecently I've been hearing a lot about Rollup, a new JavaScript bundling tool that aims to produce smaller bundling sizes through tree shaking, which is the process of taking an application and figuring out which code is actually used. Sam Saccone's cost of transpiling ES2015 repository also peaked my interest by comparing bundle sizes of popular bundling
November 23, 2015Elm for JavaScript DevelopersIf you follow me on GitHub or Twitter you'll have noticed that I've been doing a lot of work with Elm recently. Elm is a new language aimed at making it easier to build more robust, complex applications. It compiles to JavaScript but shares very little in common with the language, and its syntax will look familiar to anyone who's worked with Haskell. I
March 1, 2015Writing Command Line Tools with NodeBack in August 2012 I wrote a post on building a command line tool in NodeJS. That post is now over two years old and plenty has changed, hence I thought it worth writing a new post building the same tool, showing how I'd do it now. We're going to build the same tool, one that's used to search a directory for files that match a given string. This is
December 23, 2013JavaScript Getters and SettersFor the most part, in JavaScript, what you see is what you get. A value's a value; there are no tricks. Sometimes however, you want a value that's based on some other values: someone's full name, for example, is a concatenation of their first and last names. If you have a person object, and you want the users of that object to be able to set the full,
October 7, 2014Slides from "An introduction to ES6"I had the pleasure last weekend of speaking at Epic FEL, a single day, single track conference in the heart of London, run by Made by Many. They did an absolutely fantastic job and if you are ever in London, I recommend their monthly Front End London meetup too. I spoke on introducing ES6, a topic that I've been writing and speaking about more and
The refactoring tales was a collection of articles about refactoring JavaScript applications that I put together many years ago with the eventual aim being to put them together into a book. Unfortunately that plan never materialised and the content now is rather outdated and not something that I'm actively working on. I don't recommend it as learning material now simply as so much has changed in t
July 22, 2014An introduction to ES6 classes.SupportES6 support varies across environments and platforms, implementations get updated all the time and it's important to also note that the spec is in draft, so everything below has the potential to change. I recommend using The ES6 Compatability Table to see the current state of affairs. TraceurAll the code examples seen in this post were run through
August 19, 2013Mocking API Requests in Node testsRecently I sat down with my Pulldown Project, aiming to rewrite the tests. The problem with them was that they were network dependent. Each test would hit the real API and download the real file. This was not good for a number of reasons: I couldn't run the tests without an internet connectionthe tests were slowthe tests were unreliable, they would
June 3, 2013Refactoring DOM Heavy JSOne of the things I've been getting more into recently is refactoring. It's something that is heavily talked about in the Ruby world, but seems to be a bit less so in the JS world. In this post what I've done is write some of my own (crappy) JavaScript for some simple JS tabs, using bad habits and code smells. I'll then look at how, if I was new to this code, I
August 17, 2012Writing a Command Line Node ToolToday we are going to combine a few different tools and create a simple Node package that will allow a user to search a directory for files. In this tutorial we will use Grunt to do a lot of the work for us, see how to to make a Node script executable on the command line, and finally see how we publish it to the Node Package Manager (npm) so anyone ca
July 30, 2012Introduction to RequireJSIn this tutorial we are going to take a look at RequireJS, an AMD compatible asynchronous script loader that is incredibly powerful. In my experiments with RequireJS I've hugely enjoyed working with it and will be using it heavily in my future development. This is a fairly heavy post as far as complexity goes, but please do stick with it. I struggled to get my
April 30, 2012Node.js: A Todo App with ExpressSo last time we installed Node & did the traditional "Hello World" example with Node & then using the Express framework. Today we're going to make a simple app using Express from the beginning. We will generate the app with Express & then explore Express further, including Unit testing. This will most likely be a multi-part tutorial. The app we're buil
April 27, 2012A jQuery Plugin with Grunt & QUnitToday we're going to take a look at writing a jQuery plugin. There's a number of different ways to go about structuring jQuery plugins & hence a lot of tutorials differ. I'll show you how I would do it but also show examples of how others would do it & link you to alternative views. Along with developing the plugin, we will test it with unit test
April 25, 2012Beginning Node.jsUnless you've been living under a rock for the past 12 months or so, you've probably heard of Node.js. Simply put, Node is JavaScript on the server. Node.js is a platform built on Chrome's JavaScript runtime for easily building fast, scalable network applications. Node.js uses an event-driven, non-blocking I/O model that makes it lightweight and efficient, perfect fo
April 23, 2012Exploring Backbone: Part 1Backbone.js is a framework that lets us structure our applications using a pattern similiar to MVC (technically Backbone is not pure MVC as the C stands for "Collection"). However, Backbone is a powerful system to use when creating apps that are beyond very basic. When passing & manipulating a lot of data, you should consider using something like Backbone. S
April 19, 2012Grunt, a JS Command Line ToolGrunt describes itself as: Grunt is a task-based command line build tool for JavaScript projects. It was released very recently and is authored by Ben "Cowboy" Alman and lives on the Github Repository. In this tutorial I'm going to be going through the basics of Grunt, how to install & use it. I will only cover basic usage today, with a follow up post pla
April 16, 2012Scope and this in JavaScriptToday I want to talk a little about scope in JavaScript and the this variable. The idea of "scope" is that it's where certain functions or variables are accessible from in our code, & the context in which they exist & are executed in. If you've ever seen someone do something like: function someFunc() { var _this = this; something.on("click", function() { c
This blog post discusses my recent experiences as a Tech Lead and getting comfortable with admitting when I don't know something. After working with React for over five years, I was nervous about moving on and not having its power and features available to me. It's ended up being a pleasant experience.
April 14, 2012Testing with QUnit: Part 1Recently I was asked on Twitter to do a tutorial on QUnit, a JavaScript Unit Testing framework, and the one used by jQuery. What I wanted to do however, is use it with a real project, rather than set up some fake project. So, I've done just that. Having worked with the Instagr.am API recently, I'm going to use this series of tutorials to write a JavaScript w
次のページ
このページを最初にブックマークしてみませんか?
『www.jackfranklin.co.uk』の新着エントリーを見る
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く