Since there's somehow less action in the JavaScript space (or I notice less of it), I'll move to a monthly schedule with the mailing list for now. This may also be a sign of stability or shift of focus to AI/LLM.
]]>JSter #242: Libraries and morejster-2422025-05-02T10:33:59.000Z
I only JavaScript to calm my nerves.
Future Frontend (27-28.5, Espoo, Finland) is getting closer as it occurs at the end of the month. There are still some tickets left and I'm sure we'll fill our space well. There's also sauna in store.
]]>JSter #240: Libraries and morejster-2402025-04-03T10:13:59.000Z
You know, you don't JavaScript much, do you?
It's less than two months to Future Frontend (27-28.5, Espoo, Finland). I also have my doctoral defense at 30.5 so it will be a busy week for certain someone.
]]>JSter #239: Libraries and morejster-2392025-03-17T10:13:59.000Z
That'll do, JavaScript. That'll do.
Winter is coming near its end in Finland. We likely have about one or two months of snow left before it gets too bright and warm. Fortunately curtains exist.
]]>JSter #238: Libraries and morejster-2382025-03-04T10:13:59.000Z
I feel the need - the need for JavaScript.
It's less than three months until Future Frontend (27-28.5, Espoo, Finland). It's not going to be a big conference (~200 people) but that's just good for the vibes.
]]>JSter #235: Libraries and morejster-2352025-01-16T10:13:59.000Z
Why is the JavaScript gone?
I have managed to acquire most of the topics for Future Frontend 2025 (27-28.5). It has been interesting to observe how AI affects the conference program as it is difficult to ignore its impact.
]]>JSter #234: Libraries and morejster-2342025-01-06T11:13:59.000Z
Happy new year JavaScripters!
New year, new challenges. I have a small favor to ask you. I have a MSc student researching how AI is used for web development. To help out, fill his query (5-15 mins).
]]>JSter #231: Libraries and morejster-2312024-11-18T13:13:59.000Z
JavaScript. It lives forever. Right there in your heart.
I just finished a busy week at Web Summit and I still have a writeup to do. Interestingly enough the event doesn't have much to do with the web although it started from those origins.
]]>JSter #229: Libraries and morejster-2292024-10-15T10:13:59.000Z
That's your JavaScript
I recently interviewed Dariel Vila about KaibanJS for my blog. KaibanJS is a framework that helps you orchestrate your AI agents. The interesting thing is that it's the first solution of its kind for JavaScript and the approach feels intuitive.
]]>JSter #228: Libraries and morejster-2282024-10-02T10:33:59.000Z
You are the JavaScript one
We've started selling tickets for next year's Future Frontend conference. It will take place 27-28.5 at Espoo, Finland (close to Helsinki) and we'll focus on the intersection of AI, web design and development. The super early bird tickets (199€) are available until the end of October and you can learn more about Future Frontend 2025 at the conference website.
]]>JSter #226: Libraries and morejster-2262024-09-02T10:33:59.000Z
What took you so JavaScript?
Given there's a lot of hype around AI, I took the bait and interviewed Janos Dobronszki over at SurviveJS blog. Janos developed a tool called Singulatron that lets you run open source models easily on your own machine giving benefits, like having completely control over how your data is used.
]]>JSter #220: Tools and morejster-2202024-06-03T09:33:59.000Z
It's supposed to be JavaScript.
Future Frontend 2024 conference is getting close (13-14.6). We'll produce a live stream and it will be announced through our X account in a week or so.
]]>JSter #219: Frameworks and morejster-2192024-05-16T09:33:59.000Z
What are you prepared to JavaScript?
I recently completed the rewrite of survivejs.com although I still have to write a blog post describing the technical bits behind it as quite a lot of development effort went into the site. As Future Frontend (13-14.6, Helsinki) conference takes place in a month, that has been keeping me busy.
]]>JSter #217: Libraries and morejster-2172024-04-15T14:33:59.000Z
This is JavaScript!
I've working on a new revision of SurviveJS website based on Gustwind. This type of work is good in testing framework ideas and fixing oversights in the original design and I think the end result will be worth the effort.
MonoLisa - You can get additional 15% off from this font for coders by applying the coupon AFFILIATED15 during the checkout.
]]>JSter #211: Libraries and morejster-2112024-01-16T13:33:59.000Z
You don't know what JavaScript is. It's a relationship.
Here's a quick injection of JavaScript libraries and related injection. If you are within the region, we'll organize the first Future Frontend meetup 31.1 at Helsinki.
]]>JSter #208: Libraries and morejster-2082023-12-01T13:33:59.000Z
JavaScript is to my advantage.
To gather leading minds of frontend space together, we'll organize the second edition of Future Frontend 13-14.6.2024 at Helsinki, Finland. The conference has a single track organized a eight themed sessions. I expect our visitors will go back inspired and enjoy comfortably mild Finnish Summer.
]]>JSter #191: Libraries and morejster-1912023-03-14T09:33:59.000Z
JavaScript, still going strong
I'll resume old biweekly schedule with this mailing list for now to see if that makes it easier to maintain. If not, I will revert back to monthly.
As I run conferences, I have good contacts in the space and this time around I have a special section for conference related discounts. You can share them with your friends if you know some that are interested.
]]>JSter #188: Libraries and morejster-1882023-01-03T10:33:59.000Z
New year, new JavaScript libraries
As a follow-up to React Finland, we'll organize a new conference called Future Frontend. As you might have guessed from the name, it is more future focused and the pivot allowed us to invite speakers that we otherwise couldn't have invited. The conference takes place 05-09.06 in Helsinki, Finland and we've started early sales.
]]>JSter #184: Libraries and morejster-1842022-09-02T11:33:59.000Z
Mama always said life was like a box of JavaScript libraries
A lot of libraries this time. That's all.
I also wrote documentation for my JSON based templating solution called Breezewind. It's the core of jster.net and you can think it as a React inspired way to handle templates.
]]>JSter #182: Libraries, articles, and morejster-1822022-07-06T11:33:59.000Z
JavaScript is a tool. They think I'm hiding in the shadows. But I am the shadows.
It's time another JSter post. If you follow through the mailing list, then you'll notice the mail looks different now. That's because I moved to a service called Buttondown to simplify my workflow.
As a result, I might move back to a biweekly interval maybe in the fall as now it's simply faster to author the posts.
pre-commit - A Framework For Managing And Maintaining Multi Language Pre Commit Hooks
]]>JSter #181: Libraries, articles, and morejster-1812022-06-03T11:33:59.000Z
It's the JavaScript that I don't know that gets to me
To my horror, I noticed early this week that jster.net is down. It turns out the server had gone offline. The original service was hosted in Ukraine and I imagine something bad happened. That meant I had to finish and deploy the new version on a sufficient level.
The new site is far faster than the old one as it's fully static. It doesn't have full feature parity with the old one yet and I'm restoring it bit by bit. That said, the index and the blog posts are up although you may notice something not rendering in a post for example.
On the plus side, the new stack is fairly nice and it renders fast. It takes about six seconds on my computer to render 3000 pages and roughly 10 seconds on Cloudflare Pages infrastructure (not counting Deno installation).
The process hasn't been fully optimized yet so that's a good sign in case I want to grow the index one day and then there are more tricks like incremental compilation and using edge workers to generate pages dynamically on demand.
]]>JSter #180: Libraries, articles, and morejster-1802022-05-03T11:33:59.000Z
If we don't JavaScript, no one will
Another month went by very fast. Perhaps the biggest news of the month is that the popular monorepo tool Lerna reached its end of life and won't be actively maintained anymore. If you are still using it, it's worth looking into options.
]]>JSter #179: Libraries, articles, and morejster-1792022-04-04T11:33:59.000Z
The JavaScript must flow
I've been working on the SSR capabilities of Sidewind to prepare for the launch of the next version of jster.net. Let's see if I can get that live before the next mail.
]]>JSter #178: Libraries, articles, and morejster-1782022-03-03T11:33:59.000Z
It's not just a signal, it's JavaScript
There are no words for what's happening in Ukraine right now. I can only hope the situation finds a peaceful resolution as soon as possible. That said, here's a monthly list of JavaScript links to study.
BuilderIO/qwik - The HTML-first framework. Initialize apps of any size with < 1kb JS
pankod/refine - refine is a React-based headless framework for building data-intensive applications in no time ✨ It ships with Ant Design System, an enterprise-level UI toolkit.
]]>JSter #177: Libraries, articles, and morejster-1772022-02-03T08:33:59.000Z
JavaScript is the beginning of wisdom, not the end
As I've been rewriting my websites, it has been good time for me to revisit basic topics like image manipulation. I delved into image manipulation with Cloudflare Images. It's a topic that will need a blog post later and I still have to expand my solution to fit all my needs.
]]>JSter #175: Libraries, and morejster-1752021-12-03T07:49:41.000Z
The good, the bad, the JavaScript
X-mas is getting closer. I've been iterating on Gustwind and on a conceptual level it's starting to feel solid. I still have add a couple of features to be able to host JSter site through it but the end is in sight.
Hydrogen - Shopify's opinionated framework for building headless ecommerce
]]>JSter #174: Libraries, and morejster-1742021-11-02T04:46:56.000Z
Release the JavaScript
As I want to revamp JSter website, I've started a little project called Gustwind. It's a highly performant static site creator built with Deno. It will still take plenty of iteration to take the project where I want it but it's shaping up.
]]>JSter #171: Libraries, and morejster-1712021-08-03T10:32:35.000Z
JavaScript is always there for you
Later this month, React Finland 2021 takes place online. There are forty speakers lined up and by registering for free you'll gain access to our virtual online venue. Find out more at the conference site.
]]>JSter #170: Libraries, and morejster-1702021-07-05T08:27:20.000Z
One JavaScript - Shaken, not strirred
React Finland 2021 will take place online 30.08-03.09 and we'll do live satellite events where possible. The main content will be freely available and we have a variety of workshops (most commercial) to choose from.
micromark - The smallest commonmark compliant markdown parser that exists; new basis for @unifiedjs (hundreds of projects w/ billions of downloads for dealing w/ content)
Packup - Packup is web application bundler for Deno, inspired by parcel
Nextra - Nextra is a Next.js based static site generator. 0 lines of code needed.
ToolJet - An open-source no-code platform for building and deploying internal tools.
Modern Web - Guides, tools and libraries for modern web development.
enquirer - Stylish, intuitive and user-friendly prompts, for Node.js. Used by eslint, webpack, Generate, lint-staged, pm2, gluegun, hygen, GitHub Actions Toolkit, @airbnb/nimbus, and many others!
Konva - HTML5 2d canvas js library for desktop and mobile applications
TuSimple/naive-ui - A Vue 3 Component Library. Fairly Complete. Customizable Themes. Uses TypeScript. Not too Slow.
]]>JSter #165: Libraries, and morejster-1652021-03-01T09:25:54.000Z
JavaScript still has new tricks in its sleeves.
I've started running a series of vodcasts for React Finland. In the first one we covered React components and in the next one (29th of March) we'll discuss accessibility.
We also published a new version of MonoLisa, a popular font for coders. At the same time, we made the basic version a bit more affordable while offering more options.
]]>JSter #161: Libraries, and morejster-1612020-11-03T04:33:38.000Z
JavaScript - the language of the web
In our fourth mini-conference at React Finland, we focused on lessons learned. The fifth one will take place early December and focus on React performance.
In other news, given webpack 5 was finally released, I gave my webpack book another pass of updates to adapt to the changes in the major tool.
]]>JSter #158: Libraries, and morejster-1582020-08-04T10:06:51.000Z
Toss a coin for your JavaScript
The second online mini-conference held by React Finland takes place 27th of August and it's going to be about state management. Join us to learn more about the topic with David Khourshid, Christian Alfoni, Yan Lavryushev, and Sara Vieira (MC).
]]>JSter #157: Libraries, and morejster-1572020-07-06T10:38:24.000Z
undefined is not a function
Thanks to Google sponsorship, I was able to complete a new major version of webpack-merge, the popular tool for merging webpack configurations. It's written in TypeScript and while I dropped smart merging from it, other fixes and tweaks should make up for the omission.
]]>JSter #156: Libraries, and morejster-1562020-06-05T05:13:38.000Z
It's 2020 and we're still coding JavaScript
The first React Finland mini-conference took place 28th of May. I've included the videos from the session in the link and it also includes the QAs and the end panel.
The next mini-conf is going to be about state management and it's going to happen 27th of August.
Lerna Update Wizard - Command line interface for simplifying the process of bulk updating dependencies across multiple Lerna or Yarn Workspace packages.
Preconstruct - Dev and build your code painlessly in monorepos
Excalidraw - Simple collaborative drawing on the web
@yarnpkg/plugin-typescript - This plugin automatically adds @types/ packages into your dependencies when you add a package that doesn't include its own types.
Weekly News for Busy Web Devs - Programming Digest is a weekly curated newsletter with the five most interesting stories in programming 👩💻, data 💾, and tech 📱️.
]]>JSter #155: Libraries, and morejster-1552020-05-06T09:21:40.000Z
JavaScript, eight days a week
The online edition of React Finland is getting closer. There will be a group of workshops at the end of the month. In addition, we'll begin a series of online mini-conferences with three speakers each including QAs and panels. The theme of the first one will be documentation.
ganeshcse2991/validate-graphql - A simple and elegant module that provides you an easy way to validate your GraphQL queries and mutation with your own logic and YUP validation framework
]]>JSter #154: Libraries, tools, and morejster-1542020-04-06T03:18:36.000Z
JavaScript, the programming language where there are multiple truths
It's time for another another montly JSter. Due to the on-going pandemic, we had to postpone React Finland to the next year. We'll be running online events this year to serve our community, though.
jaredpalmer/mutik - A tiny (495B) immutable state management library based on Immer
Joda - Immutable date and time library for javascript
Moon - The minimal & fast library for functional user interfaces
detect-browser - This is a package that attempts to detect a browser vendor and version (in a semver compatible format) using a navigator useragent in a browser or process.version in Node.
brahmosjs/brahmos - Super charged JavaScript library with modern React API and native templates
]]>JSter #152: Libraries and a lot morejster-1522020-02-05T04:31:04.000Z
2020 and we're still coding JavaScript
It's time for the monthly JSter again. React Finland is shaping up well and we're out of regular bird tickets for the conference soon. I've compiled a list of JavaScript links I've found interesting during the past month so please enjoy. I hope you find something useful.
One of the things I completed during past month was Sidewind. It's a light state manager built for JavaScript. State lives within the DOM and thanks to the modern web APIs I was able to keep it small. If you are using Tailwind for styling, Sidewind complements it well.
]]>JSter #151: Libraries and morejster-1512020-01-04T02:58:53.000Z
2020 is the year of JavaScript on desktop
2020 is shaping up to be yet another year of JavaScript. React Finland (25-29.05) is almost out of early bird tickets so if you are coming and haven't picked up a ticket yet, it's a good chance to do that.
]]>JSter #150: Libraries and morejster-1502019-12-03T09:04:25.000Z
There's no too little JavaScript, only too much
We announced React Finland (25-29.05) and Freezing Edge (01.06) events recently. React Finland will run third time and it's your chance to meet especially the Nordic community. Freezing Edge is a new, live-coding focused concept and we hope developers find it as well!
voidcosmos/npkill - List any node_modules directories in your system, as well as the space they take up. You can then select which ones you want to erase to free up space
eslint-config-es - A strict ESLint configuration for ES2015+ and TypeScript
akx/npm-dep - Generate dependency graphs of npm packages
nodejs/citgm - citgm is a simple tool for pulling down an arbitrary module from npm and testing it using a specific version of the node runtime
nanoprobe - A CLI to help better understand the massive amount of information that surrounds Node.js versions.
]]>JSter #143: Libraries and morejster-1432019-06-17T13:33:36.000Z
JavaScript shot first
The dates for the next React Finland are clear. The event will take place 12-15.05. We are also planning a conference for November but it's a bit too early to announce that yet.
]]>JSter #140: Libraries and morejster-1402019-05-03T06:37:44.000Z
A JavaScript. Shaken. Not stirred.
React Finland 2019 is over and I gathered the blog coverage, videos and photos into a single post for you. The conference was an overall success and it will take a while to digest all the learnings. We gathered the conference videos into a playlist you could check out. Now it's time to take a little break from conferences and focus on other things. :)
React Finland 2019 is a week away. If you cannot make it, don't worry. We'll have a livestream of the event and we'll also share the recordings afterwards. You'll miss out the parties and sauna, though.
]]>JSter #131: Libraries and tutorialsjster-1312018-12-17T15:19:26.000Z
TypeScript to JavaScript as an airbag is to a car
We announced React Finland 2019 (24-26.4.2019) recently. It's going to be one day of workshops and two days of conferences (single track) again. This time around we'll have professional MCs and even more speakers than before. It's not the worst reason to visit Finland.
I hope you enjoy xmas and have a great coming year!
]]>JSter #127: Libraries and morejster-1272018-10-17T10:52:02.000Z
JavaScript was created in two weeks. Then Brendan took a break.
I have good news. GraphQL Finland will have a free livestream. So tune in during the conference through @GraphQLFinland where we'll announce the talks and link to the video.
BigTest - A suite of JavaScript libraries and a framework to test your application
]]>JSter #123: Frameworks and morejster-1232018-08-19T03:27:37.000Z
Bring me a coffee. It's time to write to JavaScript.
As usual, time for a new JSter. There's a new version of TypeScript available. I've been playing with the language lately and now it feels like I should have picked it up earlier. Better late than never I suppose.
JavaScript, the hipster certified programming language.
It's that time of the month again. npm almost had a disaster in their hands as a worm got through to the registry through a popular package. Enabling two-factor authentication for npm is recommended.
pnpm version 2 is out! - pnpm, a npm client alternative, has reached a new major version. It maintains each package version only once on your computer making it both fast and space conserving.
]]>JSter #119: Libraries and morejster-1192018-06-18T11:02:58.000Z
JavaScript now.
We announced a new technical event recently. GraphQL Finland will be held in Helsinki 18-19 October. There will be a day of workshops and one day of talks and it's a good chance for you to learn more about this upcoming technology.
BundlePhobia - Find the cost of adding a npm package to your bundle.
]]>JSter #115: Libraries, the usualjster-1152018-04-16T12:46:42.000Z
JavaScript, JavaScript, JavaScript.
React Finland is getting close! It's next week literally. Another conference, Worker Conf was announced today. It's a day conference held in Dornbirn, Austria at 28th of June. If you like mountains, that's the place to be.
]]>JSter #112: Libraries, the Usualjster-1122018-03-07T11:07:10.000Z
I'm gonna make him a JavaScript library he can't refuse.
The Spring is coming in Vienna fast. I visited Concat 2018, a web development event held in Salzburg. It was a great conference and I'll go again if I get the chance.
]]>JSter #111: Libraries, the Usualjster-1112018-02-16T11:13:28.000Z
Toto, I've a feeling we're not in JavaScript anymore.
React Finland (24-26.4) is getting closer. I've been developing the technology around it and the process has taught me a lot about technologies like GraphQL. I'll likely publish a blog post about my learnings so far.
]]>JSter #110: Libraries, Articles, the Usualjster-1102018-02-14T03:58:22.000Z
My JavaScript, where art thou?
React Finland is progressing steadily and we are selling "regular bird" tickets now. We've reached our financial goals. We'll use some for the next year and perhaps meetups while also invest into this year's edition to improve the experience as much as we can.
I did some traveling during the past few weeks and wrote about my experiences on ScriptConf 2018 and AgentConf 2018. Especially the latter was a great conference to visit, and if it's possible, I'll visit both next year again.
Friends at Reason Conf just opened sales, so if you are interested in an emerging new language and want to visit Vienna in May, check it out!
Quasar Framework - Build responsive websites, PWAs, hybrid mobile Apps (that look native!) and Electron apps, all simultaneously using same codebase, powered with Vue.
Nest - A progressive Node.js framework for building efficient and scalable server-side applications.
GitHub - A micro web server so fast, it'll make you dance!
Cuttlebelle - The react static site generator that separates editing and code concerns.
]]>JSter #109: Libraries, articles, the usualjster-1092018-01-15T05:58:41.000Z
Chuck Norris debugs JavaScript code by staring at it. The code confesses eventually.
Leftpad 2.0 occurred as pinkie-promise was pulled from npm by accident. For this reason, it can be a good idea to run a proxy such as verdaccio in front of npm as it isolates you from these kind of rare disasters.
I wrote a small summary on 2017. I took my first proper vacation in years so this mailing list was on a brief hiatus. It's back to one post per two weeks again.
]]>JSter #103: Libraries, Articles, techniques, and morejster-1032017-10-02T10:38:40.000Z
JavaScript, now.
I spent roughly a week in Prague and wrote about my experiences in WebExpo 2017. In short, another great place in Europe to visit.
In other news, we are going to organize React Finland at the end of April 2018 in Helsinki. The event will gather around three hundred React enthusiasts. We'll have a workshop day and two days for presentations in a single-track format.
]]>JSter #102: Libraries, and morejster-1022017-09-16T02:47:55.000Z
There's no time like JavaScript time.
Time goes fast when you are having fun. I spent a week in Israel and wrote about my experiences on React Next 2017. In short, it's a great event worth visiting.
Reactide - A dedicated IDE for React application development.
]]>JSter #100: Libraries, articles, and morejster-1002017-08-17T10:42:02.000Z
I see JavaScript people.
My third Euro tour is progressing in hot Vienna. This has been a good time for me to relax a bit before further challenges (two major talks next month). Incidentally this is the hundredth post to this list!
]]>JSter #99: Libraries, articles, interviews, and morejster-992017-08-01T05:33:44.000Z
Toto, I've a feeling we're not in JavaScript anymore.
My Fall Tour is on its way. I'm running especially webpack clinics where people get a quick overview of the topic while gaining solutions to their specific problems.
]]>JSter #98: Libraries, techniques, and morejster-982017-07-18T04:05:21.000Z
You can't handle the JavaScript!
I managed to complete my second tour of Europe. The third one is near. This time around I'll spend a whole month at Vienna running webpack and React clinics. After that I'll head to ReactNext and WebExpo. Busy months.
]]>JSter #97: Libraries and morejster-972017-07-02T13:56:30.000Z
It takes two to JavaScript
The Summer tour is nearing its end. Only Augsburg and London remain before a short visit to Finland.
Third tour is already being planned. It will likely begin from Vienna in form of webpack clinics at the end of July. A clinic is a supercharged version of my workshops. You will learn a lot about webpack in a two hour intense session as I walk you through my material in a small group.
I'm also going to participate in WebExpo2017 in September (22-23rd). It's great to return to Prague again.
HNPWA - Hacker News as a PWA against different technologies
]]>JSter #96: Libraries and morejster-962017-06-17T14:26:05.000Z
Every day is a JavaScript day
The Summer tour is progressing. I still have a few cities left including Vienna, Augsburg (also München during the visit), and London.
My webpack book is available as a hard cover edition which includes 30 minutes of consulting. Price - $100 for one, $150 for two including shipping and VAT (no surprises).
]]>JSter #95: Tour, libraries, and morejster-952017-06-03T02:30:51.000Z
JavaScript me if you can.
It's time to tour the Europe again! I'll be spending roughly two months on the road and visit at least Slovakia, Germany, Austria, and the UK. I may add more countries to the tour schedule depending on the interest.
]]>JSter #94: Libraries, and morejster-942017-05-16T11:25:03.000Z
Frankly, my dear, I don't give a JavaScript
I'm preparing my next Euro tour right now. The plan is to keep this more casual with time for potential clients. I'll be spending my time in Slovakia, Germany, Austria, and Great Britain and will have time for providing webpack and React training. A few have booked already.
]]>JSter #92: Libraries, and morejster-922017-04-16T10:34:09.000Z
JavaScript another day.
My tour is half-way through and it has been a wild ride so far. A lot of work remains of course, but we'll see. I hope to have something to announce in the next post. :)
verdaccio - Private npm repository server. A successor of Sinopia.
]]>JSter #90: Libraries, articles, and doodadsjster-902017-03-18T04:12:40.000Z
Gone with the JavaScript.
Interesting times. The webpack book has reached a release candidate version you can study online. Almost 70,000 words and over 30 chapters later, we are nearly there. I have a date in mind for the final release and to support it, I will have a tour in Europe around April. Countries include Finland, Norway, Germany, Czech, and Slovakia. I might see some of you there.
Marko 4.0 - Marko by eBay is a fast UI library designed server side rendering in mind. It's up to 5-50 times faster than other alternatives. It's not a direct replacement to React and such but still worth a look.
ConvNetJS - Train Deep Learning models in your browser.
hyperHTML - What happens when you build a UI library on top of ES6 templates? hyperHTML happens.
]]>JSter #87: Libraries and morejster-872017-02-04T10:55:05.000Z
The Good, the Bad, the JavaScript.
A new version of the SurviveJS webpack book has arrived. The book is getting quite massive (around 330 pages), but the end result might be worth all the effort.
]]>JSter #85: News of January 2017 - Part 1jster-january-2017-part-12017-01-04T03:14:21.000Z
JavaScript another day.
As webpack 2 is getting closer, I've been pushing my webpack book forward. I revamped it completely and published SurviveJS - Webpack v1.5.0. There's still work to do till I can get a paper version out, but this was a nice step towards that goal.
]]>JSter #84: News of December 2016 - Part 1monthly-jster-december-2016-part-12016-12-19T10:24:41.000Z
JavaScript another day
webpack 2 reached a new release candidate and final release seems imminent. To keep up with the world, I updated my webpack book to webpack 2 beta. In addition to the update, I refreshed the content quite a bit. There's still work left to be done, though.
]]>JSter #83: News of November 2016 - Part 2monthly-jster-november-2016-part-22016-12-02T03:17:50.000Z
JavaScript framework a day keeps the doctor away
It was another busy two weeks. There were two highlights. I released Reactabular 8. I did some major restructuring there to make it easier to grow the project in the future. webpack-merge reached version 1.0 as I consider it stable now. I also wrote webpack-merge related interview that explains the idea better.
We are running React Indie Bundle again this year. So if you want to pick up content on React, check it out.
]]>JSter #82: News of November 2016 - Part 1monthly-jster-november-2016-part-12016-11-16T07:30:26.000Z
JavaScript, sweet JavaScript
It has been busy two weeks again. I gave my first keynote, did eight sessions over seven days and so on. You can read more about it in my travel report.
arqex/freezer - A tree data structure that emits events on updates, even if the modification is triggered by one of the leaves, making it easier to think in a reactive way
purag/archsim - A JavaScript processor simulator to design and execute any assembly language architecture
]]>JSter #80: News of October 2016 - Part 1monthly-jster-october-2016-part-12016-10-16T04:04:58.000Z
If you can think of a JavaScript package name, it likely exists already
Two weeks have gone again. I released a new major version of my table component for React. The tree API has solidified and there are also a few goodies in store.
webpack has been accepted as a part of the Open Collective. This means it's possible for individuals and companies to support the project now. You can read more about the scheme at the related blog post.
]]>JSter #78: News of September 2016 - Part 1monthly-jster-september-2016-part-12016-09-19T02:12:48.000Z
Peace and JavaScript to everyone
Things have been progressing quite nicely. I put a lot of effort into pushing my static site generator further, but I'll get back to that later once I have something tidy to show. I also wrote a small interview about my table component for React so you can get the core ideas easily.
]]>Mobile Application UI: 6 Definitive Trends in 2016mobile-application-trends-20162016-09-12T09:16:39.000ZIn the past 20 years, apart from the Internet itself, mobiles have been one of the biggest catalysators of growth and innovation on a worldwide level. From the first Nokia phones, to the latest iPhone 7, these small devices interact with us on a daily basis, transforming how we work, socialize and even communicate with our family members.
Just as there's been a significant change in how the phones themselves look and work, a shift of equal magnitude has occured in the software running on these smarthpones. These days Java and JavaScript are among the top languages used in mobile applications the world over.
Thousands of quality scripts and frameworks are available on open-source sites such as GitHub, allowing for collaboration and contributions from students, professionals and everyone in between. All of this amounts to software far more solid and secure than people would have dared imagine just a decade earlier.
While there's still a large number of apps targeted for consumers being developed in 2016, there's been a surge in enterprise app requests at Nodes. We've seen large corporations and organizations open their eyes to the new possibilities that having several company-specific apps offer employees all over the world.
From the simple time-logging apps, to the semi-complex databases of organizational datasets, to the really sophisticated architectures integrating mobile apps with internal CRM, Inventory management systems, and many other internal systems on a whole.
Using open-source JavaScript packages and frameworks for enterprise applications can cut down costs significantly, while keeping the apps optimized and secure, due to the large number of GitHub contributors all sharing their particular expertises, adding value to the community at an ever increasing rate.
It's important to keep in mind that a large business back in 2010 had on average less than 1 app per organizational structure, but today that number is closer to 10. This has led to an improved workflow, better efficiency, and new tools to help managers and board members take direct and correct actions based on cold facts, and the speed in which this data is procured is in itself a valuable asset.
Mobile applications are not just being set up to connect to internal enterprise infrastructure, but also connecting to general consumer electronics such as IoT devices, and a whole host of gadgets and gizmos falling somewhere in between.
The internet coverage is growing and stretching its tentacles far out to the least populated corners of the world, and with India's richest man pumping $20US Billion into free internet access for almost 1 billion indians this year, we are going to see a revitalized interest in the app market on a whole, and integrating apps with various services, providers and other systems are going to be one of the main driving forces behind this latest surge we imagine.
In particular large businesses are using these on an enterprise level, as described above, and IoT for consumers are also on the verge of taking off. But there's an entirely different middle-ground that might actually be the most profitable at the moment.
Sport stadiums, public roads and facilities, government sponsored buildings and open areas are just a few of the most interesting areas to follow.
These large entities all have the money to invest in connected devices, and a commercial interest in doing so. Unlike the private consumers that might just make their life slightly more convenient, these entities and organizations stand to profit by attracting more people to their locations, and creating new markets all together.
There's been a lot of hype these past couple of years concerning the advance of hybrid development - but praxis has showed costs not always ranging much lower than native development, and the performance issues coupled with the lack of native hardware support has meant several large projects originally starting in hybrid frameworks, have moved to native development - mid project no less!
Another important issue is the fact that hybrid apps rarely feels as nice and sleek as their native counterparts, due to performance and integration, as well as the fundamental difference between coding software for multiple platforms at once, thereby skipping over device or OS specific features that can make all the difference on the end-users first impression.
At Nodes we still use both types of approaches, based on individual needs, so there's still cases where hybrid apps are clearly better, but they are not going to take over the world of native apps anytime soon by the looks of things.
While the initial craze has slowly begun to subside, the daily realities of IoT technology is beginning to make an impact on our daily lives. Initially lauded as being a game changer, this particular technology might very well change all of our lives, but perhaps not entirely as previously thought.
The cost of converting all devices in any given home is still too high, and even for newly built houses and apartments, the cost still acts as an inhibitor for most of the world’s population.
While the hardware is the limiting factor in the expansion of IoT devices at home, the cost of developing software for these devices are dwindling on an almost daily basis. From the older frameworks such as AngularJS, Backbone and Apache Cordova, to some of the latest such as Apple's Swift, the open-source languages and frameworks are lowering the barrier of entry for indie developers from all corners of the world.
So while the hardware still has some way to go before making a huge impact, the software part, both front- and backend-wise are ready and waiting..
Beacon technology has been falling out of favor in general, with GPS taking over many aspects usually regarded as perfect beacon candidates, and with an ever increasing usage of GPS and 3G/4G Networks, as well as an increase in time online, the market is ripe for taking advantage of special offers in local areas, and many other location based services on a whole.
GSM and GPS are a few of the more commonly known points of entry, but another powerful feature is what's known as Control Plane Locating, similar to GSM localization by using cell signals and triangulating, but where GSM location uses multiple cell towers, CPL uses just one, and is thus slower and more inaccurate, but cheaper as well.
JavaScript and HTML5 can easily use geolocation in software applications for little to no cost for the developers or apps themselves, making this another great reason for the decline of Beacon technology this past year.
A combination of all services can provide any app with great location indication, without risking the user’s privacy or safety in the process, thus opening up for a number of interesting projects to take advantage of local advertising.
While at first we were skeptical about including this point, due to the lack of explosiveness previously suggested in previous roundups, there's still a thing or two to be said about the wearables. Consumers haven't truly adopted all these gadgets and devices yet, Google Glass and Apple Watch having fallen somewhat under the radar compared to the marketing efforts put forth by the large companies.
The potential for wearables however, is one of a significant magnitude. Many experts seems to consider the cost as being the only real inhibitor, since the benefits of wearables are negligible in most cases, consumers are not prone to pay doubly so for their t-shirts or sneakers yet.
We’re still some years away from having super cheap wifi and gps chips installed in our everyday clothes, but a middle-ground is developing in areas such as Sports, Concert Venues and other areas, tying in with IoT as a whole - currently wearables are more like green energy, in that the commercially viable factor is the driving force behind innovation and adaptation.
Enterprise applications seeing increasing levels of interest and activity
New markets for connected devices appearing and stabilizing
Waiting for the hardware cost to rival the software cost
The Internet of Things still gaining traction
Location Based Services with JS and HTML beating Beacon
Wearables still not worn in yet
2016 is shaping up to be a year of transition, no real new technologies have emerged that are dominating the world of mobile apps, but there are several contenders ready to become the next big thing, once certain factors stabilize or they get more established.
Paired with a potentially lower cost of hardware, it will be interesting to follow the current trends and see which ones are going to make it, and which ones are going to fade away into oblivion.
Mark Pedersen is an app developer at Nodes a UK and Denmark based company specializing in mobile application development for medium to large businesses and enterprises. He is actively reading up on the latest gadget gossip, and loves to play around with jsFiddle.
]]>JSter #77: News of August 2016 - Part 2monthly-jster-august-2016-part-22016-09-02T08:12:59.000Z
Rock and JavaScript.
Reactabular, that React table component of mine, reached 3.0. I also gave a presentation related to the topic. Check out the slides.
]]>JSter #76: News of August 2016 - Part 1monthly-jster-august-2016-part-12016-08-18T06:46:59.000Z
Maybe I JavaScripted, maybe I didn't. - Matti Nykänen
I published a new version of Reactabular so check it out if you need a table component for React. The logic is decoupled so you could reuse some of that in other environments. I also came up with slides related to the topic.
]]>JSter #75: News of July 2016 - Part 2monthly-jster-july-2016-part-22016-08-03T08:48:03.000Z
To JavaScript or not.
I managed to reach 1.0 with my table component, Reactabular. The development will go on, but from now I can focus more on other things like writing.
You might notice there are more links than usual. There is simply more content to tweet these days. I might have to go to a weekly schedule with this mailing list but we'll see.
]]>JSter #73: News of June 2016 - Part 2monthly-jster-june-2016-part-22016-07-04T02:37:11.000Z
JavaScript a day keeps the doctor away.
I've been working on Reactabular, a data grid component for React. There's more information at the beta thread.
In other news webpack has received an official blog. I'll be coordinating the documentation efforts. It's quite a challenge given there's a lot to cover.
]]>Understanding CORSunderstanding-cors2016-06-07T09:01:26.000ZIn this guest article by Monmohan Singh we'll explore the topic of CORS (Cross-Origin Resource sharing). It's one of those topics that comes up often in web development. We'll go through the basics, learn what's needed to support CORS, and walk through the ideas through sample code.
All the code shown in this post is available at GitHub. The server code has been written in Go while the client samples use JavaScript and XMLHttpRequest.
Although the server code is in Go, I don't expect you to understand the language in great detail. The code examples should read well despite the language. You can run the code locally by following instructions at the project readme.
CORS is a W3C specification that allows cross-domain communication from the browser. CORS is becoming increasingly more important as we use multiple API's and services to create a mashups and stitched user experiences. In order to understand CORS, we need to understand the concept of an origin first.
Two pages have the same origin if the protocol, port (if one is specified), and host are the same for both pages. This means that http://api.mysite.com/resource.html has same origin as http://api.mysite.com/somepath/resource2.html but a different origin than http://api.mysite.com:99/resource.html (different port) or https://api.mysite.com:99/resource.html (different protocol).
There are some exceptions to the above rule (mostly by, surprise surprise IE!) but they are non-standard.
By default, Browsers enforce Same Origin Policy for HTTP requests initiated from within scripts. A web application using XMLHttpRequest can only make HTTP requests to its own domain.
One important thing to be aware of is that cross origin embedding is allowed. Browsers can load scripts (source), images, media files embedded within the page even if they are from a different origin.
The CORS standard works by adding new HTTP headers that allow servers to describe the set of origins that are permitted to read that information using a web browser. It is important to note that the servers are in control, not the client. The following examples illustrate how this happens.
In this post we will focus on the main restriction, cross origin requests using XMLHttpRequest.
Let's see what happens when we do a cross origin XMLHttpRequest. For this example, we will be running two servers: PageServer and ApiServer.
PageServer is a simple server which serves the requested page. This server runs on a port 12345 and serves an HTML file. You can override the port by providing -port option when running the server. Here is relevant code:
ApiServer is a server that exposes a basic User REST API that return a JSON representing a User object based on the user name in the request url. The User is just a simple struct saved in an in-memory map. The servers will run by default on port 12346
NOTE: You can change the port by providing the -port option when you run the program but you will need to update the HTML files to point to new host:port combination
Here's the implementation:
var userData = map[string]User{
"john": User{"jdoe", "John", "Doe", "France"},
}
var port = flag.Int("port", 10001, "help message for flagname")
func userHandler(w http.ResponseWriter, r *http.Request) {
w.Header().Set("Content-Type", "application/json")
b, _ := json.Marshal(userData[r.URL.Path[len("/users/"):]])
io.WriteString(w, string(b))
}
func main() {
flag.Parse()
http.HandleFunc("/users/", userHandler)
log.Fatal(http.ListenAndServe(fmt.Sprintf("localhost:%d", *port), nil))
}
If you click "show", it is supposed to go to http://localhost:12346/users/john and get the user json to display but instead you see this error in console :
showuser.html:1 XMLHttpRequest cannot load http://localhost:12346/users/john. No 'Access-Control-Allow-Origin' header is present on the requested resource. Origin 'http://localhost:12345' is therefore not allowed access.
This is known as a Simple Cross origin GET request. Simple requests are requests that meet the following criteria:
Let's see what we can do to succeed in serving a simple cross origin request:
Stop the simple apiserver
Start the apiserver_allow_origin server.
$ go run apiserver_allow_origin.go
We added Access-Control-Allow-Origin header for any incoming GET request above. The value of the header is same as the value sent by browser for the Origin header in the request. This is equivalent to allowing requests that come from any origin (*) like this:
Its all good until we realize that just adding Access-Control-Allow-Origin isn't sufficient for certain "complex" requests (or anything which isn't covered in the Simple request). An example of such a request is a POST request with Content-Type set as application/json.
To get started, point your browser to http://localhost:12345/createUser.html . This is a simple form which looks like below. Entering the data and clicking "create" send a POST request to the ApiServer in-memory store
Add some string data in the form fields and click "create" button. This should convert the data to JSON and do a POST to http://localhost:12346/users with the JSON data as the body of the request. Here is the relevant code in createUser.html:
function sendRequest(url) {
var oReq = new XMLHttpRequest();
oReq.addEventListener("load", reqListener);
oReq.open("POST", url);
oReq.setRequestHeader("Content-Type", "application/json")
var data = serializeUser($('#fcreate').serializeArray());
console.log(data)
oReq.send(JSON.stringify(data));
}
But once you hit "create", the browser should show the following error:
XMLHttpRequest cannot load http://localhost:12346/users. Response to preflight request doesn't pass access control check: No 'Access-Control-Allow-Origin' header is present on the requested resource. Origin 'http://localhost:12345' is therefore not allowed access.
What we called as "Complex" request actually causes two HTTP requests. The browser first issues a preflight or an OPTIONS request, which is basically asking the server for permission to make the actual request. Once permissions have been granted, the browser makes the actual request. In this case, the pre-flight request is something like below:
OPTIONS /users HTTP/1.1
Host: localhost:12346
Connection: keep-alive
Access-Control-Request-Method: POST
Origin: http://localhost:12345
User-Agent: Mozilla/5.0 (Macintosh; Intel Mac OS X 10_11_4) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/50.0.2661.94 Safari/537.36
Access-Control-Request-Headers: content-type
Accept: */*
Referer: http://localhost:12345/createUser.html
The preflight request contains a few additional headers:
Access-Control-Request-Method - The HTTP method of the actual request.
Access-Control-Request-Headers - A comma-delimited list of non-simple headers that are included in the request. Notice that all CORS related headers are prefixed with Access-Control-.
In order for the POST to succeed, the server should support this request, "granting" permission based on the above request headers. Lets do that:
Stop apiserver_allow_origin
Start apiserver_preflight
$ go run apiserver_preflight
What we have done here is added some code in the apiserver to respond to OPTIONS request, granting the permission for GET, and POST calls with Content-Type header.
Enter data and hit "create" button again. You will see that the request succeeded. Using chrome tools or similar debugger, the response to OPTIONS request can be examined as well.
>HTTP/1.1 200 OK
*Access-Control-Allow-Headers: Content-Type*
*Access-Control-Allow-Methods: POST, GET, OPTIONS*
Access-Control-Allow-Origin: http://localhost:12345
Date: Thu, 12 May 2016 10:10:13 GMT
Content-Length: 0
Content-Type: text/plain; charset=utf-8
The response headers from the server grant permission to the different cross origin request methods (comma separated list of GET, POST) and also the allowed headers (in this case Content-Type header).
In addition, the server can also return a header called Access-Control-Max-Age. The value of the header indicates how long the pre-flight response can be cached by the browser and hence browsers can skip the check for that duration.
By default, cookies are not included in CORS requests. This means that a cookie set by one origin will not sent as part of the HTTP request sent to the different origin. Let's see an example of that.
Stop apiserver_preflight
Start apiserver_creds_fail
$ go run apiserver\_creds\_fail.go
Stop pageserver
Start pageserver with cookie option set so that it sets a cookie when serving the page
The UI is same as showuser.html but the pageserver_cookie server now adds a cookie (name="token", value="secret_token") to the page when its served.
Also, the apiserver will attempt to read this cookie, and respond with additional secret data.
func userHandler(w http.ResponseWriter, r *http.Request) {
w.Header().Set("Content-Type", "application/json")
b, _ := json.Marshal(userData[r.URL.Path[len("/users/"):]])
io.WriteString(w, string(b))
if c, err := r.Cookie("token"); err == nil && c.Value == "secret_token" {
io.WriteString(w, " Show Secret Data !!")
}
}
Enter "john" in the text box and hit "show". The request doesn't succeed!
You will see following error in the console
XMLHttpRequest cannot load http://localhost:12346/users/john. Credentials flag is 'true', but the 'Access-Control-Allow-Credentials' header is ''. It must be 'true' to allow credentials. Origin 'http://localhost:12345' is therefore not allowed access.
What happened here is that page tried to send the cookie to the different origin API server. Here is the sendRequest method from page
function sendRequest(url) {
var oReq = new XMLHttpRequest();
oReq.addEventListener("load", reqListener);
oReq.withCredentials = true;
oReq.open("GET", url);
oReq.send();
}
Notice the oReq.withCredentials = true; statement. The XMLHttpRequest object needs to set a property called withCredentials in order to share the cookie to the different origin server. However that's not enough.
The server should have responded with a header called Access-Control-Allow-Credentials with value as true in order for this cookie to be accepted. This request header works in conjunction with the XMLHttpRequest property. If withCredentials is true, but there is no Access-Control-Allow-Credentials header, the request will fail. Let's try again
Stop apiserver_creds_fail
Start apiserver_allow_creds
$ go run apiserver_allow_creds.go
What we done now is added support for Access-Control-Allow-Credentials header like htis:
Hopefully this has given a hands on experience with supporting CORS. There are few more optional headers supported by CORS. To learn more about the subject, please take a look at the links below:
]]>JSter #71: News of May 2016 - Part 2monthly-jster-may-2016-part-22016-06-03T03:32:23.000Z
The world changes. JavaScript stays.
I reached a major milestone with my book effort as I finished splitting up my book in two. If you are interested in either Webpack or React, check them out.
]]>JSter #69: News of April 2016 - Part 2monthly-jster-april-2016-part-22016-05-03T10:45:15.000Z
There are only two inevitable things in life: JavaScript and taxes.
Things are progressing quite well with my SurviveJS effort. I was invited to arrange a React workshop. As a result I created a set of slides. There are ten themes and each contains exercises at the end. So if you want to pick up basic understanding of React and the surrounding ecosystem, this could be a good chance to achieve that.
I also published SurviveJS - Webpack v1.1.0. As usual, there are minor tweaks, but also major improvements. There's more content now and I migrated to a smarter way to configure Webpack. It takes some pain out of the process and makes it easier to maintain complex configurations.
]]>JSter #68: News of April 2016 - Part 1monthly-jster-april-2016-part-12016-04-18T13:01:16.000Z
There can be only one JavaScript.
Weeks seem shorter these days. Despite that I managed to release a new version of my book. See SurviveJS - Webpack and React 2.1 for more details. Check out also the Webpack book. You can read it free online and a part of the income goes directly to Webpack author to support its development.
I still have to restructure the React book so that it doesn't have Webpack bits anymore. The idea is that once I complete this work, those who have bought the current book by then, will receive both. I feel this is the fairest way to deal with it.
]]>React and Preact: Differences, Pros and Consreact-vs-preact2016-02-20T03:55:11.000ZFor a while, React has been one of the favorite tools for front-end developers. Sometimes it can be a little heavy, though. A lighter alternative known as Preact is largely compatible with React. We'll go over the differences in this post and also cover pros and cons.
There are a few key differences you should take into account. Note that you can use both. It might make sense to use React during development and swap to Preact for production. You will need to make sure you will use the subset of features Preact provides, though.
react-lite is another interesting alternative worth studying.
As Preact doesn't try to do everything that React does, its implementation can be much leaner. To give you a better idea, a minified version of React weighs around 135 kB. Serving it gzipped you should get around 80 kB. This can be pushed further by creating a production build as it strips some of the checks. Minified and gzipped version of Preact weighs mere 3kB. This difference alone is huge.
react-lite sits somewhere in the middle somewhere between 10-20k when both gzipped and minified.
It contains a very complex and at the same time a well-architected codebase.
Preact contains a lot of React's features. Though Preact also offers a few advanced features as well, but it will take time before Preact will start getting recognition – just like React does – by the majority of users.
Cons
The large and complex codebase makes it hard for developers (especially novices) to contribute.
Given React is a library, you will have to do some of the legwork yourself. This means you'll have to figure out how to deal aspects such as data handling and routing.
Preact comes loaded with many more features than react-lite. For one, the former can be rendered to a static HTML string using preact-render-to-string. Also, Preact adds many convenient features all of which are inspired by the work carried out in the React community.
Both this.props and this.state can be referenced manually, which makes the process of destructuring cleaner than in vanilla React.
The inputs of the Linked State updates state changes automatically resulting in cleaner code.
Preact enables you to avail the benefits of React-style components even in older websites based on jQuery and Backbone without causing overhead.
When it comes to developing a standard app that comprises of components, Preact batches state changes and thereby boosts performance considerably.
Preact does not support synthetic event implementation of React. Instead, it relies on browser API. This could cause maintenance and performance issues due to impedance mismatch between the implementations if you are using them together (React for development, Preact for production).
Many people have different takes on using Preact over the React. You can study the opinions of developers concerning these technologies at the Hacker News thread.
It's always better to attempt using something that introduces improvements in some already existing technology. The same is the case with React and Preact. Preact does offers a few interesting advantages over React although you'll lose something in the process.
Maria Mincey is a software developer at Xicom Technologies, a software development company. They deliver comprehensive web applications for different industry verticals.
]]>JSter #64: News of February 2016 - Part 1monthly-jster-february-2016-part-12016-02-16T12:45:11.000Z
]]>JSter #63: News of January 2016 - Part 2monthly-jster-january-2016-part-22016-02-01T02:58:10.000Z
Ain't got nothing but JavaScript. Eight days a week.
My Webpack and React book reached 2.0.0-rc3. Feedback still keeps on coming so I'm still working towards a final release. After that the work starts again, but with a different direction.
If you want to ask me anything about Webpack or React, feel free to join my AmA (Ask me Anything).
]]>JSter #62: News of January 2016 - Part 1monthly-jster-january-2016-part-12016-01-18T11:32:46.000Z
JavaScript Enterprise Edition would come with classes, modules, etc.
My book project, SurviveJS - Webpack and React, reached v2.0 rc2. It might take a release candidate or two and it's ready for wider public I hope. But getting closer!
]]>JSter #61: News of December 2015 - Part 2monthly-jster-december-2015-part-22016-01-03T03:49:02.000Z
2016 - The year of JavaScript on desktop?
It was a good year for me and I did a little recap about SurviveJS. The upcoming 2.0 release is currently in beta mode. A beta or two and we're ready for a final version.
]]>JSter #60: News of December 2015 - Part 1monthly-jster-december-2015-part-12015-12-16T05:27:47.000Z
Make const, not var
The book keeps progressing. SurviveJS 1.9.15 incorporates a nice amount of improvements. It's likely the last release before 2.0. After that the cycle can begin again.
]]>JSter #59: News of November 2015 - Part 2monthly-jster-november-2015-part-22015-12-01T06:50:35.000Z
JavaScript can feed your cats/dogs/people.
Things are going pretty solidly with my React book. It reached version 1.9.10 with a nice amount of tweaks. There are still some coming as I want to improve the book while keeping it up to date.
I gave a presentation about it a while ago. In case you want to have an inside look at what it takes to write an indie book, feel free to go through my slides. The presentation digs more into the business side of things and it's a side you don't often get to see.
The bigger news is that we published React Indie Bundle. The bundle will be available for this week and my book is a part of it. It includes books, videos, and a bit of consulting on the higher tiers.
If you want to pick up something to do during the holidays, perhaps the bundle would work. It's also a fine present if you are into that sort of thing.
This is a good chance to support indie work. We even give a part of our earnings to tool and library authors. After all, it's those guys that enable everything in the first place.
]]>JSter #56: News of October 2015 - Part 1monthly-jster-october-2015-part-12015-10-16T02:54:59.000Z
JavaScript is just a great tower of Babel
My book about Webpack and React keeps on progressing solidly. Of course it is a continuous struggle against technology that goes forward constantly but it feels like a major milestone is near and a paper version is in sight. See SurviveJS v1.9.0 announcement for more information.
]]>JSter #54: News of September 2015 - Part 1monthly-jster-september-2015-part-12015-09-15T04:35:20.000Z
JavaScript singularity is close?
It's sometimes almost amazing to see how fast front-end development moves forward. As I was getting angsty on the subject, I wrote a post about it. In the end it just means we have to be more focused and try to filter out the essential trends.
My book about Webpack and React reached a significant milestone with its 1.8 version. There's new, Leanpub exclusive content. As usual, a large amount of improvements were made.
I also interviewed Dan Abramov, the author of react-hot-loader and redux. If you want to know a bit about the history and the future of the projects, read on.
]]>Mobile Application UI: 6 Definitive Trends in 2015mobile-application-trends2015-09-11T02:11:37.000ZIn less than a decade mobile phones have transformed from calling devices to little computers. As a result mobile apps have become hugely popular. This is evidenced by the success of platforms by Apple and Google.
As the devices have evolved, so have the demands for mobile apps. Given competition can only get tougher, it is a good idea to understand mobile UI trends. That's what this post is about. Let's go through six trends prevalent in 2015.
Flat user interfaces can be seen as a continuation to the idea of skeuomorphism introduced by the early versions of iOS. The idea was that we can bring people to the mobile by mimicking the real world. Now that people have gotten used to mobile, something new can be tried instead. That's what flat user interfaces are about.
They focus on simplicity and ease of use. Typically on a mobile screen you need clutter free design to facilitate quick access to what you want and flat interface just does that.
Over the years flat UI evolved to incorporate some important changes. With the inclusion of new elements like subtle layering of color, gradients and animated characters this design principle has become even more interesting and effective.
Flat UI is focused on content.
Flat UI offers a clutter free design facilitating absolute ease of access and usability.
With the evolving elements like subtle layering, animated characters and gradients, it became even more dynamic and robust.
Consistency throughout the app interface is something that has lost its appeal to more contextual, purposive and diverse UI elements. Thanks to a wide range of device sensors that provide timely feedback on user activities, location and preferences, now users can be approached with befitting contextual UI elements.
For instance, when the user of a travel app is boarding a train to a different city, the app can show him a detailed list of the hotels, restaurants, hangout places, cab services and tourist attractions in the respective city.
This contextual display of content has become more popular with latest location technologies and app analytics. A context is derived from several factors including the location, typical user preference, user habits, and such.
Contextual UI is practically and purposively oriented.
Through contextual UI the design elements meet the app analytics and latest location based technologies.
Advanced device sensors made user specific data a determinant factor in app UI design.
Navigation holds the key position in a satisfactory mobile user interface and user experience. Both ease of use and ease of access primarily refers to the ease of navigation. Bigger navigation buttons as part of flat UI design has become popular trend for some time. But that did not put a stop to this evolving trend of navigation that continues to be bigger.
Full screen navigation with large menu buttons is the latest trend that took user experience to the next level. Large menu and full screen navigation works great on mobile screens because this adds to the comfort and ease of mobile users to a great extent. Moreover, this design principle is also fully compatible with flat UI.
Full screen navigation is attractive at a glance.
It offers extreme ease of use and ease of access.
It works great with flat UI, another popular design convention.
Slowly the focus from smartphones is getting shifted towards smart wearable devices. Naturally, your app UI must be in sync with the wearable counterparts as well. Using multiple mobile, wearable and smart devices and accessing the same app from different devices is now a necessity your UI design must take into account. This means that:
The app UI must address the display and communication capabilities of the wearable devices.
UIs must be agile to offer optimum performance irrespective of the device in use.
Addressing diverse screen sizes and still maintaining consistency is important for UI design.
People love to hear a story even if it is about your brand or product. Instead of giving them dry information about your product or services or brand, engaging them with a storyline will engage more audience and make more people hear. With a right mix of visuals and texts you can tell a story about the brand or product and you would instantly see people engaged.
Storytelling is great for quickly grabbing interest and engaging audience for longer.
Storytelling talks of ‘how’ about the brand and product rather that ‘what’.
Visual engagement is crucial to make audience stay afloat and here what you have to say.
Hidden menu has lately become a popular design convention. Especially for mobile devices it has a lot of significance. If you try to display everything, it will clutter the view. Hidde menu creates space and looks better. Hidden menus are often represented by a small dropdown menu icon at the top right corner of the screen offering both space and ease of access.
It saves lot of space on the mobile screen display.
Following conventions like placing the menu icon at the top right corner is important for avoiding confusion.
It looks smart and helps accessing any part of app with ease.
Finally to conclude one must admit that the effectiveness of all the above mentioned design attributes cannot be judged from their independent face value. For instance, while using full screen navigation you may not be able to use storytelling for your UI to the fullest extent.
Hidden menu is fine as long as you gave it a conventional icon and placed it prominently where users generally look for menu. Similarly, you can further add punch to your flat UI with blurred background or with subtle color hierarchy in buttons. How better you maneuver these design-attributes to the advantage of your users that remains crucial.
Juned Ahmed is a IT consultant by profession and is working with IndianAppDevelopers company - the front runner in mobile app developers for hire. He believes in the power of mobile technologies and sharing latest information on iOS, Android development processes.
]]>JSter #53: News of August 2015 - Part 2monthly-jster-august-2015-part-22015-09-01T01:39:28.000Z
How do you comfort a JavaScript bug? You console it.
The Webpack and React book keeps on progressing at a solid pace. We recently reached 1.7.5 milestone with it. As the book develops, it becomes more accessible. There's also some new content on its way.
]]>JSter #51: News of July 2015 - Part 2monthly-jster-july-2015-part-22015-08-02T14:20:56.000Z
Every day is a JavaScript day
I've been working hard on my book about Webpack and React. Both are emerging technologies and this has been a good time to put something together on those just for the experience alone.
The book reached an important milestone with its 1.5 release. Check the free online edition out. You can get fresh news related to the book through its mailing list so free free to subscribe.
]]>A Complete Guide on Developing Cross Platform Mobile Appsmobile-framework-guide2015-07-21T01:36:04.000ZWhen developing cross platform mobile applications the question is how to do that. Going native has its benefits but then you'll end up having to implement an app per platform. Fortunately that's where various frameworks come into play. They hide some of the platform details from you while allowing code sharing.
It allows one to create a single code base and make it compatible with other platforms by making a few suitable tweaks.
You just need to learn one programming language instead of delving deep into a range of languages to deploy your app across multiple mobile platforms.
It offers a cost effective solution, as you won't need to hire various developers who possess niche expertise.
Since, you will be using a single code base, it augments agile mobile application development without compromising on the code quality.
With this approach, not only you will be able to quickly reach various mobile platforms, but it also ensures a sustainable success of your applications.
While developing a cross platform mobile application can leverage your business by widening your reach to a whopping number of mobile users, there are several aspects that must be considered beforehand. I have uncovered a few of them here, let's explore them.
Asset Reusability
The style sheets and designs are not transferable from one project to another. And, if we consider the designers' assets such as mock-ups and wireframes, it is not easy for developers to work upon that. For this reason, developers are rather required to regenerate the design assets from the complex style sheets.
To overcome the issue, designers are readily opting assets via cloud-based libraries that help eradicate the redundant design processes. This certainly facilitates professionals to seamlessly reuse the assets for various devices. Furthermore, it also enables one to reuse and share the assets across multiple projects.
Collaboration In Real Time
A flawless and smooth collaboration among the various processes (including conception, design and development) while developing an application is essential for a harmonious app.
This can be accomplished by taking the cloud-based workspace into account. This will facilitate the real time sharing of resources, like notes, tools, annotations, etc., to help both designers and developers to work in equilibrium. And thus, improve the app development time.
Genuine Form Factors
The proliferation of mobile has created bottlenecks by making it complicated for designers to design for every possible combination of orientations, screen sizes, resolutions, and other design aspects.
Today, designers can choose a better methodology, instead of implementing the traditional blank canvas approach. There are several resourceful tools like WYSIWYG tools available out there that can proficiently serve the cause. Designers can place their designs within genuine framework of the device. This certainly helps them to scour how the targeted device is responding to the fluctuating form factors. Thereby, ensuring the optimal UX for every device and platform.
Targeting multiple platforms both advanced and outdated mobile platforms
Whenever we develop an application for a superior platform and want it to run smoothly on other devices and platforms as well, there is always the risk of creating a poor UX and bad app quality. Luckily, this can be combated by making the content quality and features scale alongside with the targeted platform.
You must ensure the performance of your application on multiple platforms to attain a sustainable success in the market. By doing so, you can make it certain that if someone recommends your app to his friends, they can also run your app without getting restricted by the device that they own.
iOS Application approval time from the App Store
The Apple App store needs a considerable amount of time to review an application and approve it. Due to this chronically slow application submission process, iOS users are often not able to get the updates as early as other platform users get. Thus, to ensure that the updates of your cross platform application are reaching on time to your potential users, you must cautiously plan the design and development of your app. One of the solution to efficiently deal with this issue is to create applications embracing backward compatibility.
Fortunately, there is no dearth of effective and efficient tools and frameworks that facilitate one to conveniently develop a desired application. Let's have a glance into the blissful cross platform mobile app development frameworks that make a much sought after choice.
Appcelerator Titanium amazingly reuses the code while creating apps with native look and feel. It features a useful SDK and implements JavaScript to support cross platform application development for Android and iOS by reusing over 50% of the code. This open source framework saves a lot of valuable time, and being constantly maintained with a slew of developers, supports updated features.
Adobe PhoneGap is yet another prolific framework that delivers a fabulous performance. It makes code translation from CSS, HTML5 and JavaScript a breeze. This framework proficiently maintains the SDK separately for each mobile OS. It makes a much preferred choice for novice application developers.
Unity 3D is an incredible game engine that is known for delivering cutting edge graphics. Once you have developed your code in C#, Boo, or UnityScript, you can seamlessly export your app to a range of mobile platforms like Windows Phone, iOS, Android, etc.
Corona has been optimized for 2D graphics, Corona SDK enables one to quickly start developing applications in a desired manner. You can rapidly develop a gaming app with this framework, without beginning from scratch. Its possess Lua coding language (which is based on C programming language) that facilitates powerful app development with a flair.
RhoMobile is a great companion that makes it really simple to develop a cross platform mobile app without compromising on its quality. You can integrate supreme functionalities into your app, while creating an intuitive and intriguing interface. It offers a valuable video tutorial that certainly makes it easier to get started and develop an astounding application that can run smoothly on various mobile platforms.
I hope this guide will help you understand what cross platform mobile app development is and how you can reap its benefits to proficiently boost your business values. There is frameworks galore, but it is always advisable to keep your potential audience and business goals in mind while choosing a suitable framework to ensure a worthwhile approach.
Victoria Brinsley is a Android app developer for Appsted Ltd – a reputed Android application development company. In case, you are willing to avail a detailed information on the same, get in touch.
]]>JSter #50: News of July 2015 - Part 1monthly-jster-july-2015-part-12015-07-17T02:09:46.000Z
You know it's a JavaScript project when half of the files at project root are dotfiles
As SurviveJS has begun to gain some steam behind it I've set up a blog and a mailing list for it. Now the focus is on bumping up the quality of the current Webpack and React related book and going for a bigger release. So if you are interested in these topics, consider signing up.
]]>7 Tools for Hassle Free JavaScript Development7-hassle-free-tools2015-07-06T05:19:59.000ZThe rapidly growing interest in JavaScript has lead to an immense amounts of tools. From developer perspective it can be difficult to keep up as new ones keep on appearing. In this post we'll go through seven interesting ones. So let's get started.
If writing CSS has been giving you jitters, then Hitch is the tool for you. As a small i.e. 5.5k gzipped JavaScript prollyfill engine, Hitch provides you an extension model for your HTML and CSS. By including Hitch in your pages, you can go ahead with importing and leveraging CSS selectors.
Webpack, a module bundler, is one of those tools that on the first look seems very simple. Don't let the first impression fool you. Webpack is a powerful tool that in fact solves the fundamental problem of web development. By adopting Webpack you can eliminate a lot of manual configuration from your project.
Webpack overrides import statements and allows you to load arbitrary assets through them. Better yet it can create bundles just the way you want it to. For instance you might want to split bundles (ie. app/vendor bundle) or load some of the dependencies dynamically. Webpack can do this and a lot more. Thanks to react-hot-loader it a delight to use particularly for React developers.
ESLint represents the newest evolutionary step of JavaScript linting tools. It allows you to detect possible errors in your code early on and hence saves both time and nerves. Compared to earlier tools, such as JSHint, ESLint allows a wider range of customizability. You can implement your own rules easily for instance and tweak the tool to your liking. ESLint works well with Webpack.
As it can be painful to navigate through JavaScript projects using the GitHub user interface, Github Linker makes that a little easier. Using this Chrome extension you can jump directly to the target of a require statement. Even though this doesn't sound much every little bit counts.
Don't you hate it when people +1 a thread and then the thread gets all spammy? [GitHub +1]{https://github.com/ryanflorence/github-plusone-extension} extension for Chrome takes care of this. It will get rid of the gunk and show +1's in a tidy little box at the top of the thread. Now only if GitHub turned this into a real feature and hacks like this wouldn't be needed.
GitHub's Atom is the greatest and the most beautiful contender for Sublime Text. Sponsored by GitHub the project has a strong backing and keeps on moving forward at a blistering pace. It reached 1.0 milestone just recently. At this pace it will continue to attract even more developers to Atom camp. Even though it's not a full-fledged IDE it does provide a ton of packages you can apply in your daily work.
Even though I just said Atom isn't an IDE, Nuclide sure is. It has been developed on top of Atom as a collection of packages and tries to provide more uniform development experience than what you might get otherwise. So if you are already using Atom maybe Nuclide is worth a look.
Visual Studio Code is a strong, recent contender to Atom. Who would have thought you could run a version of Visual Studio on Linux or OS X one day? Well, here you have it. TypeScript fans should be thrilled!
So, that was a set of 7 impeccable JavaScript development tools that support you in simple and complex Java development. So, get on with making the most of
these tools for creating scalable, and well-maintained Java based applications.
Lucie Kruger is an application developer working with Mobiers Ltd, which is the leading Android application development company. She provides concrete information on latest information on mobile technologies like iOS or Android development processes.
]]>JSter #49: News of June 2015 - Part 2monthly-jster-june-2015-part-22015-07-01T04:43:41.000Z
skidding/cosmos - A development tool for designing truly encapsulated React components
]]>7 Useful HTML5 UI Frameworks For Mobile App Development7-mobile-ui-frameworks2015-06-30T09:29:41.000ZThanks to the advanced mobile app development frameworks available out there mobile application development is easier than ever. There is no dearth of prolific frameworks that facilitate developers to build captivating and trendy applications with a flair.
With the incessantly increasing demand of HTML5 mobile applications in the market, web developers are seeking tools and frameworks that can help them deliver remarkable UX. Fortunately, today we have HTML5 UI frameworks that are specifically designed to ensure an intuitive and classy interface to augment the usability of apps.
This post will showcase some of the best HTML5 UI frameworks available in the market.
UI frameworks are basically libraries that empowers developers to efficiently build applications that deliver a high end user experience. These libraries include some CSS and JavaScript based files, which are then required to be used in an HTML file. These advanced web technologies make them ideal for both native hybrid and mobile web application development.
The hybrid apps feature a native wrapper that empowers HTML5 to control the entire UX, and they are developed via some wrapping technology like Cordova. A wrapping technology facilitates HTML5 to efficiently access the native functions of a targeted device.
Now, I hope it's clear that how an HTML5 UI framework can augment the usability of an application. Here are some impeccable frameworks that make a much sought after choice; let's explore them one by one.
Twitter Bootstrap3 is the most popular UI framework for developing stunning mobile web applications. This advanced HTML, CSS and JavaScript compliant framework enable individuals from a novice to an expert to efficiently develop a desired mobile app.
It is specifically built to make front-end development a breeze, the source code of the framework implements famous Sass and LESS CSS preprocessors, and add to agile app development. Bootstrap3 is ideal to create responsive HTML5 applications with spectacular interface that can run seamlessly on any device.
Ionic Framework is a cutting edge hybrid tool that heightens hybrid mobile app development with the HTML5 technology. Its powerful, open source, front-end SDK enables one to design beautiful applications without compromising on the app quality.
It features a mobile-optimized library jam-packed with gestures, components (based on web technologies, including HTML, CSS and JavaScript), and resourceful tools. You can proficiently develop intriguing and highly interactive applications.
Works for a client-side MVC (Model View Controller) architecture, the Ionic framework is developed with Sass preprocessor and optimized for AngularJS. This helps deliver enticing performance with expeditious, feature-rich, powerful mobile applications. And, this is not it. The framework is not only ideal for app development, but also streamlines app testing process.
jQuery Mobile is the most commonly used HTML5 framework that is available around for a while now. This minimalist framework is built on the top of jQuery UI foundation. It delivers touch-optimized and responsive HTML5 apps that can smoothly run on various devices. It helps create cross-platform compatible results, and thus, makes a viable choice.
Kendo UI is yet another prolific HTML5 and JavaScript mobile app development UI framework that helps create apps with out of the box design and functionalities. It heavily depends on a set of various jQuery-powered UI widgets.
It is lightweight and expedites the development process without leaving the app quality behind. This open source framework supports the integration with both the powerful AngularJS and Bootstrap. While there are numerous ready-to-use themes, it also includes a built-in theme builder to help tailor the look and feel of an app in a desired manner.
Adobe Topcoat is a fabulous HTML5 UI framework that offers blissful features to develop modern mobile apps for free. The framework relies heavily on CSS instead of JavaScript, this provides a great control to designers. It, thus, facilitates designers to develop highly creative mobile applications with a flair.
You can develop impressive aesthetics with this captivating tool and ensure its success with a unique and engaging design. Although, the tool is primarily designed to meet the needs of desktop browsers, the integrated mobile stylesheet makes it perfect to develop touch-optimized mobile applications for mobile browsers.
Sencha Touch is one of the popular cross-platform HTML5 app development framework. It is an MVC (Modern View Controller) based framework and has gained a great momentum for developing hybrid applications.
It is exceptionally powerful and enables experts to deliver web applications with an amazing native look and feel. The intuitive interface of the tool makes it easy to develop pleasing applications embracing latest web design trends.
Monaca is yet another commercial mobile application development platform that supports Cordova plugins and HTML5 APIs. It facilitates flexible hybrid application development with cloud based IDEs with resourceful tools and services. You can seamlessly and flawlessly manage the app development process.
By using the suitable Cordava plugin, you can proficiently compile and launch your application on multiple mobile platforms. Moreover, being a framework agnostic, it allows one to work with a desired framework to reap the benefits of its cloud-powered services.
Although there is a huge array of HTML UI frameworks, only a few of them are reliable and worthwhile. Above mentioned are some of the commendable HTML5 UI frameworks that augment mobile app development while ensuring miraculous user experience. All these frameworks have their own benefits, so you must take your prime objectives and target audience into account to streamline your choice with a framework which is most suitable for your project.
This was a guest post by Addison Cohen. He is a mobile app developer working with Appsted Ltd, the leading mobile application development company which delivers most comprehensive mobile application solutions. He loves sharing latest information on mobile technologies like iOS, Android development processes.
]]>10 Web Development Tools to Speed You Upspeed-you-up-your-web-development2015-06-21T13:51:57.000ZWeb development is no more a daunting task as it used to be a few years ago. This has not been possible without the outstanding frameworks, tools and extensions.
Fortunately, there is a plethora of web development tools and extensions available out there that has made a web developer's life much easier. However, when an unlimited number of options are available in front, it often leads to confusion and ultimately make it hard to pick the most suitable option.
If you are a web developer and looking for proficient web development tools or extensions, we have compiled an array of superlative options available out there. Streamline your choice, and pick the best suitable tool as per your project needs and develop a requisite web solution with a flair.
Let's distill a list of noteworthy web development tools and extensions.
If you want to determine the font used in a web page that you liked, WhatFont Chrome extension makes a great choice. Although there are tools like Chrome Inspector and Firebug that facilitates one to determine the used font, these tools also demand expertise to deploy them. Thus, such tools are not recommended to individuals from non-tech background. However, the WhatFont extension can help one to determine the font by simply hovering over the text. It is extremely simple and easy to implement.
While allowing one to inspect a font used on an web page, it also helps one to determine the services used to serve the web fonts. And, for accomplishing this in an appropriate manner, it supports the Google Font API and Typekit.
Font Playground is an extremely resourceful extension that can benefit both developers and designers. By using this Chrome extension, you can seamlessly doodle with the local fonts and experiment the fonts available in the Google Font library. Also, since it allows one to tinker with the font attributes (like weight, text effect, font style, etc.,) without even making any real time changes, it makes a viable choice.
CssCop - FxCop for Stylesheets is yet another useful tool that analyzes the CSS used for appropriate browser compatibility issue, syntax, etc., by implementing the CSS Lint. Moreover, it also allows users to personalize the protocols adhered by CssCop as per their needs. So, you can tailor the functionality of the tool as per your project needs. This tool is compatible with different versions of Visual Studio, including 2013, 2012, 2010 and 14 CPT.
LiveReload is another useful tool that supports integration of the Chrome browser to make the genuine LiveRelad applications for Windows and Mac, and third-party applications (like Yeoman) run flawlessly and seamlessly. Its official website offers a complete guide to efficiently work with this tool, you may refer that before getting started.
Browsersync is a popular alternative to LiveReload. There is integration for popular tooling (Grunt, Gulp, etc.). In addition there is a browser based user interface, URL history and a remote inspector useful for debugging on remote devices.
CSS-Shack is a wonderful application for web and desktop users. You can efficiently create layer styles and push them in a single CSS file. You can efficiently accomplish both simple and complex tasks with this tool. Whether you want design websites or create a button only, it offers a proficient and highly creative tool.
To ensure that your website is embracing rules for better SEO, without leaving the site's performance and usability behind, the Web Developer Checklist offers a brilliant option. The tool offers a great way to make your site stand out among your competitors.
Have a better insight into the total request time, Database, view rendering and so forth by simply using the Rails Panel, a Chrome extension. It is quite easy to use and includes a documentation that further makes it easy for professionals to work on the web.
Angular Batarang is an excellent extension that has been developed by the Angular team with a great precision. You can efficiently analyze nested scopes, view the associated DOM elements and easily get insights into models. Moreover, you can also identify your app's expression's performance and visualize dependencies.
Ember Inspector is an invaluable tool that amazingly augments Ember.js debugging workflow. It basically helps inspect controllers, for which one just needs to select an element that renders in a context for additional information. You can also have better insights into models and the associated layers, attributes, etc. It allows you to work smoothly without delving deep into the Ember object graph. Both Chrome and Firefox are supported.
These are a few of the amazing web development tools that can help you develop a required web application with a breeze without compromising on the app quality. The aforementioned list also includes some exquisite tools that can augment web designing. Choose the suitable tools and extensions to conveniently develop a web application or a website and stay productive while delivering high end performance.
--
This was a guest post by Amanda Cline. Amanda has been working as app developer with Xicom Technologies Ltd- mobile app design and development company offering a range of software solutions like IT Outsourcing Services, Custom Software Development and Web and Mobile Application Development Services. Apart from this she has gathered an excellent amount of expertise as an IT support personal, blogger, computer programmer, App developer, a mentor and a trainer. You can contact her via @amandacline111.
]]>JSter #48: News of June 2015 - Part 1monthly-jster-june-2015-part-12015-06-15T06:21:47.000Z
]]>JSter #47: News of May 2015 - Part 2monthly-jster-may-2015-part-22015-06-02T08:17:54.000Z
There's no script like JavaScript
As hinted in the previous entry I have been working on a book. I have some good news. The Webpack/React book has an official site now. You can find the content there in case you are curious about the topic.
]]>JSter #46: News of May 2015 - Part 1monthly-jster-may-2015-part-12015-05-16T08:54:26.000Z
Always bet on JavaScript.
I've been working on a book about Webpack and React. If either of those technologies interests you, please check it out. There's plenty of material to study. You can also find the material at GitHub if you just want to have a quick peek.
]]>How to use React and Om to make a Single Page Applicationlearn-to-create-spas-with-react-and-om2015-05-04T05:48:45.000ZIn today’s guest article we’re going to use React, Om and Clojure to build a Single Page Application (SPA). SPAs are a great way to provide your audience with a desktop-level experience via traditional HTML, JavaScript, and CSS. While simple SPAs are easy to build using these technologies, large and complex SPA’s frequently become challenging to develop and maintain. One of the biggest challenges in these scenarios comes from a SPA’s reliance on JavaScript. That's where Om and Clojure come in.
In 2013 Facebook released React, a JavaScript library with a new vision for client-side HTML rendering. Unlike other client-side rendering engines, React maintains a “virtual DOM” that it compares to the browser’s HTML DOM. Instead of re-rendering the entire HTML DOM when the application models change, React calculates the differences between the virtual and HTML DOM and only updates the HTML DOM content that has changed.
Rendering only the differences makes React incredibly fast and efficient, allowing it to scale for handling large complex views that would perform poorly if rendered in other client-side frameworks like AngularJS or Ember.js.
Unlike AngularJS and Ember.js, React only acts as a view engine and does not implement the other components of a typical SPA framework, such as routing and model management. To build a Single Page Application (SPA) with React, it must be combined with other libraries or integrated with existing SPA frameworks, such as AngularJS. When integrated with AngularJS, React renders the view and relies on AngularJS to handle the other typical SPA responsibilities.
JavaScript is a fantastic language, and many of the proposals in ECMA Script 6 and 7 will improve JavaScript even more, but most developers find that once applications grow beyond a certain threshold, they regret the loss of compiled language features, such as static typing and refactoring. These language features help developers discover bugs earlier in the development process and help larger teams work with unfamiliar code.
To solve this issue, several groups of developers have worked to cross-compile their favorite language into JavaScript. Cross-compiling allows a developer to work in a compiled language, such as Java, Scala, and C#, where you can rely on type safety. When the code is ready for testing or debugging, a cross-compiler takes the source and produces the equivalent JavaScript for execution in a JavaScript engine.
Clojure is a Lisp-based language that compiles and executes on the JVM. With ClojureScript, Clojure can be cross-compiled to JavaScript. Developing a SPA in a language like ClojureScript allows developers to utilize Clojure’s features like static type safety and immutability when working with large or complex applications. The Om project allows a developer using ClojureScript to interface with React in a client-side application. Let’s get started using React and Om to build a SPA.
First we need to install some prerequisites. At a minimum you’ll need Leiningen, a JDK, and a Clojure-friendly editor. We recommend Light Table but you can even use Sublime with some plug-ins if you choose. Next, we’ll use Leiningen and a minimal Om template to start our project, mies-om. Open a command prompt and type the following:
lein new mies-om spa-tutorial
Leiningen sets up our minimal project template, but we’ll need some more modules to make a full SPA. As we mentioned, React does not have a router like a traditional SPA framework would. Here we’re going to setup Secretary as our router. We’re also going to pull in some helpers and macros to make Om programming easier, om-tools and http-kit. To make this change, edit your project.clj file to look like this:
Now we can test our changes, from the command prompt in your “spa-tutorial” directory, execute the following:
lein cljsbuild once spa-tutorial
Leiningen will pull our dependencies and build our source, cross-compiling JavaScript to the “/out” folder in your project. If you browse this folder you will see the JavaScript output from the core.cljs file as well as our dependent libraries like Om, React, and Secretary. To see if our tutorial worked, open a browser to the index.html file. You should see a big “Hello world!” message if you’ve made the correct edits.
Let’s look at the code in more detail. In the core.cljs file you’ll see our simple React component, defined as follows:
This component is a function that implements the IRender interface expected in the React lifecycle. Our function when rendered will produce an H1 containing the text from our app-state atom. We initialize our app-state atom to contain “Hello world!”. Go ahead and change this a few times and run lein cljsbuild once spa-tutorial to see it change in the browser.
We’ve removed our simple starter component and added four new components: index-page, contact-page, about-page, and the shared component, navigation-view. These components are registered with Secretary via specific routes using the sec/defroute statement. As the client-side route changes, Secretary will overwrite the contents of React’s virtual DOM div element whose id=“app”. React notices the change and diff’s the new virtual DOM state versus the browser’s DOM and renders only the changed contents.
Notice that in our code, each React component is simply a Clojure function that implements the IRender interface. Om provides a familiar way to build HTML using methods such as dom/h1 which renders an HTML H1 element. Clojure functions can call each other as shown in the interaction with the navigation-view. This allows us to build our page with React’s familiar component composition approach, breaking up functionality into smaller, reusable components.
If you want to learn more about using Clojure to write SPAs, you’ll want to investigate the many tools and utilities provided by ClojureScript and Leiningen. It’s very easy to setup a Clojure REPL connected to your browser’s window so that Clojure forms can be evaluated in the REPL console and the side-effects rendered into your browser.
You can also enable reloading of your cross-compiled JavaScript via a few changes to Leiningen’s command line and using a project like Figwheel. Both of these tools make developing Single Page Applications in Clojure more productive and can help when debugging your code.
If you enjoyed this article, please consider visiting their blog. You'll find frequent examples, guides, and comparisons of technologies, frameworks, and languages there.
The BHW Group Brett represents is an Austin-based web & mobile application development company. They have released over 300 applications using a wide array of frameworks and languages. They love tinkering with, testing, and writing about emerging and established technologies.
]]>JSter #45: News of April 2015 - Part 2monthly-jster-april-2015-part-22015-05-01T01:56:26.000Z
]]>React Native: The Future of Mobile App Developmentreact-native-is-the-future2015-04-17T03:27:49.000Z
For most users, Facebook is just a great way to keep in touch with friends and procrastinate. For developers, Facebook may be the company to shape the future of app development.
As Facebook’s portfolio of mobile apps is growing, the company has focused on developing better mobile apps, and recent developments might prove to be quite a game-changer in mobile app development. We’re talking about the React Native technology, an addon to the already popular React.
Facebook’s React was designed to create and design frontend interfaces. React Native takes things further, to mobile. You can author performant, JavaScript based mobile applications using it. The technology is already in use at some of Facebook's apps. It's impossible to know which parts are running on React Native and which are not.
React Native combines the joy of React development with unprecedented pace of development. You can avoid annoying compile cycles and focus on getting ahead. In addition you don't have to worry so much about underlying details. React Native takes care of a lot of that for you.
Native applications have to be built from ground up, platform per platform. This takes a lot of skill and expertise. Web applications do come with certain skill requirements but the situation is somewhat different. React Native builds on this idea and allows you to develop applications with native performance on less effort. You will still need to perform customizations per platform. Despite this React Native allows you to avoid a lot of work that would be otherwise necessary.
For starters, working with React Native removes the need to re-compile a work-in-progress app every time you want to test a new functionality you just added. React Native allows browser-like refreshing, essentially loading up the updated version of the code at the touch of a button. There have been experiments to avoid refresh and it might be just a matter of time till we reach that on mainstream.
This is a very innovative feature that will change the way developers think, write and test their code – no longer will they have to stress on getting everything right before going to testing, or wait for compilers to do their job; with React Native, it’s all simpler.
Since React Native will significantly speed up the coding and testing phase, errors are prone to happen, so that is another aspect the new framework focused on: error reporting. When an error is encountered, not only will React Native pinpoint it exactly into the code, but will also provide a clear explanation of what caused the error, and even suggest a fix. This will make troubleshooting a whole lot easier.
Shorter iterations increase quality and allow you to develop better applications faster. This is one of the main selling points of React Native in addition to the ease of supporting multiple platforms. You will still have to work hard but now you can focus the effort better.
React Native was only introduced for iOS initially, but the framework is going to be available to Android developers as well. As stated before you will need to do some work to make your application work on these platforms as support is provided. Even though it's not "write once, run everywhere" kind of approach, this allows you to customize your application to fit platform idioms. This results in better user experience.
So far developers that have worked with React Native have been impressed. Consider checking out the following testimonials:
If you’re a developer that writes native applications on just one platform, React Native doesn’t mean much to you. It’s basically just another way to do the things you already do. However, since React Native is JavaScript-alike, it represents a ginormous leap forward for web developers that want to tackle the field of native apps.
React Native will remove the need of learning complicated programming languages such as Objective C or Java – they can just put their JavaScript skills to use with React Native, and end up with a native app that’s feature-rich and easy to write. Mobile development just got easier and accessible to more people!
There are several websites full of resources and additional information on React Native, we've listed these below:
]]>Which JavaScript Frameworks to Use for Mobile Development?javascript-mobile-frameworks2015-03-22T14:42:24.000ZMobile applications specifically designed for mobile devices are part of a very fast growing market. Many app designers do not even need prior development knowledge. Knowledge of HTML, CSS and JavaScript will be enough to get you started. Any mobile application developed with web technology can now be used across multiple platforms
Thanks to the advancement in these products it is an excellent time for anyone to learn how to develop mobile apps. There are many tools online to assist in creating these mobile apps. Some of the best are:
Ionic framework helps you to build mobile applications using common web technologies. It has a large variety of tools to assist new and experienced designers with the creation of interactive apps. It utilizes Angular.js. This enables two-way data binding and excellent interaction with APIs and backend services.
Mobile Angular UI uses HTML 5 but in conjunction with Bootstrap 3 as well as the aforementioned Angular.js. It also utilises Bootstrap 3 mobile components. These are features which are not available in the standard Bootstrap 3, examples are overlays and sidebars. Impressive user interfaces can be created with a few simple Angular.js directives and only the necessary responsive media queries. These have been reduced to files to be added as needed.
Intel XDK is a free to use application and is available on Linux as well as Windows and Mac. Whilst you are developing UI frameworks it is capable of supporting Twitter bootstrap, jQuery Mobile and Topcoat. There are also some standard templates to assist the novice in getting started. An excellent feature of this product is the live preview on a connected device. This shows as you develop your app and allows you to manipulate it as you go for the best result.
Appcelerator Titanium is an open source mobile application framework which allows all users to contribute to improving the framework and apps created. The apps can be created for several different mobile platforms and is an excellent way to create hybrid mobile apps. There is a choice of backend services – mobile platform APIs or cloud based services. There are also independent APIs which allow easy access to phone hardware. The application uses Alloy which is a MVC framework. Modules developed using the framework are very easy to apply to different apps which is a huge timesaver for developers creating many different apps.
Sencha Touch is another product built on top of HTML 5. This product allows apps to be created which will work on iOS, Android and Blackberry. It is very popular with those developers who specialise in hybrid apps. It is very easy to use as it provides the same feel regardless of which platform it is operating on. The downside of this product is the time taken to get started. Although anyone with basic knowledge can use it, a developer who invests time in researching its tools and functions will achieve far better results.
Kendo UI is another product which uses HTML 5. The HTML 5 is a firm favourite for many mobile application development programs. This program utilises jQuery and several of its widgets. Any developer who has used jQuery before will find it very easy to use Kendo UI. The widgets remain licensed to Telerik but the majority of the rest of the program has been open sourced to allow the product to develop. There are several video tutorials to assist in getting started with this software.
]]>Quick Tips for HTML5 Game Developersquick-tips-for-html5-game-developers2015-03-01T14:51:59.000Z
When the HTML5 standard hit the web, a lot of things changed for the better. The new markup language boasted a whole lot of new features, and it didn’t took long for developers to jump in and put all the new tech to work. One of the fields that takes great advantage of what HTML5 has to offer is gaming; while browser games were considered soon-to-be-extinct due to the huge improvements brought by video games, HTML5 gives them another chance by allowing them to become a lot more complex, feature-rich, and visually appealing. If you’re planning on developing a HTML5-based game, here is a list of things to take into account.
One of the main advantages of HTML5 is that it manages to incorporate a vast majority of functions that were previously dependent on the resource-hogging Flash framework straightly to the browser, with huge performance improvements. While on a regular PC this doesn’t mean much, as there’s plenty of computing power available, on a less-powerful device such as a smartphone this is a true blessing. Smartphones, PDAs, tablets and plenty other devices can now run games that were previously a no-go. However, while computing power is no longer a problem, screen size is.
Most devices come with smaller screens and use various built-in zoom features that might interfere with a game in some circumstances, so you should consider optimizing the game for multiple screen sizes. Once you have your mind set on certain sizes, use the viewport meta tag and set the user-scalable setting to off in order to prevent the device or the user from scaling. This is also useful when the game uses touch-controls, as it prevents accidental zooms. Check out MDN docs for more info on the viewport tag.
Browser games used to be simple. “Used to” is the keyword here – they were simple just because the options were limited. HTML5 doesn’t have this drawback, though, so you can get as complex as you want nowadays.
Be that as it may, a more sophisticated game requires a more sophisticated approach. While simpler games have small sound and image files that are easy to load by the browser, a more complex game might have bigger files that take different times to load and execute, which can lead to an image/sound discrepancy.
To avoid such scenario, consider using a preloader that allows a game to load all its necessary resources before running. If you want to go the auto-way, there are various frameworks built specifically for creating games, which offer this feature as well as other useful features.
HTML5 is already designed to take advantage of powerful hardware that includes powerful GPUs and multi-core processors, but you can take multi-tasking to a whole new level with your game by using web workers to perform various tasks. The result is that the game will be better optimized to begin with, running faster and smoother, but it will also open up the path to a better overall optimization and load-balancing over the cores of the CPU, as it will already be divided into “chunks” that can be assigned to a core or the other.
Keep in mind, though, that web workers cannot interact directly with the UI, so some coding tricks will be needed to translate the current UI state to web worker friendly code. Check MDN for more information on web workers.
A major downside of old browser-games is that they lacked one crucial feature present in other types of games: saving. In the past, saving a game was only possible if the user was ok with creating an account (thus allowing the game to identify each user and save his personal preferences and stats on the server-side), or by using cookies.
Neither solution is very useful when the player attempts to play the game offline, though; luckily, HTML5 offers a different way of saving game with the help of DOM storage, which is a local storage solution. Unlike cookies, DOM storage does not expire after a certain time, making it a better approach.
If you just want to get something visible fast, you could use some boilerplate as a starting point. Examples of these are HTML5 Canvas Game Boilerplate and Mortar Game Stub. In addition many frameworks come with something to help you get started.
This will take help you to avoid some guesswork and get something visible faster. Of course as you get more experienced, you might just want to set up a boilerplate of your own to suit your tastes!
Just to recap, remember that you can target platforms beyond PC. Preloading can help you to get a smoother, or at least less confusing, gaming experience. Multi-tasking can help you to get some burden out of the render loop. If you don't feel like implementing a server based backend, you can get simple saving done using a local storage based approach. And finally boilerplates may help you to get up to speed faster.
This is the guest post provided by Jason Phillips and Airplane Games 365.
]]>JSter #40: News of February 2015 - Part 1monthly-jster-february-2015-part-12015-02-16T03:17:10.000Z
]]>Developing Games in JavaScript – Where to Start?developing-games-where-to-start2014-11-24T14:13:33.000ZDeveloping a game can be a challenging, complex task particularly if your aim is to make it attractive and packed with lots of capabilities. During the past few years JavaScript has become a good alternative to native development. It allows you to target many platforms at once.
The problem of course is where and how to start. You can definitely develop everything from scratch but often you might not have the time or interest to do all that. There are various libraries and frameworks available that encapsulate the most common concerns. Given the sheer amount of those, I’ll focus just on a few and try to go through basic functionality you might expect.
To get some initial idea of what Phaser, an open source licensed framework, is capable of, check out game mechanic explorer implemented using it. The mechanics are useful beyond Phaser so it’s a good resource to bookmark.
Phaser deals with a large amount of game development related concerns. I’ve listed its main features below:
Abstract interface over WebGL and Canvas (uses whichever is available behind the scenes)
Preloader to get your game assets loaded properly
Physics support through three different solutions ranging from something very light to a system with polygon and spring support
Sprites - besides showing graphics, you can deal with input as well. They can also be animated and grouped for easier handling.
Particle engine for jet streams and such
Multiple input options ranging from keyboard and mouse to touch
Sound support through various backends (Web Audio, HTML Audio)
Tilemaps so you can get that Zelda clone done
Device scaling to support multiple targets better
In addition their engine is a plugin based one meaning it should be easy to extend in case you are missing something. If this sounded interesting, head to http://phaser.io/ in order to learn more about the engine.
Crafty, another open source alternative, shares a lot in common feature-wise. There is no WebGL support as of yet, though. The idea is the same in that there is a common interface over Canvas and DOM. It would not surprise me if Crafty supported WebGL one of these days.
Physics-wise it’s a more limited alternative as well. It looks like there is some third party support for the popular Box2D library and some basic collision detect in the library itself but that’s about it.
Based on their tagline open source (MIT) Pixi focuses on performance. It is also a library, not an entire framework, so you are expected to use other libraries for the missing bits, such as audio or physics. You will get a lot of ready, though, as Pixi deals with asset loading, sprites and device interaction for you.
If you prefer to build your game out of perhaps easier to understand bits, Pixi could be a nice starting point: http://www.pixijs.com/.
You could say the tagline of Impact doesn’t hold anything back. It comes with all the bells and whistles and there is a level editor included to make development easier. This doesn’t come for free, though. Expect to shell out $99 for a license. See http://impactjs.com/ for more information.
I know there are heaps of JavaScript game engines out there. It is difficult to say where to start. It all depends on what you are going to do and how much you are willing to invest. If you want to go the commercial route, you might as well pick Unity. On the other hand some of the alternatives discussed here could do the trick as well.
There are pretty much two different approaches you could choose from. You can either pick a framework and hope it covers most, if not all, of your needs. Alternatively you could compose your game out of smaller libraries each of which cover some specific task. In this case you would pick something like Pixi and choose libraries to complement it as you hit the boundaries.
That said it is possible to extend frameworks such as Phaser and Crafty thanks to their flexible architecture. In practice it is a little difficult to say where the limits of this approach are. In the worst case you will need to modify the frameworks themselves to get things done but then this problem applies to libraries as well.
This post was written in collaboration with Jason Phillips and Dirt Bike Games 365.
]]>JSter #34: News of November 2014 - Part 1monthly-jster-november-2014-part-12014-11-16T08:37:02.000Z
]]>5 of the Best Chrome Apps Available Today for Web Developersbest-chrome-apps-for-devs2014-10-05T13:22:38.000ZBeing a web developer nowadays is far different from what it used to be; I still remember when all you needed in order to get going was a text editor and a bucket of coffee. Nowadays, though, technology is changing at such a pace that it only takes a few blinks and you’ll end up falling behind with everything.
The best way to stay atop of the game is to make use of every resources available out there in order to simplify or automate everything you can in the development process, and one of the easiest methods of doing so is by customizing your web browser with the right apps to take you through the day. Here are five of the best Chrome apps that are totally worth your attention.
Chris Pederick’s Web Developer app is one of the most iconic apps in the field of web development, and it’s easy to understand why: it has pretty much everything you can think of. The initial extension was developed for Mozilla Firefox, being one of the primary reasons developers chose to use Firefox, but its recent porting to Chrome might have developers moving to Chrome as well.
Web Developer offers access to information about all the key elements of a webpage at the touch of a button, making it easy to view and edit code on the fly. If you’re looking for an all-in-one solution, Web Developer is it.
Slow-loading pages are every developer’s nightmare, especially after spending countless hours on creating the perfect code. Making things even worse is the fact that this usually happens due to a minor JavaScript or CSS function; here’s where PageSpeed Insights comes into play.
While there are multiple sites and apps that provide page speeds assessments, most will only tell you that there’s a problem, without actually indicating where it is, or how it can be fixed. PageSpeed Insights does exactly that: analyzes the page, identifies problems and provides solutions. The Google Chrome app is especially useful if you’re working on an offline site, and want to make sure everything is in top shape before having the site go live.
If you’ve ever found yourself just staring at a website and wonrdering how a certain feature was created, or what framework’s in use, Wappalyzer is the place to search for answers. This tiny app provides detailed information about every web page, and the technologies behind it, allowing you to get a better understanding of various things, which you will ultimately use to your advantage.
Wappalyzer comes with a large library of content management systems, platforms, JavaScript frameworks or web servers, so finding out what’s making a website’s wheels turn won’t have you digging through the source code for hints anymore.
The JSON format for storing and transporting data is becoming more popular by the day, with a lot of websites making use of it in an effort to become more developer-friendly. Be that as it may, browsers are not very JSON-friendly yet, meaning that JSON content won’t be displayed in an organized manner that’s easy to follow.
JSONView is here to save the day, offering two different methods of parsing JSON content (direct extraction from the page or via an additional XMLHttpRequest) and displaying it in a readable stream of data.
Cookies are natural elements of all websites, but sometimes they tend to store a little bit more than they should have. If you want to test the behavior of the cookies generated by your own website, or any other site, EditThisCookie is one of the easiest ways of doing it.
Simply install the app and, with a single press of a button, you’ll get full access to the cookies generated by the site you’re on. You can easily view, edit and even lock the contents of the cookies, basically taking full control over the way cookies work.
So there you have them – five of the best Google Chrome Apps and extensions available for web developers now. What are your apps and extensions of choice?
This is a guest post by Jason Phillips and Train Games 365. Thanks Jason!
]]>JSter #31: News of September 2014 - Part 2monthly-jster-september-2014-part-22014-10-01T15:10:32.000Z
]]>Monthly JSter #15: News of January 2014monthly-jster-january-2014-part-22014-02-06T13:39:31.000ZSo we managed to beat January. Good riddance! As usual it was a busy month for JS peeps. A lot of new libraries came out and a good deal of excellent content became available.
]]>Monthly JSter #14: News of January 2014monthly-jster-january-2014-part-12014-01-20T04:12:43.000ZTime to JSter again. This time we have quite the mixed bag and a couple of new categories even. Say hi to war stories, React, Build Systems and Dependency Management. Facebook's React has gained some hype in particular. Time will tell whether it will stick. Same goes for Gulp, a build system that aims to shake the hegemony of Grunt.
No matter what happens developers win as the tools and libraries become more mature. It's a good time to be a web developer. Something new to learn every day. :)
Remember that Monthly JSter is available as a newsletter. Our RSS feed contains some occasional extra content including interviews or book reviews.
4 Smooth Angular.js Application Tips - Tab highlighting, services, retaining state from view to view, AJAX calls from services. There. Spoiled that for you.
]]>Monthly JSter #13: News of December 2013monthly-jster-december-2013-part-22014-01-02T04:18:31.000ZJSter #13, and a new year, is here! A lot happened in the world of JavaScript the past year. Let's just say it was a good year for us developers. Many interesting releases were made and the tooling keeps on improving. There is still plenty to do of course. And if everything goes well, I think jster.net will look quite different the next time I write this post.
This was the first year for us with "Monthly JSter". It's more like biweekly JSter now as that makes more sense for both me and you. Perhaps a weekly schedule would be even nicer? Less content, more often. This is definitely something I need to consider. Also if you have any specific ideas, feel free to contact me directly and I'll see what we can do.
Remember that Monthly JSter is available as a newsletter. Our RSS feed contains some occasional extra content including interviews or book reviews.
Monolithic Node.js - Even if you don't use Node.js, you should read this long article. It's a very refreshing take on web architectures and helps you understand why monolithic architectures should become a thing of the past.
What're we doing today, Brain? The same thing we do every day, Pinky. Javascript.
]]>Monthly JSter #12: News of December 2013monthly-jster-december-2013-part-12013-12-19T01:58:06.000ZJSter #12 has arrived. Some things of note happened earlier this month. Ember 1.2.0 came available. Also Zepto reached 1.1. The new version includes support for IE11 and performance improvements. In addition PayPal announced something interesting Node.js related and overall the community just kept on churning out cool stuff.
Remember that Monthly JSter is available as a newsletter. Our RSS feed contains some occasional extra content including interviews or book reviews.
Developing websites and services has never been as easy as it is now. There is a massive amount of technology available. Almost too much. And the pace isn't slowing down. On the contrary!
Especially since JavaScript broke through so to speak, the speed of development has been immense. During the past few years CSS frameworks, such as Bootstrap or Foundation, have made their way to the arsenal of web developers. On the backend side, Node.js has made waves. It is a good time to be a web developer.
One of the interesting developments has been the resurgence of static websites. They are simpler to understand than content management systems (CMS). Static by definition they are lightning fast to serve. Some of the dynamic functionality required may be implemented using JavaScript and external services. It is possible to get the best out of the both worlds.
In this article I will show you how to implement a simple static site generator using Node.js. I expect that you understand JavaScript and programming on a basic level. You should be able to pick up following skills by reading it:
understand how to set up a Node.js project,
learn how to use commander to build cli user interfaces,
have a basic idea of what makes static site generators tick,
learn how to use async to take control of asynchronous control flow.
Static site generators are simple on technical level. They simply transform content into a static format that is easy to host. Just dump the files on some server and off you go. The backend required is very minimal.
Compared to content management systems (CMS) they are somewhat crude. You will not be able to modify the content easily through a web based interface. At least without using a separate service.
Fortunately the security, speed and hosting advantages make up for it. Especially technically oriented people may find a static generator driven approach very lucrative. You can use git as your backend and edit the content in your favorite editor. No need for clunky web interfaces.
The speed advantage may be further increased by using a CDN that serves your static content close to the user. This can be beneficial also considering uptime. If your content is cached and served by another provider, it does not matter if your server goes down for a reason or another.
One of the biggest advantages static site generators have is the ease of maintenance. In case you are using a CMS, you will have to make sure your platform is up to date if you are hosting it yourself. This applies to static sites to limited extent.
The line between CMS and static generator can be blurry at times. It looks like services that make static generation more like CMS pop up continuously. That way it becomes easier for mainstream to adopt them.
It is no wonder there are so many static site generators out there. They are easy to implement. Just because there are not enough of those yet, I will show you how to create your own.
The basic recipe is very simple. In this case I will mimic the design of Jekyll, a popular generator. I will use Node.js for the implementation. Before getting ahead with that, it is a good idea to discuss through some basic concepts and technical design.
One important thing that most static site generators provide is a separation between layout and content. The idea is that the content will be injected within some layout in the end result. We may also inject some common metadata, such as the site author information, to it.
For its content Jekyll implements an interesting idea known as a YAML head matter. To give you a better idea of what the content looks like, consider the example below:
layout:'default'title:'Static sites are fun!'author:'John Doe'---Staticsitesarefun!Yes,theyare!
First we define that we are going to use a default layout for this content. Then we have some metadata related to the post. We may use this information at the layout. We can also use the information when generating a blog archive for instance.
The layout will contain specific slots in which we will inject the data. Besides the metadata above we will have a special slot known as content. That represents the text part of our post below ---.
Now that we have some understanding of what we need to implement, it is a good time to get started with it. If you do not have Node.js set up yet and want to follow along, go at http://nodejs.org/ and follow their installation instructions. After that you should have node and npm commands available at your terminal.
I will call my generator as yayassg (Yet Another Yet Another Static Site Generator). Incidentally yassg was taken at NPM so I had to settle for something else. If you want to develop yours further and release it at NPM, it is a very good idea to Google around for a while and check if the NPM entry is free.
As I like to use GitHub for hosting my project, I naturally use git for versioning. I tend to follow a certain project structure for projects such as this. My cli projects usually look like this:
.gitignore - Ignores node_modules/ at least
README.md - Describes the basic idea of the project
LICENSE - The licensing information. I like to use MIT for my projects
bin/yayassg - The cli entry point
lib/ - The library parts
package.json - NPM registration information
node_modules/ - Local Node.js modules installed by NPM. This will not be versioned
NPM comes with a handy command known as npm init. Simply invoke that and it will ask you a series of questions related to your project. Most of the defaults are fine. In this case you may want to change the entry point of the project to lib as that is where we will be storing our library functionality.
After you have generated the file, you may want to add the following line to it:
"bin":"bin/yayassg"
This tells NPM where to find the entry point of our script. Study https://npmjs.org/doc/json.html to understand various properties of the file better.
It is probably a good idea to implement that bin/yayassg then. After creating the file, remember to set it as executable (chmod +x .yayassg).
NPM contains a lot of modules that help in creating clis. One of these is known as commander. In order to add it to your project, execute npm install commander --save. That --save flags adds it to package.json in your project dependencies automatically. Sometimes it may be handy to add some dependency just for development usage (say testing). In this case you may want to use --save-dev instead.
Getting started with commander is quite simple. I have provided initial version of our cli below:
After defining these two files you should be able to execute the cli using bin/yayassg -i input -o output. It doesn't do much yet but at least it runs.
Next we need to define the whole logic and transformation part of the generator. The interface is quite simple. In this case we will rely on convention. We expect to find layouts from _layouts of the input directory. We need to go through each Markdown file there and then convert those into HTML at out output.
As using native filesystem API of Node.js can be a bit cumbersome, let's summon async and glob to rescue! Simply npm install async glob --save to add the library to the project.
Let's try to read our input files and layouts into variables next:
We still need to transform the input files and put the output at an appropriate place. For the input we will need to separate the front matter and actual content. Layouts are easier. We can get away simply by compiling them. All of this will happen at the main function.
To be honest my initial go at it looked quite messy. Fortunately I managed to simplify my solution a lot my reformulating it as above and by utilizing caolan/async utility module. It is one of those modules that makes it a lot easier to deal with asynchronous code.
In this case I could have used synchronous, blocking versions of the file operations but I rather avoid that and do things the "hard" way. As an additional benefit of doing things the async way, it becomes very easy to split out tasks to separate Node.js processes. This can be somewhat beneficial.
There are a couple of things here that you should understand. First of all that bind may seem a bit weird if you haven't used it before. It allows us to perform partial application in JavaScript. Say we have a function add that takes two parameters: a and b. We could define var addTwo = add.bind(null, 2); and then invoke that with addTwo(5) to get seven.
It is one of those simple yet powerful concepts. If you are familiar with OOP and inheritance, this is the same thing but for functional programming. It allows you to specialize functions. In this case we use it to pass some extra data to our primary functions and make them more suited for this particular purpose.
In case you are wondering what's that null at the beginning about, it's the context or this of the function. That should explain it. If not, look into this at MDN.
Next up you should understand how async.parallel and async.waterfall operate. async.parallel executes a list of given functions in any order. It expects the functions execute a callback (cb(error, value)) passed to it. Finally it will execute a function with the possible error and the results gained in a list. The order of the list is guaranteed to be the order of the original one.
async.waterfall executes the given functions in order and passes the result of the current one to the next till finished. The result will be available at an optional function just like in async.parallel. In this case I use waterfall literally to read and process.
This one uses an utility known as async.map. It executes a given function for a given list of items. Finally it executes a function with the results. If you have used map before, you should be familiar with the idea. For those not familiar with the idea, consider the following fact: [34, 2, 3].map(function(v) {return v * 2;}) yields [68, 4, 6]. It is just a mapping from a space to another.
We still need to understand a couple of functions before we have something that works. The missing ones are saltInputs, compileLayouts and transform. Let's start with the salty one:
The idea of this function is to take our input and then map it into a format that is useful for us. I decided to call this function salt as that's what it does. It takes something and then adds some spice to it. In this case we deal with our front matter and content logic. The front matter is parsed and content is extracted. In addition it figures out where to place the output based on path.
I decided to use an external module for parsing YAML. You can add it to your project simply by invoking npm install yaml --save.
compileLayouts is another simple one. I got a bit lazy here and decided to compile all the available layouts whether or not they are used by input. You can try to implement that as a bonus exercise. Remember that bind is your friend. Here's my implementation:
var hbs = require('handlebars').compile;
// ...functioncompileLayouts(layouts, cb) {
var ret = {};
layouts.forEach(function(layout) {
ret[getName(layout.path)] = hbs(layout.data);
});
cb(null, ret);
}
Given the handlebars compiler we use is synchronous by its nature, we don't have to use any async helpers in this case. A simple forEach will do. We aggregate the result in an Object (layout name -> compiled layout) as that works well with out input format.
Funnily enough this function is one of our shortest ones. This is due to the fact that our data structures are somewhat ready at this point and all we need to do is to interpret them correctly. In this case we simply iterate our inputs and write them to output while compiling our content to the layouts.
If you followed along you should have now something that compiles. In case you want to see the source code in its entirety, check out https://github.com/bebraw/yayassg. You can also install the generator via NPM using npm install yayassg -g. Atfer that yayassg -i input -o output should work.
The implementation we have so far is more of a proof of concept. You can definitely use it for simple sites already. There is a lot of room for expansion, however. I've listed some ideas below:
add some visible output there (console.log),
provide progress information using progress module,
set up global configuration available for each layout (ie. config.json at input root),
load only layouts that are actually used by input,
compile only input that has changed.
Where to take it depends entirely on your needs. Remember that you can use npm version x.y.z to bump up the version number of your module. This will update package.json, set up a git tag and perform a commit for you. That is very convenient! After that just hit npm publish (and possibly npm adduser before that) to make your module available for consumption.
In case you don't feel like coding and would rather work with something existing, check out the static generator listing at JSter. That will serve as a starting point.
]]>Monthly JSter #11: News of November 2013monthly-jster-november-2013-part-22013-12-01T15:12:49.000ZJSter #11 is here. Yes, it's the dark and cold season of the year (except for those down under). And JS peeps still keep rocking. This time we'll have an extra batch of demos.
Remember that Monthly JSter is available as a newsletter. Our RSS feed contains some occasional extra content including interviews or book reviews.
I like the smell of fresh JavaScript in the morning.
]]>Monthly JSter #10: News of November 2013monthly-jster-november-2013-part-12013-11-15T15:15:45.000ZJSter #10 has arrived and is again packed with content. Remember, if you happen to come by some cool stuff you wish to share, you can always poke us at Twitter.
Remember that Monthly JSter is available as a newsletter. Our RSS feed contains some occasional extra content including interviews or book reviews.
JavaScript Cryptography Considered Harmful - Yes, it's a cliché title. TLDR; Don't use crypto inside browser. It's hard even if you know what you are doing. Just go SSL.
JavaScript Tutorial: Getter & Setter Properties - If you have ever used Python's properties, you will love this. The syntax is a bit cumbersome but the functionality is somewhat priceless.
You might be familiar with Zepto.js, or just Zepto, already. It is the smaller brother of jQuery developed by Thomas Fuchs. It shares most of the API while weighing a lot less. Hence the name Zepto (10^-21).
I have used Zepto before a little bit earlier. It is one of those libraries that is particularly useful in a mobile context where it is important to minimize library size. Apart from that it does not excite me a lot honestly.
This time I will be reviewing a book Instant Zepto.js by Ian Pointer. It is a part of Packt Publishing's Instant series. This means the book itself is very light, just 48 pages out of which around 30 have been dedicated for content. The book is available only in e-book format and costs around ten euros/dollars. Even though quite cheap is the book worth it?
The book comes with support material. The fastest way to get started with that is simply to clone the repository, install serve (npm install serve -g), execute serve at your clone directory and then surf to localhost:3000 at your browser. Studying the examples should give you some idea of the contents of the book. There is also a TOC available at Packt site.
The beginning of the book goes through basic functionality of Zepto and contrasts it with jQuery. It would have been a very good idea to highlight the fact that certain pseudoselectors, like :first, don't work with Zepto. That selector in particular had slipped into an early example.
At times the code could have been formatted better and it could have benefitted from syntax highlighting. It is one of those small things that makes a difference.
Next the author goes through top three features of Zepto. These include animation, build system and mobile device support. Whereas the beginning was more like a reference these have been explained through examples. A good move.
Particularly the mobile examples rely on iOS. It would have been a nice idea to show how to emulate the touch events on desktop. After all you might not have a suitable device available.
The final parts of the book show how to check if a jQuery plugin works with Zepto and how to write your own Zepto plugins compatible with jQuery. Finally there is a brief discussion about differences of jQuery and Zepto.
The author lists Zepto related resources at the very end. A nice touch.
I have mixed feelings about the book. There is definitely useful content but is it worth ten bucks? It feels like the content and examples could have been pushed further. Particularly presentation could have been improved.
I would have appreciated discussion on common Zepto related problems. An app level example would have been very useful as well to see how it works as a part of a bigger whole.
If you are looking for a quick introduction to Zepto and don't feel like crawling through blogosphere, this might be a good starting point. Don't expect miracles, though.
If you want us to review a JavaScript book, stay in touch! We are open to ideas.
]]>Monthly JSter #9: News of October 2013monthly-jster-october-2013-part-22013-11-01T22:23:20.000ZTime for the second JSter blast of October. We've got some nice resources coming right up! There's even a headless Halloween surprise in store.
Remember that Monthly JSter is available as a newsletter. Our RSS feed contains some occasional extra content including interviews.
Riot.js - MVC framework, in 1k! According to the author it is "The fastest, smallest and most powerful way to build large scale web applications". JSter entry
Speed dating is awful. 7 minutes isn't long enough to explain closures to someone.
]]>Monthly JSter #8: News of October 2013monthly-jster-october-2013-part-12013-10-16T11:38:22.000ZOkay guys. We're going to try something a little different here. On average we tweet around three times per day at @jsterlibs. Roughly that means 90 links or so per month. That's a lot to click through.
As a result I'm trying out something a little different here. How would a bi-weekly publishing schedule sound? Then it's 45 links and I have time to include some commentary and there's less to click through. Everybody wins!
Remember that Monthly JSter is available as a newsletter. Our RSS feed contains some occasional extra content including interviews.
Node.js and the new web front-end - The good news is that we can leave business logic for the languages that are a good fit for that and insulate ourselves from that.
When a JavaScript date has gone bad - "Don't call me, I'll callback you. I promise!"
]]>Monthly JSter #7: News of September 2013monthly-jster-september-20132013-10-02T10:01:18.000ZSeptember, another month filled with JavaScript coding! The community definitely kept busy again. This time we have an extra dose of demos available. You might also be interested in js13k entries.
Remember that Monthly JSter is available as a newsletter. Our RSS feed contains some occasional extra content.
To make a mistake is human and to repeat that mistake over millions of browsers is JavaScript.
]]>Taming Big Data - Interview with Udi Falkson of iknow.iotaming-big-data-with-udi-falkson2013-09-19T14:18:16.000ZThese days it's very easy to bump into term "big data". What is it like to develop a service around it? That is what we are about to find out as Udi Falkson of iknow.io will tell a bit about his story and some of the technology choices they have made.
Hi, @udi. Can you tell us something about yourself?
Hi. I'm Udi, the co-founder and head of product at iknow.io. Earlier in my career, I was one of the first engineers working on Yahoo! Answers and I'm also the creator of isitnormal.com.
The amount of raw, available data out there in the world is growing exponentially. Sites like data.gov and others are giving the public all kinds of great data to play with. However, no good tools have emerged to make all this data accessible and useful to the majority of people that really care about it. This is what we're changing with iknow.io.
Today, unless you're a computer programmer or a scientist, working with anything more complicated than what will fit into a simple spreadsheet is not possible. Most people are shut out of the game. We are taking these complex data-sets and making them useful for anyone to explore and analyze. We do this by sourcing, merging and cleaning the data and providing a new breed of intuitive data analysis and comparison tools for people to use.
We currently have detailed data about Movies and US Congress. NBA data is coming very soon, and many more verticals will be added in the future.
What we are doing is extremely technically challenging. Our amazing back-end team has built systems from the ground-up to scalably handle extremely large datasets of drastically varying structures. To account for the different ways that data can be organized (for example, movie data and congressional data have very different structures), we have built our systems around a proprietary graph database. To complement our graph database, we make heavy use of existing technologies, like Redis, Mongodb, Sphinx Search and Postgres.
The biggest challenge we've encountered is that data is messy, really messy. This fact led us to build a suite of in-house data cleanup and matching tools that have enabled us to efficiently load, update and organize these complex data sets and provide them to our users in a seemingly simple format that hides the real complexity from them.
On the front-end, our data analysis tools are rather advanced and it's taken our very small front-end team (just me) quite a bit of work to get them working nicely. There are also a few particular UI touches that required quite a bit of effort to get working across all browsers, such as our data results table view that has persistent horizontal and vertical scrolling headers.
Most of our front-end code is standard server-side Python (Django). For our more complex and interactive data analysis tools, we opted to provide our users with a more responsive, client-side experience. We used Backbone.js for this, and the client-side UI communicates with our query engine via REST apis. I selected Backbone after a lot of research and I'm more or less happy with it. It's relatively light-weight and there's very little magic, but I have run into a few small bugs and the code can get messy if you're not careful. A Backbone program will be only as good as the programmer writing it, because it does very little work for you. What it does do is give you just enough of a structure to work with so you can keep things manageable and maintainable.
That said, I'm very interested in Angular and Ember and have read a lot about them. When I started building iknow.io nearly a year ago both of these other frameworks were not quite as mature and I didn't feel comfortable going with either one. If I were to start over again today, I think I'd give them both serious consideration and I'm leaning towards Angular for my next such project.
Javascript is being used more and more on the server, and it has become tempting to use it for the whole stack to be able to share code between the front-end and back-end. In our case, Python is so strong when it comes to number crunching (we make heavy use of Pandas), that it didn't make sense for us to do so, but I see this becoming more and more common in the future and I know a few people that are building sites this way today.
]]>Monthly JSter #6: News of August 2013monthly-jster-august-20132013-09-02T15:03:34.000ZThe JS people have been busy as ever it seems. Time to go through some highlights of the month.
Remember that Monthly JSter is available as a newsletter. Our RSS feed contains some occasional extra content.
Psst. If you happen to come by some awesome content and would like us to feature it, poke @jsterlibs at Twitter.
The only color Chuck Norris uses in his CSS declarations? #bada55
]]>Sorted Maps in JavaScriptsorted-maps-in-javascript2013-08-26T22:31:02.000Z
This time we have a guest post by Monmohan Singh. He is the author of dsjslib, a collection of data structures.
JavaScript objects themselves can serve as Maps.
There are some caveats but by and large
it is possible to use plain Objects as Maps in JavaScript.
However a JavaScript object by default can't be used as a ordered Map (ordered on keys) .
ECMAScript specification doesn't define any explicit ordering of keys (while enumerating or otherwise). Most Browsers iterate over
properties in the order they were created.
Sorted Maps are a data structure available in other languages (example TreeMap class in java collections)
Note that the ordering happens on dynamic data set. This means that the ordering is maintained irrespective of new
insertions or deletions to the Map. Compare that to say using JavaScript Array sort() which is static i.e additions/deletions
of elements in the array will not maintain order or require repeated sorts to maintain order (which would roughly be O(N*logN) cost everytime)
This structure can be used in applications where the need is to
automatically maintain a sorted order of objects
the set of objects can dynamically grow or shrink
able to iterate through the sorted list of objects
able to lookup the objects based on some key
In this article, we will discuss in detail about AVL Tree implementation in JavaScript which can be used create a sorted Map on dynamic data set.
It is taken from dsjslib, a collection of some standard data structures (like sorted map) not available in JavaScript.
AVLTree in dsjslib is a Sorted Map with O(log N) access time for insert, delete and find operations . Also provides listing the sorted keys and values in O(N) time.
The article assumes some familiarity with Binary Search Tree data structure
A binary search tree is a binary (each node has maximum of two children) tree with the additional property that for each node, the key is greater than the key of its left child and less than the key of its right child. A simple but powerful data structure.
Below is a binary search tree built from the following sequence of keys:
15, 11, 21, 17, 13, 9
BST allow insert, delete and search of a key in order of height of the tree (O(h)). Searching basically involves comparing key in each node and then deciding to go left (if key is less than the node or right if key is greater) .. This means that the number of comparisons would less than or equal to the longest path from root to leaf (or in other words the height of the tree). So as long as the height of the tree is kept small we are good. In simple BSTs height depends on the sequence of keys being inserted.
Here is a BST for following sequence of keys 9, 11, 13, 15, 17, 21
It’s not a tree anymore but a linked list!!
Now insert, delete and search take order of number of elements in the tree.
Unlike a simple binary search tree, an AVL tree introduces additional constraints which force it to be a balanced tree after every operation - so, there are no worst case scenarios as you get in a binary tree.
We will discuss the AVLTree implementation in dsjslib.
So lets take the same example and see what we can do to avoid a tree becoming a linked list. Lets start building a BST and add 9, 11, 13
At this stage, what if we pull 9 node down and make 11 the root, the tree looks like
Its still a binary search tree and also one in which the height of the tree is less than the earlier .
This is the idea behind AVL Trees to rotate the tree at certain nodes on insertion and deletion and maintain low height in the tree which guarantees O(logN) performance.
A non-leaf node height = Max{leftNodeHeight,rightNodeHeight}+1
Example depicted below
The AVL Tree node invariant says that for any node, the difference between the left and right subtree height can’t be more than 1. This leads to maintaining the height
O(log Number of nodes)
Steps are
After insertion or deletion find the node where violation occurs
Once we have the node which was inserted (or parent of the node deleted), move up the tree checking the height difference until we a find node where violation occurs (height difference between subtrees is more than 1).
In dsjslib.AVLTree, this is taken care by the function checkAVLProperty(node). This function is invoked post insertion or deletion of a node
Consider the implementation below:
// do simple BST insertAVLTree.prototype.put = function(key, value) {
var ins = BST.prototype.put.call(this, key, value);
try {
//find where is the violationthis.checkAVLProperty(ins.node);
} catch (vErr) {
//rebalance the tree at that nodethis.rebalance(vErr);
}
return ins;
}
Checking AVLProperty involves checking the difference in height between left and right subtree.
The height is recursively (pre) calculated. Implementation below:
AVLTree.prototype.checkAVLProperty = function (node) {
if (!node) return;
var lc = node.leftChild, rc = node.rightChild;
var hdiff = (rc ? rc.height : -1) - (lc ? lc.height : -1);
if (Math.abs(hdiff) > 1) {
if (debug)console.log("AVL Height violation at Node key" + node.key);
throw {'node':node, 'hdiff':hdiff};
}
this.checkAVLProperty(node.parent);
}
Once we have found the node where violation occurs we need to fix that. There are 4 cases to consider
Right-Right heavy
The node where the violation occurs (9, shown in Red) is right heavy. Its right child height is more than its left child height) AND the child (11) is also right heavy.
This can be fixed by single LEFT rotation at violated node (9)
Left-Left heavy
Symmetrical to right-right heavy case and right rotation at violated node fixes it
Right-Left heavy
This case is little bit trickier. In this case (example shown below), the violated node is right heavy but the right child is left heavy (its left child height is -1, right child height is 0 which is greater than -1)
Lets see if we can fix this by applying our earlier knowledge and rotating left at violated node .
We can see that it doesn’t fix the problem. Now the violation occurs at the new parent i.e 11
These cases are fixed by two rotations
i. First rotate right at the left heavy child(11)
ii. Now this is a know case of right-right heavy, lets rotate left at the violated node to balance it
Left-Right heavy
Is symmetric to case c) above and in this case the violated node is left heavy but its left child is right heavy. Applying the same logic as above, it will be fixed by, first a left rotation of the left child and then a right rotation at the violated node.
]]>Get Most Out of JavaScript Data Structuresjavascript-data-structures2013-08-24T19:45:10.000ZJavaScript comes with a variety of data types and structures. As defined in the specification the basic primitive types are Numbers, Strings, Boolean, Null and void. In addition there complex data types: Arrays and Objects. If you have coded even a little bit using JavaScript, you have likely used most of these.
In this post I will go through some common gotchas and help you to understand better how to get most out of the structures.
I have adapted most of the content from a little ebook of mine, Survive JS. It is freely available and a very quick read. It might not be as known as some other ebooks but you still might pick a thing or two out of it.
As I mentioned JavaScript comes with a set of primitive types. Numbers are a bit special as they can be either integer or float. There is no clear separation unlike in some languages. There are a couple of Number related functions you should be aware of, though. The ones you will likely use the most are parseInt and parseFloat. These functions allow you to convert a string presentation, or another number, into a Number looking like an integer or a float.
Especially parseInt comes with some baggage. It is important to understand that in case radix parameter is not provided, it may interpret the given string as octal. That may be something you may want to avoid. That is why you should always define the radix to be sure. Consider using parseInt('123', 10);. Check out MDN documentation on parseInt to understand what you can achieve with the function.
parseFloat just parses the given string and returns it as a float Number. It is rarely used but you should be at least aware of it. Again, consult MDN documentation on parseFloat to understand its behavior better.
Strings are sequences of characters by definition and come with a set of utility methods. I won't go into detail on those. There is a certain one I like to use a lot, though. It's split. If you perform 'your string'.split(''), you end up with an Array of characters. After that you can use all the nice functionality JavaScript Arrays come with. Once you are done with the manipulation, just join('') it back to a string.
One little quirk related to strings has to do with concatenation. Unfortunately + character was chosen to represent it. Sometimes this may yield interesting results. So be careful with concat. If you want to try something else, consider implementing format that allows you to perform string replacements easily. Internally you can piggyback on the replace method. Just to give you an idea of the possible syntax, consider following:
format('{{amount}} {{object}}s on shelf', {amount: 5, object: 'bottle'});
Or you could just use some existing templating engine although that might be overkill depending on your case. To make things easier, I've implemented an example based on an earlier blog post of mine below:
var ctx = {
name: 'jude'
};
var tpl = 'hey {{ name }}! {{ name }} is great';
console.log(format(tpl, ctx));
functionformat(tpl, ctx) {
return tpl.replace(/\{\{([a-zA-Z ]*)\}\}/g, function(m, g) {
return ctx[g.trim()] || '';
});
}
Overall the algorithm is really simple. We just match each slot of our template using a regex globally and then replace them using context data. In case data is not found we inject an empty. Without that check we would end up with undefined which isn't particularly cool.
Suppose you have something you wish to convert into a boolean. That's where !! comes in. As you know, ! inverts a value and yields a boolean. If we perform that twice, we end up with a boolean and end up with the original truth value. Simple as that.
There are also the following shorthands you may find handy:
Ternary - a? b: c - Selects b if a is true, else selects c
Logical AND - a && b - If a, selects b, else selects a
Logical OR - a || b - If a, selects a, else selects b
Logical AND can be handy for checking whether object exists before accessing its value (ie. `var a = foo && foo.bar;). This can be handy if you are trying to access some property of an object that might not exist and want to avoid a ReferenceError.
Logical OR is commonly used to set default values. Consider the example below:
functionsum(a, b) {
a = a || 10;
b = b || 10;
return a + b;
}
There is one gotcha in our example, though. Can you spot it? What happens if either a or b is zero by intention? That's right, our calculation will yield invalid results. How would you resolve this? I can think of a couple of ways but it's hard to give an authorative, "correct" answer.
Fortunately we should get default parameter values and other goodies with ES6 as discussed by Ariya Hidayat. There are some various other goodies as well but I won't get into those at this post.
null and undefined are an interesting pair. undefined signifies an absence of value whereas null is a value on its own. It just happens to be a null value. If you define a variable without assigning a value to it, its value will be undefined by default.
Generally these values get hidden below dynamic typing. You probably shouldn't check for a null explicitly. Often you can get away with something like if(foo) or if(!foo) and can hide the null or undefined.
Arrays are just Objects in disguise. They just happen to behave like arrays in various other languages. You can also use them to simulate other data structures, such as queues and stacks, quite easily. In case you want to implement a queue with a fixed length, consider the following example:
functionqueue(len) {
var ret = [];
ret.push = function(a) {
if(ret.length == len) ret.shift();
returnArray.prototype.push.apply(this, arguments);
};
return ret;
}
var a = queue(3);
a.push('cat');
a.push('dog');
a.push('chimp');
a.push('giraffe');
console.log(a); // should contain dog, chimp, giraffe now
We did a little trick there and overrode the default behavior of push. There are some extra methods hanging around but we don't care as this is just a quick and dirty solution.
Since the introduction of ES5 arrays have come with a set of handy methods including map, filter, reduce and forEach. These are useful especially for functional programming. You simply take some data and then transform it into a form you find useful. These methods become particularly useful when you combine them with helper functions. Consider the example below:
var data = [{name: 'Bjorn'}, {name: 'Joe'}, {name: 'Rahul'}];
var names = data.map(prop('name'));
functionprop(name) {
returnfunction(v) {
return v[name];
};
}
Especially the map part looks deceptively simple. We are missing list comprehensions and other jazz from vanilla JavaScript but by implementing, or using, a set of utility functions like prop, you can get a lot more out of it. To give you another pattern, check this out:
var data = [{name: 'Bjorn'}, {name: 'Joe'}, {name: 'Rahul'}];
var names = data.map(prop('name')).filter(not(startsWith('J')));
functionstartsWith(val) {
returnfunction(v) {
return v.indexOf(val, 0);
};
}
functionnot(fn) {
returnfunction(v) {
return !fn(v);
};
}
Yup. We implemented a couple of more factories. The core logic is very simple and readable, though. JavaScript's closures make this way of working possible and allow us to push a lot of detail into library level.
There are other ways to compose and end up in the same result. We could for instance implement a function to literally compose (compose(startsWith('J'), not)) and build our semantics based on that. In languages such as Haskell this is actually a first order feature of the language and you may use simply . to pipe the result from a function to another.
Given its functionality, JavaScript provides some good tools for this sort of programming. The syntax might not be as elegant as in certain languages but there is definitely a lot of power under the hood.
Objects are the basic construction blocks in JavaScript. You can declare quite complex structures using them and then serialize them using the popular JSON format. In fact JSON was modeled after JavaScript objects, hence the name JavaScript Object Notation.
There's the whole OOP side to Objects but I won't get into that. Instead, consider checking out MDN's introduction to OOP in JavaScript to get a better idea. Personally I'm more interested in objects as a data structure.
Sometimes you may need to perform various transformations on object based data structures. Sure, there's the good old for-in syntax but it would be nice to be able to use map, filter and co. As it happens there are some ways to achieve this.
To be exact, zip is a function that takes two lists and returns a list of lists like this:
var a = [0, 1, 2];
var b = ['a', 'b', 'c'];
var result = zip(a, b); // [[0, 'a'], [1, 'b'], [2, 'c']]
You can also define function unzip that performs the reverse and extracts two lists out of a resulting zip.
In order to make it easier to manipulate object structures, we can define two functions: otozip and ziptoo. The former converts an object to zip and the latter converts zip to an object. I've sketched out basic implementations below:
functionotozip(o) {
returnzip(keys(o), values(o));
}
functionzip(a, b) {
var ret = [];
var i, len;
for(i = 0, len = Math.min(a.length, b.length); i < len; i++) {
ret.push([a[i], b[i]]);
}
return ret;
}
functionkeys(o) {
returnObject.keys(o); // ES5
}
functionvalues(o) {
var ret = [];
var k, v;
for(k in o) {
v = o[k];
if(o.hasOwnProperty(k)) { // ES5
ret.push(v);
}
}
return ret;
}
functionziptoo(a) {
var ret = {};
var i, len;
a.forEach(function(v) { // ES5
ret[v[0]] = v[1];
});
return ret;
}
There's a small gotcha in that ziptoo. In case your zip happens to contain multiple pairs with the same first value, only the last pair will end up in the result. That is just the way objects work by design.
The functions add some performance overhead but ease manipulation as you can use the utilities we covered earlier. If you are using caolan/async, you may find the pattern useful for aggregating results of various operations into objects.
I've packaged the functionality in a module of my own. You may find it at NPM as annozip.
So far we have pretty much just scratched the surface a little bit. We could still discuss advanced data types, generators and such but those are better left for other posts as this one is getting quite long already. In the meantime you can check out various libraries focusing on functional programming. No doubt you will find something useful there.
I hope you learned some little trick from this post. In case you happen to have some particular tricks in mind, do let us know at the comment section! I just covered some which I happen to find useful. Those are more or less useful depending on your usage patterns. Till the next time!
]]>Monthly JSter #5: News of July 2013monthly-jster-july-20132013-08-01T16:34:02.000ZEven July was a busy month for JS people. You guys are never gonna give up, huh? Anyway, let's proceed with our monthly listing of important and not so important happenings.
To celebrate the Summer we updated the outlook of the site. Let us know what you think!
Remember that Monthly JSter is available as a newsletter. And when we say monthly, we mean it. One post a month, that's it. Given the content in this post, we might turn it into a biweekly thing, though.
]]>Leveling Up with HTML5 Games Contestsleveling-up-with-html5-games-contests2013-07-18T18:42:41.000ZEvan Burchard is the author of The Web Game Developer's Cookbook and the Final Boss at FightMagicRun. A founding trustee of the Awesome Foundation, he loves rooting for the underdog and helping new coders get started.
Traditionally web based games have been developed using a platform such as Flash. During the past few years the situation has begun to change, though. Particularly the emergence of HTML5 technologies has lead to some new trends. HTML5 games are one such trend.
I've listed some reasons below why getting into HTML5 game development may be worth your while.
You started programming because of games.
You find yourself saying "I use jQuery for most stuff" when asked about JS. Games get you working with real JS.
Your JavaScript is not as good as your server-side code in another language (Ruby, Java, Python, etc.).
You have never thought about performance in JavaScript. Games tend to execute code in a large loop, so performance must be considered.
You want to learn Node.js, but learning Node.js AND real JS at the same time seems too complicated.
You want to actually make money selling games. This is possible, and getting easier all the time.
jster.net shows currently nearly 100 more reasons, or game engines. When you add in various commercial and cross-platform engines, that number grows significantly. So you could say there are plenty of starting points.
To make HTML5 games with these engines, you could read a book or a tutorial in isolation, but learning in the right context is important. If you want to learn quickly, consider entering a contest. Proving to yourself that you can quickly make a game feels good, and you will uncover knowledge gaps that you might sweep under the rug if you were just following a book or a tutorial.
There are two main types of competitions: game jams and contests. Jams are more community oriented whereas contests focus more on the result.
Game Jams are a well established concept among game makers, and tend to have entrants who use tools like GameMaker, Unity, and Flash libraries that aid their ability to make games quickly. The focus tends to be on the games rather than the tools. They are unlike tech conferences where improving in technologies and techniques is paramount.
In-person jams like the Global Game Jam are a great way to collaborate and learn more about game design as well as game development. That said, these also provide challenges to developers because they tend to only last for a day or two. Global Game Jam and Ludum Dare* both have a 48 hour window to make a game from scratch. Typically even large jams don't have prizes for winners, but that doesn't stop big names like Notch, the maker of minecraft, from participating.**
On the smaller side of things, impromptu jams spring up all the time. All it takes is a few friends wanting to try out new ideas and share them with others. Because jams can be organized informally and with short notice, a search for "game jam", "gamejam" or "#gamejam" on Twitter will give more up to date information on upcoming contests than relying on Google search.
Here are a few popular game jams you should know about:
Throughout the year, there are dozens of contests. Some are specific to a platform such as Flash, iPhone, or HTML5. Some require use of a specific game engine or development environment. Some have a social mission and others are just for fun.
For the most part, they are infrequent, so if you miss them, you might have to wait a year to participate. And that's assuming the contest will happen again. On the plus side, unlike game jams, they usually offer prizes of cash or free tools and services.
On the downside, hefty sponsorship sometimes means that sponsors require a licensing agreement as a condition of entry. It is not uncommon for contests to be longer than a typical 2 day jam length.
FiMaRu has a fresh take on game contests. The 48-hour timeframe is preserved from the larger game jam tradition, because it's enough time to do something interesting, but not enough time for an otherwise fun event to feel like a burden. It's weekly, so you can reliably participate in a contest any time you want. It's HTML5 specific, so everyone making games can help move the web forward.
Participation does not imply any transfer of rights as it does in some contests. And the prize is $100, which is enough to be about as interesting as a big poker night, but small enough to ensure a good mix of beginners and established game devs. $100 also allows for the contest to be weekly. The details of the contest are explained here. And yes, you can register for a contest this weekend.
If you're looking to lock down your JavaScript better or make a game in an intense, but short timeframe, competitions are everywhere. You have your pick from anything to huge events like Global Game Jam to smaller jams with friends to 4 million dollar competitions to 100 dollar competitions. And when you find the context to learn and create games with people you like, it won't just be fun for you, you'll also be making fun for others.
]]>Monthly JSter #4: News of June 2013monthly-jster-june-20132013-07-01T20:35:10.000ZIt looks like the JS people are pretty busy even in the Summer months. I mentioned about a sibling service in our previous monthly JSter. We've officially released it! Check out CDNperf.
CDNperf is a service that allows you to benchmark various CDN providers focusing on JavaScript libraries and frameworks. Our service uses Pingdom as the data provider. The user interface is development of our own.
Remember that Monthly JSter is available as a newsletter. We promise to spam you only once per month!
]]>Monthly JSter #3: News of May 2013monthly-jster-may-20132013-06-07T13:22:45.000ZIt was a busy month to put it mildly. You should see some of the results soon in a form of a sibling service.
I provided an interview at Pingdom's blog. Besides that I contributed a guest post for gun.io. In this case the topic was "How do I find JavaScript libraries?" and you can probably guess which service was mentioned there amongst a few others.
This will be the first time "Monthly JSter" will be available as a newsletter. So in case you came by this post by accident and are interested in this sort of content, do subscribe. Besides our montly one you might enjoy reading JavaScript Weekly. HTML5 Weekly is somewhat excellent too. The lists have linked to us a couple of times. Thank you for that!
]]>Fighting crimes with Batman.js - Interview with Nick Small of Shopifybatman-js-interview-with-nick-small-shopify2013-05-20T13:22:40.000ZThere are many MVC frameworks for client-side development. According to GitHub stats, AngularJS is now the second most popular JavaScript MVC framework right after Backbone. What made Angular popular? I'd say people like it because of its declarative style and bidirectional data binding in views. But did you know that there is another framework that provides similar binding features and a lot more? It is called batman.js. In many cases it looks a bit like AngularJS. As you know, there is Google behind Angular, but batman.js is maintained by Shopify (also no stranger to open source) and looks really promising.
Batman's views rely heavily on HTML data attributes. Compared to Angular Batman is less modular, placing its namespace in global scope for easier access. batman.js is written in CoffeeScript and shares the principle of "convention over configuration" inspired by Ruby on Rails. This makes its code more compact and readable, much faster to write and prototype, and easier to jump into a new project. The downside is that the learning curve now includes learning all of the conventions that the framework provides.
{{ screenshot: batman.js }}
Let's take a quick look at some code from both frameworks. Here is a controller built both in AngularJS and batman.js.
(I will use CoffeeScript in this example)
As you see they are pretty similar, but personally I find batman.js's code a lot cleaner.
One problem with batman.js is the documentation. Batman in general has a bit of a smaller community and fewer tutorials available. Still, I tried it once for my project Mailican and I must say the experience was really positive.
Hi, @nciagra. Why did you decide to build your own MVC framework?
We set out to rebuild the Shopify merchant interface as a JavaScript application. We wanted a super-fast runtime experience, the ability to prototype new features more quickly, and a more responsive and interactive user interface. Think back to those early Wild West days of JavaScript MVC frameworks. Off the top of my head, at the time, there was JavascriptMVC, Backbone and early code for SproutCore 2.0. Of these, we liked Backbone the most, but knew that it wouldn't give us nearly enough support to easily build our huge application. That was the idea; to build a framework that would let us work the way we want with our designers and developers, support us as the app grew to hundreds of files and classes, and follow the ideas inherent in our culture of how a Shopify app should be developed.
It's definitely a challenge. batman.js is developer as an extraction from Shopify 2, so all of the many many developers we have here are potential contributors, and manyofthemare. There is also a growing number of external contributors—working on some really amazing projects—who send us some great pull requests. I'd say the biggest challenge for us is managing our time between batman.js and the Shopify product, but it does mean that all of the code going into batman.js is code being used in our production app.
Take your pick: we like writing in CoffeeScript better, Shopify is a Ruby shop and CoffeeScript looks familiar to Rubyists, it results in far less and far cleaner code, it allows us to build more expressive DSL's, and there is almost zero overhead or downsides to using it. Anything you can do in JavaScript you can also do in CoffeeScript, so no, it wouldn't provide any additional control. Plus, you can drop into JavaScript at any point (we don't).
We've learned a ton about framework design and the JavaScript environment throughout this process. I can definitely recommend building your own framework that suits your own needs if one doesn't already exist and if you have the time, energy, and follow through to dedicate to it. That said, there's a lot of knowledge that Shopify and all the other framework developers have generated that you lose out on by rolling your own; I'd definitely also recommend trying out a few that appeal to you and reading through the code to try to avoid some of the most common pitfalls in framework development.
The next release of batman.js is going to be a big, breaking release. We've decided to clean up a lot of API's and make everything more consistent. We're also going to bring everything in line with Rails 4 and remove a lot of old cruft and code paths that either aren't being used any more or just don't belong in the core of the framework. You can see some early results of this in master right now. Performance and documentation are also huge concerns. We have a dedicated suite of tools for testing batman.js performance, and it's getting really, really good. Documentation is also extremely important to us, and we'll have some really neat developments on that front to go along with the new version!
]]>Building Cross-Browser Extensions with Kango and Backbonecross-browser-kango-extensions-and-backbone2013-05-09T15:34:23.000ZA while ago I developed a service known as Mailican. The idea is simple.
The service allows you to define aliases for your actual email. You can then control these aliases
via Mailican. Unfortunately creating them can be a bit cumbersome at times as you have to create them
through the service. As it happens there's a nice way to work around this problem: browser extensions!
I decided that the extension would create a popup with the list of current user emails. Here's an example:
To get list of available emails I had to connect to my application server via REST protocol.
In order to make list flexible with ability to add new emails on the fly I decided to use a form in the top.
And to manage all this things I included Backbone. It worked well for me and I must say it is great framework for such lightweight applications.
{{ screenshot: Kango }}
I chose Kango Extensions for creating extensions. Besides being free (except for IE), Kango is cross-browser.
Unlike it's competitor Crossrider, Kango is just a build tool with a set of open APIs.
In Crossrider you can develop only using a cloud IDE and all the apis are closed. I prefer to keep my code to myself and to work in local environment.
Maybe Kango has less features, but at least I control and own everything I produce in this case.
Kango is easy to install. Just download it from official site and unzip somewhere.
From now on you can use kango console utility to execute tasks. We have only two here: create and build. But that's enough.
Let's create a project:
~/kango/kango.py create ~/my_extension
By running this you will get folder my_extension filled with lots of folders and boilerplate code. Like on this screenshot (I added Backbone and Underscore later)
We should stick to src/common folder which contains cross-browser code. Once you run
~/kango/kango.py build ~/my_extension
source code will be translated and placed to src/browsername folders of this dir. And packages will be stored in output dir.
The main extension file is src/common/main.js. I'm using it only to define popup style. In it you can store your background scripts which may stay alive all the time browser is running.
But I need only popup to be shown. Nothing more.
It is important to notice that you need to set fixed width and height to your popup.
Currently only Chrome allows popups to be autosized. As defined a popup is taken from popup.html file.
Let's create it and include all required assets.
As you see we are using local path for JavaScript files. As you guessed that files should be placed into the same common directory. Kango APIs are available by default,
but other libs you should download manually. You can take them from JSDelivr CDN for example.
I created popup.js file to place all JavaScript code in it. To use any of browser features we should stick to Kango API.
For example, we need to use KangoAPI.onReady instead of the familiar jQuery.ready(). And to open links in a browser we need to access browser tabs apis.
For my extension I use 2 Backbone models: Mail and User. All their data were taken from 3rd party service.
You can't use standard Backbone methods to run cross domain requests from extension.
I redefined the fetch method of my models to work with Kango APIs. And here the User model I've got:
As you see, I'm rendering special SignIn view If user info can't be fetched.
Similarly I define model Mail model and MailCollection to represent a list of emails. They will be fetched and managed the same way.
I put corresponding fetch model into MailCollection. In final script this collection was too long, so I won't post it here.
At first we need to define all templates in popup.html. I'm using Underscore templates so nothing new here:
I attached events to represent model fetching, and creating a new emails over form. When new email is created I submit POST request via kango.xhr and attach email to list if everything is successful.
When models, templates, and views are defined we need to launch them. It can be done in cool async way:
To try your new extension in a browser you should execute ~/kango/kango.py build ~/my_extension.
This will produce packaged extensions to all 4 browsers. I used Chromium as a primary tool to develop and debug my extension.
Open Extensions tab then drag and drop your newly created *.crx file placed in output folder.
To debug your popup you can use Chrome DevTools. Launch them by right-clicking on your extension button.
Yes, manage popup. Also consider using Backbone Debug script see all model views interactions in console.
I didn't use much of Kango Extensions API in these examples. I found them well documented, though. And you can use them as a wrapper for browser messaging or storage APIs.
Kango Extensions works smoothly and output extensions worked well in all tested browsers. BackboneJS allowed me to keep my code structured and to work well with data.
The day I wrote this post Kango Extensions 1.2 were released. And that's great news! I wish good luck to this project, more features and more popularity.
Thanks, Kango for my new Mailican extension. I still need to publish it in all the browser extension catalogs, but that's another story.
]]>
Simpler Web Design with HTML5 Prototyping Serviceshtml5-prototyping-services2013-05-07T15:44:12.000ZWeb is becoming a second desktop now. And the requirements for web apps goes the same as for desktop apps. Especially for the UI part.
It's a bad idea to start developing UI in Photoshop. You can't test application behavior, responsiveness, grids, on static image.
Same goes for oldschool paper+pen method. You just don't aware of poroportions and sizes of your components, so drawed wireframes will look completely different when they come to HTML+CSS.
Modern way or prototyping stands for opening text editor and writing some HTML code with Twitter Bootstrap included.
But actually why would you do this if there are services that does just the same in WYSIWYG way?
It is much easier to try different elements, positions, just by moving them through pages, without editing HTML or CSS.
So why not to use this tools. You may stick to well known Bootstrap, use Foundation or custom framework.
Let's list them all. Choose the tool that fit your needs better.
]]>Monthly JSter #2: News of April 2013monthly-jster-april-20132013-05-03T02:51:16.000ZIt's that time of the month again, the monthly JSter time that is. We started this tradition a month ago and intend to keep at it. Compared to last time we changed the format a little bit. Now it's more of an aggregate of our Twitter feed. It can be very difficult to keep up with the fast moving scene and this little contribution of ours hopefully helps in that.
The service itself grew steadily during the past month. We refreshed the outlook a little bit and kept on doing small things here and there. And of course the amount of libraries we index keeps on growing. We also had our very first guest post by Olaf Horstmann. Check out his awesome article Tools to Package Your HTML5 App for Mobile Devices. Thanks for your contribution Olaf!
If you want to promote your JavaScript tool or library JSter's blog is the right place for that. Write a post about your library (tutorial, overview, or anything else) and we will publish it. In case you are interested in becoming a guest author, let us know. You may contact Michael at davert.jstermailican.com or just poke us at Twitter. Either way works.
I think I've rambled enough. Enjoy the listings below!
brackets.io - Finally an editor built web development as a priority number one! Still in early stages but looks very promising already.
Light Table - Light Table, an interactive IDE, reached 0.4.0 recently. There are some JS related goodies included.
dependo - Visualize your CommonJS or AMD module dependencies in a force directed graph report
Plato - Plato provides a complexity report on your code. Spot the knots and whatnots.
Tern - Tern takes JavaScript editing to the next level. Expect a plugin for your favorite text editor soon. Note that brackets.io comes with Tern already.
JSON Editor Online - A nice way to visualize your JSON so that even Jason may understand it. No offense Jason.
]]>Interview with Esa-Matti Suuronen, developer of underscore.stringEsa-Matti-Suuronen-interview-underscore-string2013-04-29T17:29:03.000ZThis time we'll be discussing with Esa-Matti Suuronen of Opinsys. A company known for its Linux based thin client solutions used in educational sector. Esa-Matti or Epeli or just @EsaMatti is particularly known for his underscore.string library and has published several high profile posts over at his blog.
I was looking for a library that would provide some missing bits from the
Javascript standard library I was used to in some other languages. I asked this
Stackoverflow question which lead me to the Underscore.js which did
implement everything I needed except the string extensions. Since I had already
quite a few string helper functions lying around it was pretty simple to put
Underscore.string together.
{{ screenshot: underscore-string }}
The popularity comes pretty much by piggybacking on the success of
Underscore.js. Quite soon after I released it Jeremy Ashkenas offered to link
to it from the Undescore.js page and being probably the only proper
Javascript string library with tests at the time. Also Big part of any even
remotely successful library is maintaining the project and I definitely cannot
take the credit for that. I gotta give big thanks to @edtsech and @rwz
for taking care of the project. Thanks!
Backbone.ViewMaster. When I first started with Backbone.js the biggest
trouble for me was how to manage nested views views with it. Since I'm a big
believer of small and decoupled components and in Backbone.js your basic
component is a View. I ended up doing a lot of those. Originally I planned to
just first work my way with plain Backbone.js and then to migrate to something
like Marionette.js when I actually would see the need for it. But soon I
realized that I had already solved my biggest issues with just a small base
View I was inheriting from. Since I already had documented it for my colleagues
I ended up releasing it as a library. If you just need help with view nesting
with Backbone.js I think ViewMaster can take you a long way with just 1kb of
additional code.
Well, I wasn't very happy with RequireJS even when I first started with it
because I mostly use node.js for my backend needs so CommonJS based solution
would have been a much better fit for me. But back then I didn't feel that
there where any flexible and robust enough solutions out there until Browserify
v2 was released. For a long time resisted using RequireJS. I even created Piler
which was a module system agnostic solution for packing and compiling
Javascript modules.
Backbone.js. Combined with ViewMaster it gives me just enough features I need
without getting too much in the way.
Node.js. The apps I'm building today are so client heavy it doesn't really make
sense to use any other language for the 10% of the code I write for the backend
and node.js is definitely the best Javascript server-side solution out there.
Also I quite often leverage Websockets and I think node.js still has the best tools working with those.
For the server-side frameworks I don't have that strong opinions. I would
probably go with Express since it's very well supported and maintained.
Learn it well. If you want get break from all those legacy Java projects learn
Javascript well and you'll have lot of new opportunities opening to you. There
are dozens of Javascript positions open right now looking for guys and gals
being able to write robust Javascript. It's not the easiest language to learn
but it's definitely worth it and you'll find that underneath the rough surface
there is actually a pretty nice language.
]]>Interview with Paul Miller: maker of Chaplin and Brunchchaplin-brunch-author-interview2013-04-25T16:42:52.000ZToday we have very special guest. He is a passionate open source developer with many projects out there. Particularly two stand out: Chaplin an MVC framework built on top of Backbone and Brunch a build tool, Yeoman/Grunt alternative. These projects are used by thousands of developers and helps us to make better software. For example, the new Delicious, that well-known dinosaur from Web 2.0 era, is now blazingly fast thanks to Chaplin MVC framework and Brunch.
Say hello to Paul Miller. Today we will ask him about his projects, future plans, and how to become a better JavaScript developer. Don't switch the channel.
I do mostly tools for web devs these days, but i’m also launching non-dev-related projects.
I started doing JS a long time ago, just when I started doing web dev. Back in 2011 i’ve thought web applications are the future and started doing them, discovered Backbone and stuff.
Matthias Schäfer had separated some parts of moviepilot.com into one reusable framework and named it as Chaplin.
I’ve came to the project after like two weeks and instantly saw Chaplin potential, then decided to help with its development.
Thanks to Chaplin community, first year was very productive — lots of companies had adopted Chaplin and contributed. I hope this year will be even better.
Backbone is cool, but it lacks opinions. It just gives some core concepts, you’re supposed on your own to figure out how to use them and where.
I really like what Chaplin does here. It pushes some best practices that made us productive. This makes your code consistent, clear and very maintainable. It is easy for new devs to continue making your app after that.
Learning today’s web application stack is not as hard as it seems. In my experience, team which was working with Django had been able to learn the whole stack and write production-quality code in something like 2-6 weeks. This included coffeescript, backbone, underscore, jquery, chaplin and brunch. Quite a lot when you think about it.
Controlling life cycle of components in your app really matters. In order to avoid leaks it’s important to pick a right architecture that will have some concept of manual memory cleanup.
Everyone makes mistakes, so it’s better to make them as loud as possible for early detection. Freezing (Object.freeze()) / sealing (Object.seal()) your objects and ECMAScript 5 strict mode helps with that. When the object becomes unneeded and you’re ready to pass it to garbage collector, delete all properties from it, unbind all handlers and freeze it. If anything from outside will try to change object somehow, you will get a nice exception.
Brunch will get source maps support. This is really much requested feature. Today there are no solutions for headless automatic compilation of files with source maps. You still need to manually do most of the job.
As for Chaplin, we want to release stable version (1.0). Before that we hope to incorporate view transition support and AJAX handlers auto-abortion / stacking. Backbone doesn’t help us much here, just like with memory management. And, of course, we want to improve documentation. Screencasts and more examples would be nice to have.
I hope to push ost.io as a default application example for todomvc “successor” — taste.js. We’re still discussing possibilities, though I persist on the forum. My main points:
it is more complex than todomvc and many other examples. CRUD, authentication, consumption of REST API data, app-wide persisted views — everything is here. Some folks say that app should show more than this and i’m absolutely open on any new features and ideas.
it is real-world. Actual people provide support for their stuff there. I don’t like the idea of building another application just to show how tech behaves.
it is working right now. Ost.io demostrates real code today, the spec is there too. Real artists ship™.
I’m a big aficionado of ultra-small libs that do only one thing these days. Chaplin stack is not like that, though. So I prefer small components to full-size libs.
But there are some common libs that really help me.
]]>Tools to Package Your HTML5 App for Mobile Devicestools-to-package-your-html5-app-for-mobile-devices2013-04-22T18:17:11.000ZThis time we'll have a special treat for you, a guest post by Olaf Horstmann. A digital media developer from Stuttgart, Germany. He has worked in several locations around the globe, including the US, China and Indonesia, and runs a blog known as indiegamr. Recently he published an ebook, "From Zero to App Store". It shows you how to create and publish HTML5 games for the mobile.
While your HTML5 application/game already runs perfectly in any desktop-browser, it might not be entirely trivial to port it to mobile. Which tools or services should you use? In the following article four popular build-services and tools are compared, with conclusions on which service suits which purpose.
CocoonJS is the only Build-Service in this list that will display your canvas content on a native, hardware-supported OpenGL-stage (Ejecta does the same, but is not a build-service). This means that your canvas app will be able to display thousands of graphic-objects without a problem. Something not currently possible with pure HTML5.
CocoonJS features a launcher app for iOS and Android. It will download your zipped HTML5-contents and allows you debug it right away, so you can test your app on the device in seconds without the hassle of building and deploying it with XCode or Eclipse etc. Additionally CocoonJS features several ready-to-use plugins to access native features, Facebook or Twitter, ads or in-app purchases via JavaScript.
The file-size limit for projects is currently 30MB but can be unlocked to be 200MB upon request.
CocoonJS displays HTML-markup through a WebView but its primary focus is on the accelerated projection of canvas contents. When releasing an app, some knowledge on XCode is required. The build service will only create a ready-to-use XCode project. The APK generated for Android requires signing through the command line.
Price: Currently CocoonJS is in a free beta and packaged apps will have a CocoonJS splash screen. This may be removed on a special-request. At the time of writing it is unknown how much it will cost and when they will start charging customers, but if you plan on using CocoonJS expect to start paying for the service within 2013.
Ejecta is Open Source and free to use. It works similar to CocoonJS and displays canvas contents on a native OpenGL stage. Additional support for the GameCenter and iAds also works out of the box and since Ejecta is Open Source it can be easily extended through Objective-C. Thanks to the Open Source community there are forks available such as Ejecta-HEART-CreateJS.
The only real downside of Ejecta is that it’s only available for XCode/iOS. Besides that Ejecta requires more knowledge on XCode than the other services to build and deploy a project because it is a library/tool and not a build-service. Also Ejecta focuses only on the canvas so it is not possible to display any other elements besides the canvas content.
Note that in this case we refer only to PhoneGap Build service, NOT the PhoneGap technology itself. Pretty much anything the build service can do can also be achieved with PhoneGap directly, though.
PhoneGap Build will take care of the whole build process. The built apps are ready to be uploaded directly to the app-marketplaces, so there is absolutely no knowledge on XCode, Eclipse or the like required. In addition to iOS and Android™ PhoneGap Build is able to target Windows® Phone, Blackberry® 5/6/7, WebOS and Symbian™ from the very same codebase.
PhoneGap build supports pretty much any native function of your phone and thanks to the big and established PhoneGap community there are a ton of plugins available. Plus there is a free plan available for a single app. To test an application during development it can be installed once and then updated over the air and it also features a console on the desktop, similar to the WebKit console, which comes in really handy for debugging.
PhoneGap Build is a project by Adobe. It's up to you to decide whether this is positive or negative.
While PhoneGap primarily wraps your HTML sources in a native app, it "only" uses the device’s built in technology for that (WebView). This means there is no projection on hardware-accelerated OpenGL stages or the like, which makes this technology less useful for graphically intense games. Also the maximum file-size of an uploaded projected is currently limited to 10MB and there are no official plans to extend this limit.
Price: Starts at $9.99/month but there is a free plan available.
Example Apps: There are no official examples listed, but the technology has been proven in countless apps in the App Store.
Trigger.io works very similar to the PhoneGap technology and wraps the HTML codebase inside a WebView. Additionally it is possible to include native UI elements through JavaScript. With the Trigger.io toolkit you can build iOS apps on Windows®. The only other technology capable of this is Flash. Like with PhoneGap, no knowledge and no use of XCode or Eclipse is required. Based on its own claims, Trigger.io can be up to 5x faster than PhoneGap. It also features the use of native components like SMS, camera, location etc.
Trigger.io wraps the HTML codebase inside a WebView and is therefore not as fast as CocoonJS or Ejecta when it comes to canvas applications and especially games. Beside that is Trigger.io by far the most expensive choice of all.
Price: The pricing starts at $19/month and ends at $799/month if you pay for a whole year. When you pay from month to month the service will be significantly more expensive and can range from 39$ all the way up to $999/month depending on the package.
In the table below you can see all features and tools listed side-by-side:
]]>Enhance Your Next Presentation with HTML5html5-presentation-impress-reveal-deck-bespoke2013-04-12T16:38:17.000ZI remember the days when Opera team came to our university with presenting their features of their browser and sharing their vision of the future of Web.
I was amazed by the fact that all their slides (with animations) were done in pure HTML5. All presentation was held in the Opera browser itself.
"Awesome", that was what I thought. But, honestly, in those days only real geeks would choose coding HTML, CSS, JS over drag-n-drop style of PowerPoint.
It was the time were HTML5 support was limited, and browsers were trying to at least pass the new ACID tests.
And I'm not really sure whether Opera's presentation engine was a real HTML5 implementation or just a built-in feature of their browser.
But times change and HTML5 came for all the web, all platforms, all browser (mostly). Even games are built with HTML5. So why should we choose PowerPoint.
You know, it's not free. Actually, I have an answer for this. We still need some knowledge of HTML5, CSS3, JavaScript to build a good presentation.
But that should not actually matter for us, web developers.
Here is a list of presentation HTML5 engines you want to try. Engines like Deck.js, Impress.js of them are pretty complex, but they give you all the control and flexibility of presentation.
Engines like Reveal.js are simple in use and provide you with nice prebuilt, themes and markdown engine to design slides pragmatically. And you now what? Opera has it's presentation engine too. Meet Shower, which looks pretty simple to start (Upd: no, it is personal project, not related to Opera).
Also please take a look at Bespoke.js, it was released a few months ago but already got a lot of attention and 1000 stars on Github.
]]>Templating in JavaScript - Featuring Mustache, Jade, Transparencytemplating-javascript-mustache-jade-transparency2013-03-29T19:17:02.000ZIn this post I will introduce the concept of templating. It is very likely you have already used some template engine. As a result I will go through the fundamentals quickly and then focus on a set of JavaScript ones.
You will see various approaches. There is no single right way to deal with it and sometimes it comes down to personal tastes. In this case I'll focus on just a few engines, namely Mustache, Jade and Transparency. You can find a full list of engines at our service in case you can see the available options.
Before getting too ahead of ourselves let's define an anti-pattern. That is, constructing HTML structures using DOM or some DOM wrapper such as jQuery. If you notice yourself constructing a structure this way, think twice. It is both more maintainable and more developer friendly to extract the structure within a template of some sort and leave logic to JavaScript.
At simplest level it's just a matter of performing a replace operation. I've included an example of a naive implementation below:
Essentially you just provide some data which to render into the template. The actual details vary based on engine you are using. Some of them allow you to include logic into the template, some do not. There are a couple that piggyback on good old DOM and abstain from providing any special syntax altogether.
There are also differences related to the way the engines allow you to structure your templates. For instance in some cases you may include partial templates within your master ones. This allows you to split certain commonalities in sections of their own.
Templating techniques may be used both on the frontside and backend side of the fence. Some JavaScript templating engines have been designed to be used just this way. There are some that focus particularly on backend. Jade is a good example of one. Apparently it is possible to use it at frontend with a bit of hackery although I have not given that technique a go. Just saying that the line can be a bit blurry at times.
There is a huge amount of templating engines available for Node.js. In this post I will focus mainly on the frontend side since that's what JSter is all about after all.
It is possible to use templating on the frontend in various ways. In case I want to share templates with my frontend code, I usually simply render the templates on the backend within script tags with type set as text/template. After that it is simply a matter of selecting the element (remember to attach a unique id!) and using the data the way you want. For instance you could compile it through some templating engine I'll go through in a bit.
Lately I have been playing around with RequireJS plugins that allow you to include templates directly within your modules. I consider this a cleaner approach as you may store templates within files of their own. And furthermore they may be included in a resulting build.
Roughly templating engines may be split into logicless, ones with logic and then those that don't actually implement any specific syntax. I will examine these categories in more detail next.
Just to give you an idea of the syntax, consider the example below. It is based on mustache documentation. You can play around with the syntax there.
Markup:
Data:
As you can see it is fairly simple to inject data to your template. The scheme relies on extra markup. The logic is hidden within a concept they call as tags. That "empty" bit at the end is a good example of this. Give it is true, the text will be shown. Else it will be hidden.
Personally I like to use Jade especially on the backend side given it integrates well with Node.js and provides a light syntax resembling YAML. If you like HAML, you are bound to like Jade. Apparently it is possible to use Jade even on the frontend although I have not given it a go.
Just to give you an idea what Jade syntax looks like, consider the example below. I simply took the mustache code and ported it to Jade. It uses the same data as above.
Markup
It reads quite well at least in my eyes. I may have missed some tricks to make it even tidier but you get the idea. You can give the syntax a go over at Jade documentation.
Transparency and Weld use yet another approach I find very interesting. The libraries work both on frontend and backend (Node.js). What makes them special is that these libraries operate directly on DOM avoiding having to define custom syntax of their own. It will be very interesting to see whether this sort of techniques become more prevalent as opposed to something like mustache.
Next I will show you what the example I implemented above using mustache looks like when Transparency is used instead. Since you should be familiar with Jade by now I've defined a simple structure using it:
For Transparency to work its magic we'll need to bind the data to the structure and define logic as needed.
There are a couple of differences I would like to highlight. First of all the actual markup is very light. This makes Transparency very designer friendly. It's up to the coder to do the "heavy" lifting. In this case we use directives to bind some attributes we may not bind directly. Both "url" and "first" provide examples of these.
If we wanted we could eliminate that "first" bit we could simply use a bit of CSS for that. In fact that is the approach I would take. In this case we just illustrate how conditional logic works with directives.
As you can see it is possible to achieve a lot without a specific templating syntax. It will take some extra effort to deal with those special cases (like "url" in this case). I think it should be possible to at least minimize this effort with composition. So in practice there might not be that much code or at least it would be more compact.
]]>Monthly JSter #1: Trending Libraries on March 2013monthly-jster-march-20132013-03-21T16:20:11.000ZFor not to get lost in all this libraries we have on JSter we decided to deliver each month a brief summary on Jster updates.
You will discover the most fresh and the most popular JavaScript libraries that were recently started or added to Jster.
Don't miss them as they may save you the hours of work and ehnance any web applications. But before we start we have an announcement.
Right now we are working on a project that will (as we think it) help web developers in managing user feedback.
Meet Bugira, a bugtracker that allows any visitor of your site to submit you a prefessional bugreport.
Within this report you will receive the most complete data you might need to discover the issue and reproduce it.
You will know user's browser, OS, last actions and snapshot of a last page the user seen before the bug occur.
To bring this product to you we need to collect feedback from our potential clients.
Indeed we require this to move on receiving investments. Pass this survey and get a free year of premium access to Bugira (once it is launched).
Thanks for your time and let's go back to topic.
]]>How to build Minesweeper MMO? An interview with Mienfield.com authormienfield-author-interview2013-03-13T14:24:55.000ZToday we'd like to announce a new interview section on JSter. We will ask professional JS developers (and open-source) contributors to share their experience, ask for sources of their motivation.
Our guest, @borbit, has taken minesweeper the game to a completely new level. He recreated it in HTML5, making it a complete MMO game. That's right. You can play it with your friends now.
Traditionally developing this sort of games has been an arduous process. These days HTML5 based technologies have provided new alternatives as mienfield.com proves.
What is it like to build HTML5 games? Are the technologies really ready for that? In this interview @borbit shares his experience.
Hi, @bebraw. I was really inspired by guys from Massively FUN. They created an awesome game called Word2 (wordsquared.com). I liked the idea of an endless puzzle, so I've decided to build something similar. Since I am a big fan of original minesweeper game, the idea immediately came to my mind.
At the beginning, it was a "just for fun" project where I could gain some experience in modern web technologies. My friends and colleagues really liked the idea, they saw a potential in it, so that was huge motivation for me to continue working on Minefield.
The biggest challenge for me was implementation of robust server logic. Since it was endless and multiplayer I had to care about fast field generation and preventing of race conditions. The solution to make generation fast was cutting the whole field on certain tiles with specified size (20x20 cells). This approach gave a possibility to "lazy" generate the field only where people were playing. Race conditions are being resolved on the database layer by means of compare-and-swap methodology.
On server side I use Node.js. It is a big, fast-growing platform with fantastic community behind it. Big number of rich, well tested modules let me entirely concentrate on the game implementation. It had almost everything I wanted for implementing Minefield. Also, I am very happy with choice of Redis as a database. It is lightning-fast, advanced key-value store with support of various data structures for all occasions.
On client side I had a few difficulties with graphics implementation. I had to care about speed of field rendering and animations. The whole field is represented as a grid of tiles. Since I coudn't find any suitable library for this kind of UI, I started developing Tiler. Each tile contains three Canvas elements: background layer, foreground layer and animation layer. This is a quite standard approach to canvas drawing optimization, it is being used to avoid unnecessary canvas state changes.
I've been working on Minefield at my spare time and unfortunately there is always not enough of it. I wish I had more (dreaming about full time job on HTML5 games).
]]>Web UI Frameworks Worth a Tryweb-ui-frameworks-worth-a-try2013-03-06T17:45:52.000ZWe have been used to the fact that every second site looks like Twitter. That's because of their awesome Bootstrap UI framework.
We've seen CSS frameworks before, but all of them were narrow enough to solve one problem at a time. Usually this meant a grid layout and resetting CSS.
Twitter Bootstrap not only provides you with flexible responsive grids but adds many useful components.
It's pretty easy to build a prototype site just by adding appropriate classes into your tags and see how beautiful CSS3 magic unfold on your pages.
From another point of view, a site built with Bootstrap loses it's individuality. When you see Twitter buttons and menus, you can even forget what site are you at.
They generally look just the same. It's pretty ok, when you do a site for non-profitable organizations or an open-source project.
Such sites will look clean and handy without a penny spent on designing them.
But how to make site look more unique?
Let's try something different then. There are many UI frameworks available. Most of them are free but some are commercial.
Some can be great alternatives to Bootstrap and some are targeted for mobile usage. So here they are, with their official descriptions.
]]>Batman.js: Advanced Guide for Superheroesbatman-js-mvc-for-superheroes2013-02-11T12:15:16.000ZLast time I wrote about a journey of a backend developer to the world of client side MVC frameworks.
It is often a good idea to research a bit before settling on one. Last time I listed four of these: BackboneJS, AngularJS, BatmanJS, and CanJS.
Although Backbone and Angular are getting increasingly popular I've chosen to use Batman.js instead. I'll elaborate on the exact reasons on another post. For now let's just focus on its basics.
Batman.js uses Rails conventions and it is based on CoffeeScript. This way you don't have to bother with boilerplate code for event submitting and handling.
With data-bindings it provides you won't use any client-side templates, except for plain HTML. This way Batman is comparable to AngularJS. But I found the superhero framework a bit smarter.
I'd encourage you to try Batman.js, especially if you are a Ruby on Rails developer.
The weak part of Batman.js is its documentation.
So if you are a superhero, (and probably you are), prepare to use your superpowers for reading source code, asking questions in Google Groups and so on.
I'd suggest you to start learning it with the next resources:
If your super powers are not strong enough to read all this links at once, put this post into bookmarks, and return when you have a running app.
It's really easy to get one running. And If you start working with a real project you might want to know how to deal with some common issues.
Let me show you some useful tricks. I will use Batman.JS 0.13 in the next examples.
It's not documented, but the main application file is a great storage of singleton objects. Such as user sessions.
When you set something in global scope you can access it on different routes anywhere on page. So If you need to display a user name somewhere in menubar, you can use simple data-binding:
The other non-trivial issue you should deal with is deletion of a resource. By Batman's convention the DELETE method can't be a route but an event. So how to use it?
As you see you can use withArguments filter in a view. This will pass an object from current context to controller.
How can you enhance views rendered by controller? Let's say to add some cool effect or attach a tooltip to a node.
In this example we switched a focus to newly rendered form field. To skip rendering at all, your controller should return @render false. Otherwise a Batman.View object will be instantiated and rendered to the main yield place.
To render a view into any other place, you should use create a new container with different data-yield.
It may seem hard to understand how can you handle the dynamically built views. If you render some html with data-foreach iterator, you have no control over inner elements.
You are allowed to use only data attributes to manipulate inner html. To add flexibility we cab attach a view object to generated elements.
Sometimes you may need to perform very basic calculations and display them in views.
In the next example we have an application with limited number of user invites. We should always show on a page how many users can be invited before the limit is reached.
In this example I did an interesting trick. I took a value from DOM and inserted it into Batman model.
This gives you very cool opportunities. With Batman you can render a page completely in Rails, and then pass all your data into HTML tags. Than this data can be taken by Batman and used for manipulations.
No need to make an backend application without rendering and views. You can use your plain old HTML templates from server and enhance them with Batman's data bindings.
And that's all for today. I hope that helped you a bit in using Batman.
This is a very comprehensive MVC framework and it's very simple in use.
Probably one day it will get better documentation and more examples.
]]>Why Should You Use Client-Side MVC Framework?why-should-you-use-client-side-mvc-framework2013-02-06T11:37:40.000Z
Looking From the Server's Side
Let me start with introduction. My name is Michael Bornarchuk, and I am a web developer since 2004.
I've built many sites and applications powered by PHP or Ruby (and Jster is on of them). As many backend developers I was trying to figure out what client-side Javascript MVC frameworks are good for. You know, we didn't hear about them before 2012. At least, I didn't.
For backend part we had many wonderful MVC frameworks in all popular languages. We have Ruby on Rails, we have Django, Symfony, Play, and others.
And now the MVC buzzword came to Javascript and met more buzz-friends there: MVVM, Backbone.js, Ember.js, SproutCore, Knockout, AngularJS. What are these things? Do they help developing web applications?
For years I was using jQuery and it was ok. So why should I change my mind and use that new geeky stuff?
Well, those were my thoughts about a month ago. I was concerned with the fact that moving logic to client makes rendering slower (yeah, a well known Twitter experience).
There are still various issues that can't be done only on server side. Finding the right balance between server and client something that every developer should take on her own.
When this balance is not reached we may come to logic and code duplication. I.e. we do form validation on client because it's fast and looks nice, but we do the same stuff on server for security reasons.
So it's all about balance. You can put all your code to server side and use jQuery for simple interactions. And it works. Worked for years.
Why to invent something new? The need of client-side MVC frameworks is clear when you start operate not only with HTML but with data on your page.
Here is an example. You want to list all users on a page using with ajax pagination. Each time you click "Next page" an ajax request with page number is sent to backend
and HTML is retrieved back. That works fine and cool. But what if you need to display a counter of users on a page: "10 active users, 2 banned users"?
Server can render them too, but, let's say you need this counters in navbar, and this means server will have to replace all the page to make counters work correctly.
In that very moment you think, that server should return not only HTML of page, but also a number of active and banned users. And the response itself can't be HTML anymore.
It should be completely reworked to return JSON serialized data, it's HTML part to be rendered and counters updated. But well, wouldn't it look nicer, if
we get rid of HTML in response at all? It's just not very flexible. If need another counter, maybe number of admin users on a page, we will have to update server and client code respectfully to handle this new counter.
And so we come to issue I described. Code and logic duplication. So the ideal solution is to return the listed users collection in JSON, process this data,
perform all required calculations, render HTML and put that into page.
The gates are opened. Part of the application's logic has moved to the client. And here we are in situation when we need to deal somehow with all that data that comes from server.
Various user collections, article collections, comment collections. We need a tool to update parts of a web page depending of their state.
Don't forget for CRUD actions. When we deal with data on client it's natural to make all interactions on client and only synchronize changes with server over REST API.
So adding or deleting user should not make page to reload as we can update page according to current data state.
What tools should be used for managing data collections and web page interactions? You are right! They are MVC frameworks!
There are many of them but we need a lightweight solution that keeps right a balance between server a client logic.
Consider choosing one of them. To make a better choice you can refer to the TodoMVC site. There you will see an example application created with different frameworks.
{{ screenshot: TodoMVC }}
Personally I just can't take and move everything to client in a moment. And I still want that most of rendering to be performed on server.
And I want to have a full control over DOM with the tools I'm used to: jQuery and it's plugins. And here are some great MVC frameworks for that:
]]>JavaScript Storage Libraries Exploredjavascript-storage-libraries-explored2013-01-28T14:33:45.000ZIt isn't uncommon to need a way to persist some data in browser. Traditionally cookies were used for this purpose. Since then better alternatives, such as Web Storage have emerged. As if that wasn't enough, there is also a Indexed Database and Web SQL.
In his comparison Christian Simms points out that Indexed Database and Web SQL in particular are robust alternatives. Since the post the development of Web SQL has halted, however. Of the three Web Storage is the best supported at the moment althoug it is also the simplest alternative being a key-value store.
From a web developer's point of view this is quite a dilemma. How do you make any sense of that mess? What if you are not happy with Web Storage and want better queries for instance? As it happens there are multiple solutions for this problem.
Lawnchair is an example of a storage library inspired by CouchDB. It uses an adapter based design. This means it is possible to use the same API while the actual database backend is selected based on platform.
Artemia builds on Lawnchair and provides some functionality of its own. This includes various queries. Unfortunately it seems the development of Artemia has stalled while Lawnchair keeps on being active.
PouchDB is bit of an interesting case. Just like Lawnchair it builds on CouchDB. What makes it special is the fact that it can sync with an actual database. This applies for offline usage as well. It is possible to sync between PouchDB databases too.
PouchDB is currently in alpha preview so consider it experimental. On conceptual level it seems very interesting, though.
Just like lawnchairydn-db implements adapter design. What makes it special is its support for schemas. If you are looking for something full featured ydn-db seems like a good pick even though it doesn't seem particularly popular at the moment.
There are quite a few wrappers for localStorage, part of Web Storage API. I've listed these briefly below:
store.js fixes one particular restriction of Web Storage as it allows you to store data without having it being cast to string always.
TaffyDB provides more comprehensive queries. The API works on a bit higher level overall than store.js.
BankersBox focuses on providing Redis-like API. Each "database" is accessed by id. After that the syntax familiar from Redis may be used. There is also adapter design familiar from Lawnchair.
IoStorage.js has a similar interface as cookie.js below.
Kizzy provides the usual get/set syntax. In addition there is support for older Internet Explorers thanks to its usage of persistent XML store.
lsd.js provides yet another alternative API for localStorage.
As you might expect there are wrappers for cookies too. Of these I would like to mention Cookies.js and cookie.js in particular. Feature-wise cookie.js seems a bit more comprehensive than Cookies.js and provides chaining for instance. EDIT: Cookies.js provides chaining too.
There are definitely quite a few storage libraries available. You can find a few more at our full listing. Many seem to focus on wrapping localStorage. Fortunately there are a few conceptually different around. I hope this post gave you some insight to the field as it is. Let us know if we missed some awesome library or made some terrible mistake at the comments.
]]>Brief Overview of HTML5 Canvas Librariesbrief-overview-of-html5-canvas-libraries2013-01-11T15:38:00.000ZHTML5 Canvas is a good example of immediate graphics. This "draw and forget" way of working is enough for some purposes. For instance you could write a simple drawing application this way. Unfortunately it isn't entirely trivial to implement interactive applications on top of Canvas without some decent effort. It gets more complicated when you are dealing with a lot of objects and you have to consider performance.
EaselJS is an example of a library inspired by Flash. You will gain hierarchical display list, interactivity and animation helpers there. The concept of display list is quite powerful. It allows you to define relationships between graphical objects. As you manipulate parent objects, these manipulations are propagated to the children as well.
As you might want sometimes a whole scene graph (or as we call it on web development side, Document Object Model), you could complement EaselJS with AtelierJS. Paper.js actually implements scene graph as a core feature. This allows you to split objects on multiple layers within the same Canvas. Sometimes you might get away with using multiple Canvas elements and CSS z-index but that's not what you want always.
Interestingly paper.js comes with a language of its own, PaperScript. As you probably know dealing with math can be sometimes a bit painful in JavaScript as you cannot overload operators easily. Instead your code ends up looking like v1.mul(v2.add(v3)) which doesn't parse particularly well. PaperScript solves this and provides a couple of custom objects.
Just like EaselJS, Paper.js comes with its own interactivity helpers. Fabric.js provides support for interactivity as well and comes with its own Object model as these libraries usually do. The specialty of Fabric.js seems to be its SVG-to-Canvas parser. Interestingly this applies to the other direction too!
KineticJS seems more or less comparable to libraries mentioned already. It's specialty is that it uses multiple canvas elements internally to achieve better performance. @softrLi seems quite excited about it in his comparison of Canvas libraries. Probably for a good reason.
]]>Top 12 JavaScript Libraries Started in 2012javascript-libraries-started-in-20122012-12-26T18:21:11.000ZThe year of apocalypse is about to finish. Nothing happened. It was a good year for JavaScript, though. Many amazing projects were started this year. In this post we will go through a collection of the most popular ones based on their GitHub starrings.
All these libraries are different, but notable on their own. The true leader of list is Meteor. They received over 6500 stars on GitHub and over $11 Million investment from
Andreessen Horowitz. That makes Meteor the promising project in upcoming 2013. Or maybe a most overestimated one? What do you think?
Most of the projects picked on our list focus on UI improvements. Examples of these include alerts and notifiers. One curious case is Yeoman. It aims to make JavaScript development by wrapping together various tools and enables developers to generate a scaffolding for their own projects.
]]>WebGL 3D Engines and Toolswebgl-3d-engines-and-tools2012-12-17T17:48:08.000ZPretty much all modern desktop browsers support WebGL Internet Explorer being a notable exception. Even then you can use hacks such as IEWebGL to get the support. Although the whole specification is quite new, there has been some interest. Google Maps is a nice example of a high profile application using it.
Since working with bare APIs is often quite arduous, many wrappers have emerged. Of these particularly three.js and PhiloGL have become popular. Libraries such as glMatrix,WebGLU, lightgl.js and csg.js provide helpers for particular purposes. It is even possible to emulate Canvas2D with WebGL by using webgl-2d.
]]>The Others: CoffeeScript, Dart, TypeScript...js-alternatives-coffeescript-dart-typescript2012-12-10T14:20:40.000ZJavascript is almost a ubiquitous language. In a way it is comparable to C in its heyday. It is the language you need to know, or at least be aware of these days. Besides being a handy language for displaying various doodads on your site (ie. a lá jQuery) it is used for application development. There are even ways to program embedded systems using it (see noduino for an example).
The language isn't without its quirks. As a result various alternative languages compiling to JavaScript have emerged. Usually they provide some missing functionality and implement language concepts of their own.
If you want a use OOP-style, or get rid fo nasty callbacks, or add some strict typing to your functions? Well, should definetely check these languages.
For instance if you are into classical OOP instead of prototypal and want some syntactical sugar, you might enjoy CoffeeScript.
In case you wish to have a stricter typing system, you could find Dart or TypeScript interesting. Those that enjoy functional programming, could perhaps enjoy ClojureScript or Roy.
The following list contains various alternatives. You do not have to stick with vanilla JavaScript unless you want to. It does not hurt to know JavaScript well but having higher level options available is always a good thing.
]]>JavaScript Color Pickersjavascript-color-pickers2012-12-06T12:00:55.000ZIf you are building an application that deals with graphics somehow, you are likely going to need a color picker. Fortunately
there are quite a few of those available for JavaScript. HTML5 includes color input type even. One color picker, aptly
named nativeColorPicker, provides a shim for Internet Explorer so that you have got all bases covered. Other pickers
available are more specialized.
One example of these is colorjoe. That is a widget I developed myself after getting frustrated with existing alternatives.
My primary goals were to make it scaleable using CSS (no images needed) and make it easy to adjust. I think I succeeded in
these goals quite well. David Durman'sFlexi shares the goal of avoiding images. It is actually a lot lighter than
colorjoe (19k vs. 4k. minified) though given its modular nature it should be possible to get rid of some of that fat
if needed.
Besides these three there are quite a few pickers available. Enjoy the listing below for some. If you are missing your
favorite, let us know and we'll add it to the catalog!
]]>Top 7 Backbone Alternativestop-7-backbone-alternatives2012-12-03T16:26:13.000ZIt has become trendy to write Backbone based applications. But Backbone is not the only Javascript MVC framework in the
world. And as many developers say maybe not the best one for every purpose. You may find it too lightweight, and it may
lack the features you actually require. For example, you may want controllers and actual MVC stack, UI widgets, etc.
If you feel like Backbone is not for you there are many other different frameworks worth to check out. In this post
I will list some of the most popular ones.
]]>
