Posts

Showing posts with the label JavaScript

New blog domain: kula.blog

It's still work in progress but new posts will be published on  https://kula.blog/ Thanks to 11ty base blog RSS is working from the start so it should be easy to add to your reader if you still use any :) If now then I hope you can sign up to the newsletter where I'll be publishing new posts and interesting articles to it from time to time. Please use  kula.blog  from now on.

I've spent an hour debugging XSRF error because of ... fetch

Image
Photo by Tim Gouw from Pexels Yesterday we were working on a new subpage with a form. Let's use the new `fetch` API to make POST requests seemed like a good idea but we started getting errors from the server: ` HTTP 403: Forbidden (XSRF cookie does not match POST argument)` Header `X-XSRFToken ` was set, we tried passing value in the body, setting token in the template, setting it in the backend only in certain cases but nothing helped. Finally my coworker found out that we're not sending `_xsrf` cookie with the request at all so it generates a new one every time... Turns out fetch doesn't send cookies by default. It's by design:  https://developer.mozilla.org/en-US/docs/Web/API/Fetch_API/Using_Fetch The fix is incredibly simple: tell fetch to include credentials in the options: ``` fetch("/someURL/", {     method: "post",     headers: {        "X-CSRFToken": token     },     credentials: "include" }); ...

Book Review: Secrets of the JavaScript Ninja John Resig and Bear Bibeault

Image
I bought this one a year ago, but there was always something easier to read so I procrastinated. This year I had a problem with getting internet connection in Spain so it was convenient to read something on paper. Book is directed to advanced JavaScript programmers and it is going to be hard for junior programmers. Some parts were hard for me as well and last three chapters (Master Training) was just  complicated code samples with an only high-level overview. The best part of the book are chapters 9-12 (Ninja Training). I would expect most of the book to be at this level and with this kind of elaboration. The rest of the book was too easy or too complicated. I have expected more from the book. Differences between old IE browsers and W3C compatible ones fill most of the chapters. Authors argue many times it is more important how to do things than what actual examples, but I would prefer something more interesting. It's a good read, but you have to know a lot about JavaScri...

Convenient Node Debugger Run by NPM

Image
If you read installation instruction of node-inspector you would think that the only way to use it is to install it globally. Here I want to suggest embedding it in the project. Installation: $ npm install -g node-inspector $ npm install node-inspector --devDependencies After doing that, you need to add "debug" line to "scripts" part of  package.json "scripts": { "start": "node app.js", "debug": "./node_modules/.bin/node-debug app.js" } And run it: $ node-debug app.js $ npm run debug It has downsides, that is obvious, but in my opinion it has also big advantages.  New person on the team does not need to follow long readme of global modules to install - and remember how all of them are supposed to be run. Another advantage is ignoring all the problems that you may have with sudo (needing it to install anything global). In my opinion it is also simpler and more convenient. All commands ...

Book Review: Foundation HTML5 Animation with JavaScript by Billy Lamberta and Keith Peters

Image
When I first asked about it on gamedev.js group . Michal Budzynski  was discouraging me from this book, especially because of code quality but added that there are some good theoretical things to read about. I was brave enough to decide to ignore code quality all the time and only look at animation and theoretical ideas in the code. It took me a couple of months to start reading it, then a couple of months to digest it. Sometimes it was really much more about Math than JavaScript. My edition has many bugs in code samples so it was fortunate all examples are live on github pages:  http://lamberta.github.io/html5-animation/ . You can find even some extras :) After reading this book I can't say I'm right now animator, or that I know 3D. For sure it helped me think about many animation related topics. I found myself using things like easing from time to time in places I wouldn't think of before. For me it was really good reading. I know more about animations, exam...

Mobile HTML5 by Estelle Weyl

Image
Mobile HTML5 by Estelle Weyl Book "Mobile HTML5" is really good. I have heard about it last year at Front-Trends conference and I'm glad because of this. It's really good for beginners and intermediate developers.  Estelle Weyl reminded me that mobile HTML5 is 95% just HTML5. You can treat this book as a reference of various mobile quirks especially if you need to support something else than only newest Safari on iPhone.  If you are interested in HTML5 but mostly how to use it in mobile browsers this book is for you. It covers every aspect of mobile web development so you can read about CSS3, JavaScript and even some basics of DevTools.  Rating: 8/10 

How to use github pages for optimized static website or game

Image
Last week I have read post by Andrzej Mazur about hosting games on github pages and as this post covers things that were new to me I have recently found some nice tricks that can help with while working on these pages more effectively. Source:  http://enclavegames.com/blog/2014/02/02/host-your-html5-games-on-github-pages/ Now, what I mean? To use github pages you must create new branch on github called gh-pages so you have to options: delete master and use only gh-pages push to gh-pages from time to time but work on master Both have it's strong and weak points. 1: Working on gh-pages alone is easier but you will struggle to add any build process so you have to use unoptimized resources in your game. 2: You maintain some kind of optimized version of a site or game in gh-pages branch and use master branch as src. Downside of this approach is that you need two folders cloned from the same repository on disk and force build script to know about external directory ...

