The latest posts in full-text for feed readers.
At work we have a small project in which we get CSS and JavaScript from an external agency. Now and then updates come in and have to be integrated into the existing code base. Sometimes things break, and all I have is minified JavaScript.
I wanted to be able to properly see the changes in the minified JavaScript files when using git diff, and it turns out you can configure Git to do that.
At first, install the JavaScript beautifier js-beautify via pip:
$ pip3 install jsbeautifier
Now we define a diff configuration with name minjs, which tells Git to prettify files with js-beautify:
$ git config --global diff.minjs.textconv js-beautify
If you have got enough space on disk, enable caching of the beautified files:
# takes extra space, but makes it faster:
$ git config --global diff.minjs.cachetextconv true
At last create a file called .gitattributes in your project root directory that tells Git to use the minjs diff configuration for file names ending with .min.js:
*.min.js diff=minjs
git diff now diffs minified JavaScript files in a readable way.
git show does not unless you use the --ext-diff option.
Published on 2017-01-17 in git, javascript, mogic
While debugging some JavaScript at work, the Chromium browser showed a file called fake_15289d233.js - instead of the real main.js file that was loaded by the HTML page.
Worse than the file name was the fact its source code did not change, even when I changed main.js.
In the end I found that main.js included a source map in the last line:
//#sourceMappingURL=data:application/json;base64,dead23beef42
That 'URL' contained the full original source of main.js and was shown instead of its content. After removing that line all was back to normal.
This particular source map was generated by browserify's, triggered via its debug setting.
Published on 2016-09-09 in javascript, mogic, web
ownCloud follows the design principle of Never Use a Warning When you Mean Undo : Instead of showing a popup dialog that you have to confirm to e.g. delete a file, the action is taken immediately. ownCloud does however show a small notice that something has been deleted. Clicking the notice will restore the deleted items.
When working on my Tomboy note sync server, I had to implement deletion of OAuth access tokens. It is possible to implement it in two ways: Full and Simple.
When the user clicks "delete", a request is sent to the server and the token's database row gets the "deleted" flag set. A notification is shown, telling the user that he can restore the token by clicking on the notice.
When the user clicks "undo", another request is sent to the server and the deleted flag gets reset.
This also implies a way to clean the database of deleted tokens.
I dubbed this "simple" because it's simple to implement, compared to the steps necessary in full deletion. It works as follows:
When the user clicks "delete", the token HTML table row is hidden. A notification is shown, telling the user that he can restore the token by clicking on the notice. A JavaScript timer is started that will send the delete request to the server in 5 seconds.
After 5 seconds, the javascript timer fades the notice out and sends the delete request to the server. The token is permanently deleted now.
If the user clicks the notification within the 5 seconds, the timer is stopped. The token row in the HTML table is made visible again.
When the user leaves the page within the 5 seconds, the delete action requests are immediately sent to the server via an onbeforeunload event handler. You have to send the requests in synchronous mode, since the browser tab will be closed before the request reaches the server in async mode.
You also have to take care of multiple timeouts: What happens if the user deletes 2 tokens and then clicks undo? I chose to restore both tokens.
The JavaScript code can be found in js/grauphel.js .
Published on 2014-11-09 in html, javascript, owncloud
To pretty-print some large JavaScript files on your shell without using an online service, you may use the open source js-beautify which is available as python package:
discourse-application.js
]]>
Published on 2014-11-05 in javascript, shell, tools