Tag JavaScript
Tag JavaScript RSS 2.0 FeedText to Voice in JavaScript example
After reading SpeechSynthesisUtterance I wanted to try it on my own on a minimal example, cause their own example Speech synthesiser isn't working on my Chromium.
JavaScript device orientation tool
Just a small tool to show the device orientation data from JavaScript.
What are my GPS coordinates?
A small and easy tool that gives you your current GPS coordinates.
Insomnia - An Electron based API client
From time to time I like to spread the word for nice software that I use. As I wanted to write my own API client based on Electron, I have found Insomnia. And it has mostly every feature that I expect from an API client. Give this application a try if you build APIs every day and if you want to get rid of API client web browser plugins.
Mathematic expressions in HTML with KaTeX
KaTeX is a JavaScript library to render mathematic expressions in your web browser. Similar to MathJax it is able to use TeX as input.
Regular expression testing tool
Just a small tool to check regular expressions in the browser build with JavaScript.
Create Grunt Docker image
I didn't like to install special versions of JavaScript libraries globally on my operating system. The same for npm and Grunt. So I need to create small Docker image that fits my needs for development.
A D3 precission and recall diagram example
I need to illustrate 28152 different simulations in a precission and recall diagram with D3.
Base64 encoding and decoding tool
A small tool for Base64 encoding end decoding.
URL encode and decode tool
A small online tool to URL encode and decode strings.
D3 time series example
Just a small example for time series illustrations with D3.
Magento 2 DependencyWheel
I made a post about
Magento dependencies in 2013
with a small visualization graph. It is not that easy to do the same with Magento 2, but luckily I have found
DependencyWheel
by François Zaninotto.
This JavaScript library creates
chord diagrams out of a
composer.json and a composer.lock with the help of
D3. I would like to show you the result.
Inaccurate rounding with decimal digits
I made a small post about
Inexact rounding up or down with decimal digits.
But it is also possible to run into the same bug when rounding floating point numbers to the next number with
restricted decimal digits. A really common example is the price calculation. You have the price 1.99
for example and the tax is maybe 19%. The resulting price with tax would be 2.3681. So you will
need to round the price with two decimal digits to 2.37.
Responsive embedded D3 SVG
The most D3 examples that I can find are not responsive embedded SVG. I guess the main reason for that is not to confuse the reader of a tutorial with stuff outside of D3. With the help of How to Scale SVG from Amelia Bellamy-Royds I would like to show on a minimal D3 example how to make the resulting SVG responsive.
Inexact rounding up or down with decimal digits
Calculations with floating point numbers are often producing small hidden bugs in some programming languages. For example rounding down or up with decimal digits. I want to show on some small examples in Java, JavaScript, Python and C the main problem.
MathJax - Mathematical expressions via JavaScript
MathJax is a JavaScript engine to display mathematical expressions in web browsers. I would have needed in it some posts before on my blog, but I have never tried. Today I would like to show how easy I have integrated in my blog.
QUnit with Grunt - A minimal JavaScript unittest example
Grunt JavaScript QUnit Testing
Writing testable JavaScript code is in my eyes sometimes more complex as writing testable code in other programming
languages. JavaScript has it roots in the web development and the normal environment for JavaScript code was the
web browser. There was always the global document object.
Node.js has changed this assumption.
A Prism based web text editor with syntax highlighting
I like to use Prism on my blog for syntax highlighting. Today I just want to test something like prototype for web text editor with Prism syntax highlighting. I know there are also working web text editors like CodeMirror for example, but as mentioned this post more a feasibility study.
Local browser storage over many tabs
I just want to check how the localStorage of a browser behaves over many tabs.
A audio noise filter in JavaScript quantile based
I am a little bit interested in the possibilities of reading audio input from the web browser. So I have written a small audio noise filter based on frame wise speech / non-speech classifcation a few days ago. This filter was based on the research of the paper Quantile based noise estimation for spectral subtraction and Wiener filtering. The paper contains also an other approach, a quantile based noise spectrum estimation.
JSON - beautifier and minifier
A small tool to beautify or minify JSON data.
A audio noise filter in JavaScript speech / non-speech classifcation
A few days ago I have written a small post about Reading Web Audio API with JavaScript. But no matter how silent I am acting on my working place, my computer is always producing the following noise.
I will try to create a small lightweight noise spectrum estimation and elimination filter in JavaScript that is based on the research of Quantile based noise estimation for spectral subtraction and Wiener filtering.
Web performance checking with sitespeed.io
Sometimes tools are that awesome that you just want to spread the word. I guess I should do that more often. One fantastic tool is sitespeed.io. Sitespeed.io is a set of open source tools that will help you to analyze your website and gives you helpful advices to make your website faster.
Reading Web Audio API with JavaScript
I have read Visualizations with Web Audio API and just wanted to check on my own if I can build a small working example that can read the audio input from the Web Audio API.
Prism - Code folding with details and summary
I have started development of a
code folding plugin
for Prism syntax highlighting. The
comment
by Lea Verou
showed me that the details and summary tags combined with the
Keep markup plugin are a
more comfortable solution.
Prism - syntax highlighting for Magento templates
In the past I have written a few posts about email template directives for Magento 2.
- Magento 2 email template block directives
- Magento 2 email template translator directives
- Magento 2 email template config directives
- Magento 2 email template template directives
- Magento 2 email template logic directives
- Magento 2 email template style directives
- Magento 2 email template layout directives
I like to use Prism as syntax highlighter for my blog. So I have created a small grammer for Magento templates that are used for emails and for the CMS system.
Change theme-color via JavaScript
A few days ago I have found
Android chrome tab color
and today I wanted to know if it can make sense to change the theme-color via JavaScript. I was not
sure if the chrome browser will update the tab color.
Prism - Code Folding plugin prototype
I am using Prism on my blog for my syntax highlighting and I am very happy and thankful about it. Sometimes I wanted to show the users of my blog a specific function of a class, but without decoupling the function from the class. So I needed something like a Prism plugin that can hide specific lines of the code in a foldable area.
Prism - Hooks list
I started my first Prism plugin. Prism uses hooks or in other software often called events to get simple plugin architecture. It is often a good idea to get an overview about all available hooks that Prism runs without any plugins. I will show in this post a small list with some explainations.
Text differencing tool
A small tool to show the differences between two texts. Similar to the command git diff. I was motivated to write the algorithm on my own in JavaScript, but there already exists an excellent implementation by Kevin Decker that is called jsdiff.
Touch signature identification with JavaScript
The uWave: Accelerometer-based Gesture Recognition project from the Rice Efficient Computing Group inspired me to build a small real time HTML based signature identification with JavaScript. Actually gestures have not that much incommon with drawn handwriting, but I wanted to test dynamic-time-warping on signatures. I am not sure if there is a real usecase for a signature identification in web applications, but it was fun to build this kind of prototyp. Feedback is welcome.
Unix timestamp to date tool
One more common tool that is fun to write and that I use pretty offen. A tool that converts timestamp to date.
HTML escape tool
It's fun to write small simple tools in the evening to come down. Here a tool to escape HTML as you can find it on every other HTML lerning website. It will replace the following characters with the right entities.
Broiler Demo Rainbow
This is a small demo that shows how broilerjs is picking a color from an image by click. This example is a little bit different from the demos in the repository on Github, cause it is loaded with RequireJS to ensure it does not conflict with other jQuery versions on my blog. Just click a color in the rainbow image.
Simulate Mouse Clicks in QUnit on Coordinates
I made a small plugin for jQuery to get the color of an image pixel. It's called broilerjs. I wanted to test the plugin via QUnit, a JavaScript Unit Testing framework. But I could not find a possibility to simulate a mouse click on special x and y coordinates. But in the end it was very easy.
Building xmpp (jabber) app for Firefox OS - Part1
In the last month everybody is talking about instant messenger. There are some for Firefox OS, but not really good ones. Often you are bound to one service. But with xmpp you can create your account at one of hundreds of servers all over the world. It's just a protocol. A little bit like email. My client talks to my server, my server to the server of my contact and the server of my contact with the client of my contact. You can inform your self about jabber at jabber.org. I would like to build a xmpp (jabber) app for Firefox OS. The problem: I didn't know much about xmpp and I'm not the best javascript developer. The first problem will be solved in the second part of this post, but I want to build the basic structure of the app in the first part. I did read Quick Guide For Firefox OS App Development from Andre Garzia. The book is pretty good, but like explained in the book it isn't always best practice. But it works. So I have build my app a little bit like explained in this book. At the moment I have a Alcatel One Touch Fire with Firefox OS 1.1.0.0-prerelease. The ugliest phone you can imagine, please never buy such a shit. I just use it, cause I guess Firefox OS can maybe the next revolution for mobile OS. It's pretty hard to work with such a phone if you have used a iphone since 4 years.
Book recommendation - Backbone.js Application Development
A few days ago, I bought me an ebook reader. I need a smart solution for the 2 hours in the subway each day. I just want to learn new frameworks or any other computer things. It was clear, the reader should at first support epub format. My choice was the kobo and I'm happy with that. But were did I get my ebooks from. Sure there are a lot of (free) ebooks in the web. But I want to support the authors and I can't write a critic review of a book I never paid for. Yes, I want to pay for my books, but I will never download books with DRM and install me any Adobe shit. It's very funny, many publisher have there own books without DRM and the reseller with DRM. But there are two publisher I did like very much in the last days. The first one is leanpub.com. You get good and also very bad books for mostly 10 to 20$ in all formats without DRM. A big disadvantage and also a advantage, the author can publish the book in a nonfinished status and you never know if it will be finished. The second Publisher is packtpub.com, a good known publisher from the old paper times. I like there instant books. Just 10$ and you get a more detailed tutorial I would say. And today I would like to say a little bit about Backbone.js Application Development from Thomas Hunter II.