Gulp Express Nodemon

Image
For our Express.js Node.js page we started using Gulp.js for building static assets but we needed to run gulp to build them, and it wasn't easy to remember to do that before commit (right now we have min files in repository). For development we are using nodemon to restart the app on every change so I thinked how to integrate nodemon and gulp. First obvious answer I found was gulp-nodemon  but it was really buggy and I had no idea why it's not killing server and trying to run new one all the time. I have even created issue about that, more to seek for help than having any idea what is wrong. // Gulpfile.js var gulp = require ( 'gulp' ) , nodemon = require ( 'gulp-nodemon' ) gulp.task('nodemon', function () { nodemon({ script: 'app.js'}) .on('restart', 'default') }) After a couple of days I started from scratch but I have new idea, I need to ignore files that I'm building with gulp so that I'm...

Gulp.js

Image
Recently we started looking for a nice tool for building client-side parts of our project and after looking into couple of projects we find really interesting one called Gulp. There is really nice presentation about it:  http://slid.es/contra/gulp Or you can read getting started guide:  https://github.com/gulpjs/gulp/blob/master/docs/getting-started.md#getting-started I found out that phaser-generator project recently switched to gulp and the same buildfile look much more readable and like code instead of big JSON like in Grunt. I'm not sure yet about it but I like how it look like and I like metaphor of pipes that Gulp is using.

Animate in JavaScript or CSS?

Image
There is really good article trending right now about animations by the author of GreenSock Animation Platform Jack Doyle about tradeoffs of both JavaScript and CSS animations. Myth Busting: CSS Animations vs. JavaScript The really good thing about it is that you can read really good explanations about how animations work, what problems you might have and when it might be better idea to use CSS and when JavaScript. It is really impressive how much information this article contains.

PL: Learn HTML5 Canvas Game Development

Image
Recently I found really awesome course (in Polish) to learn Canvas and basics of Game Development even for novices. Course is in polish but is really long and covers Canvas and even JavaScript from the basics, some of them was really really well explained and I finally understood them :) http://kursownik.pl/kursy/html5_canvas/ Author Daniel Mizieliński put much effort into this. Whole course takes nearly 16 hours divided into 71 videos. Little hint: on youtube you can change speed of video 1.5 is still easy to understand and follow especially if you know JavaScript and you can always switch to 1.0 speed on new things :)

ES6 Promises

Image
Really good post about ES6 Promises at html5rocks:  http://www.html5rocks.com/en/tutorials/es6/promises/  by Jake Archibald. You can learn both what promises are and how they fit into ES6 and DOM. Worth reading.

Javascript Game Foundations - Ten Essentials

Image
Recently Jake Gordon finished last article of his  Javascript Game Foundations - Ten Essentials  and I think those 10 articles with posts about games he created is really good place to learn more about games and how to create them in JavaScript. I'm planning to read them all soon. Right now I'm: reading  http://gameprogrammingpatterns.com/  (at least one chapter a week)  watching  http://kursownik.pl/kursy/html5_canvas/  (beware it's in Polish :) Anyone knows something like kursownik.pl canvas course but for WebGL? Matrix Math? OpenGL maybe? But in POLISH? I think I would learn them faster in polish :)

October Update - Code & Node.js in Action

Image
Short update from last month and my plans for November. Books: Code: The Hidden Language of Computer Hardware and Software by Charles Petzold This book was first published in 1999 but story and code that it teaches is still relevant today. This book is just everything I always wanted to read and know about computer hardware and software. This is really a missing link that unifies all different subjects I know about both hardware and software. Book is mostly really easy to read, and creates a story and builds up knowledge in a reader with every chapter. I think is is one of the must read book for every programmer! :) Rating: 10/10 best book on a subject I have read. Lean UX. Applying Lean Principles to Improve User Experience By Jeff Gothelf Another book about Lean principle in software development, this time how to make design team part of Agile and how to make them Lean. In my opinion the best value of this book is in stories that Jeff have from forcing Desi...

August Update: Canvas + Fantasy

