Demo: download button here for laptop and desktop Background There is an issue with Barrister Admission Bundle I have wanted to solve for some time. I wanted to make a website where users (pupil-barristers) could enter all required information at once, and then download a Word document. The Word document would have all the information in the right place. But it also needs to be modifiable (as users probably have their own style preferences)....

I fell in love with the technology of CSS recently, having obsessively followed a YouTuber (and CSS guru) called Kevin Powell. One of the articles that Kevin recommends is the Dao of Web Design. In essence, the article argues that web as a medium is fundamentally different from printed media because the layout of a webpage has to work on so many different devices: mobile phone, tablets, laptops, Desktops And also on different browswers with customisation such as dark reader or screen readers....

Kevin Powell points out that people (certainly me!) tend to be too impatient with CSS. They assume it is a “simple” technology and just resort to looking up answers on Google as they go along, without trying to understand the undelrying principles. But paradoxically in CSS more than in (say) Javascript, fundamentals matter even more. The layout of a web page differs from device to device and from browser to browser....

Quick test: what do these code snippets do? const a = new Promise(function (a) { a }) const b = new Promise(function (b) { b("success") }) const c = new Promise(function (a, b) { b("failure") }) const d = Promise.resolve("success") const e = Promise.reject("failure") const f = new Promise(function (a, b) { a("success") b("failure") }) const g = new Promise(function (a, b) { b("failure") a("success") }) const h = new Promise(function (a, b) { throw new Error() }) const i = new Promise(function (a, b) { a() }) const j = new Promise(function (a, b) { b() }) const k = (number) => { return new Promise(function (a, b) { a(number * 2) }) } Check by opening the console in your browser and test with e....

Ask Your Developer is Twilio co-founder Jeff Lawson’s advice to Businesses looking to survive and prosper in the digital age. In short, Jeff argues that: (1) Businesses need to embrace technology (esp. web technology) to compete; (2) Rather than buying them ready-made (e.g. from a consultancy), businesses do better by buying “software parts” and assemble a custom solution. For example, Twilio excels at providing tools for integrating mobile phone text-messaging to software programmes; Cloudfare specialises in protection from DDOS attacks....

I recently came across a situation where I was fetching information from a RESTful API. After some intermediate steps, I ended up with an array of objects, all of which have the same set of attribtues (e.g. including an id). I wanted to have a way of printing a list of ids of the objects, e.g. let attribute = id array.map(object => <li> object.attribute </li>) But this didn’t work. It took me a while before I realised what I needed is instead:...

Historical accident The answer seems to be historical accident, not intentional design. Back in the old days, Netscape advocated event capturing, while Microsoft promoted event bubbling. Both are part of the W3C Document Object Model Events standard (2000). – Arun P Johny If this is correct, the events of the browser wars in the 1990s are still shaping Javavscript into the 2020s! In a way, this is unsurprising: backwards compatibility is important, which means features are often in a way that seem inelegant in hindsight....

I ran into a small bug today. Following a tutorial, I added an anonymous function as the second argument to my window.addEventListener, i.e. window.addEventListener("popstate", () => console.log("hello world")) I then struggled to remove it with window.removeEventListener("popstate", () => console.log("hello world")) At first I tried to solve it with studying in detail the documentation for window.removeEventListener. But soon I changed track: how can I find out what Event Listeners there are in my DOM (or in my window object)?...

MDN documentation on Array.prototype.sort() says of the the optional CompareFn, A function that determines the order of the elements. The function is called with the following arguments: a The first element for comparison. Will never be undefined. b The second element for comparison. Will never be undefined. It should return a number where: A negative value indicates that a should come before b. A positive value indicates that a should come after b....

My answer is no. The attention economy has closed off a route that was available as recently as a decade ago. Background: I came across an unusually patient and helpful answer by adsy on StackOverflow, which led me to this article. After reading it, it struck me that the way people first experience computers and programming has transformed in the last 20 years. adsy got into programming the early 2000s. The dot-com bubble had burst....