Image
This is short update as I'm really busy recently and it looks will be till mid-October. Tech: HTML5 Canvas Tutorial by Eric Rodwell   - really good site! Strongly recommended! HTML5 Canvas Cookbook by Eric Rowell  - tutorial is better because interactive :) If you're going to run all code samples and play with them then it makes sense to buy it. Of course buying this book is a good way to help author :) Clojure - Functional Programming for the JVM - unfortunately it is too boring for me, long and lacks any story/structure. Maybe good to easy find something you need by Ctrl-F. (No link because this is boring :) Non-tech: Painted Man - Petera V. Bretta. - rather good 6/10 The Battle for Skandia: Book Four (Ranger's Apprentice) by John Flanagan - good for lazy day :) - without image :)  short "How to read faster"  from personalMBA - really short and I knew most of it... The Eye of the World (The Wheel of Time, Book...

July Update - SICP, The Modern Web, Functional JavaScript

Image
This will be short update! Books that I will talk about on today's  ReadingClub : SICP Really good and hard book. Right now I stumble upon many ideas that I read in SICP in very different places :)  Most of it is around Functional Programming and Clojure but still. The Modern Web by Peter Gasston Really good book about newest API's. It's still fresh so it's worth to read it!  Paranormality: Why we believe the impossible by  Prof. Richard Wiseman Awesome book! It's great to see how I've been fooled :) Being Geek by Michel Loop I was disappointed by this one. It's mostly about geek being team leader or manager. I'm not so much interested in it.  Functional JavaScript by Michael Fogus I have really high expectations about this book but unfortunately I feel that I miss something in it. Probably context of me and author are too different. One of the ideas in book started to make sense to me while learning mo...

Last Month Update - Meet.js Krakow

Image
I want to give some update what I've done Books that I read: The Book of CSS3  by Peter Gasston Make: Electronics. Learning Through Discovery By Charles Platt (2nd chapter) Mixu's Node Book  - pretty well written book about Node.js Single page apps in depth by Mixu as well. The Wise Man's Fear (The Kingkiller Chronicle) by Patrick Rothfuss (really good fantasy!) Pomnik Cesarzowej Achai - ch2 by Andrzej Ziemiański Krav-Maga for beginners. Web Design and Mobile Trends for 201 3 Courses finished: HTML5 Game Development  course on udacity.com Shell-Fu  course on Memrise Talks: DevTank at Interia.pl - I talked about Promises AGH - as one of the speakers, and then on laboratories on Mobile Web. Meet.js Kraków - organizer and speaker. I talked about LeapMotion and how to JS with it :) Maybe more about Meet.js Kraków. This was first time that I was an organizer so pretty big amount of my free time went into that. We get about 18...

Effective JavaScript - Reading List Update

Image
Effective JavaScript by David Herman is really good book about JavaScript and I can recommend it to any JS developer. Especially for intermediate ones but even advanced ones will find something interesting. Chapters are really short and concise. Good code examples really help with explaining advanced JavaScript and I can tell that this is one of the best JS book I've read. Book is pretty short: 200 pages but you can learn a lot! I don't want to write about what's there to let you discover it for yourself. From last month: Hexagonal Architecture for SCKRK Meeting Fallen Dragon by Peter F. Hamilton (sci-fi) Effective JS by David Herman Make: Electronics. Learning Through Discovery By Charles Platt (I will finish first chapter in february) Fallen Dragon  by Peter F. Hamilton Fallen Dragon is pretty good book that managed to surprise me a couple of times. I won't call it must-read but good reading is still good reading ;) Vision of future is plausible ...

Promises in Code

Image
To see more general explanations of promises:  Promises and Deferreds - How I Stared To Like Them At a basic level what Promises do is the same thing as passing a callback to a function. function myFunc ( callback ) { . . . } myFunc ( alert ) ; var promise = myFunc ( ) ; promise . then ( alert ) ; But it is easy to get too many callbacks (if you work without promises), you need at least two, one for error and one for success. Functions need some arguments and you end up with a monster like: myUgly ( success , error , param1 , param2 , param3 ) or move to a config object: myBetter ( { success : success , error : error } ) ; When I want to add another success function it gets uglier: myBetter ( { successes : [ success1 , success2 ] , error : error } ) ; The same functionality with promises will be probably more verbose but I think this is a good thing. The code below is much more maintainable and extensible: var promise = my...

Promises and Deferreds - How I Stared To Like Them

Image
Lately I've started to believe that promises are really useful concept. I used to think of them as some mumbo-jumbo invented by folks who can't get the idea that a function can be stored in a variable and the problem they are trying to solve is easy enough to deal with without any libraries. My first step to understand them was to read:  You're Missing the Point of Promises After that I started to see something in them but couldn't find any real need for them. At that time I joined a new company and I was lucky enough to participate in the first HackDay where we started to implement mashup site that needed to get data from a bunch of urls and then start UI. It was a perfect use case for promises, when all data is downloaded ("when") we can call UI initialization. As we used jQuery to speed up hacking I used jQuery promises with ajax calls. We found really good post by Edwin Martin  Deferred and promise in jQuery  and I finally got the idea behind prom...

Why JavaScript

Image
Really good post about JavaScript and what pythonista Nicolas Perriault think about it. https://nicolas.perriault.net/code/2013/why_javascript/ I like this post and his arguments, short and fun to read. Photo from: http://www.flickr.com/photos/konradfoerstner/4168966589/