Feb 14

Dojo FAQ: How do I optimize a Dojo app for mobile?

By on February 14, 2017 8:25 am

Web applications can be deployed to many environments, including desktops, tablets, and mobile devices. We can even deploy web applications natively using a wrapper such as Apache Cordova to gain access to device features such as GPS, battery, and accelerometer data. However, it is not always optimal to package our application into a universal layer file, as we may be sending Cordova-specific code to our web users and packaging web-specific code with our native application. Luckily, Dojo provides us with tools to limit or exclude platform-specific code from our deployments by using dojo/has feature detection and staticHasFeatures within our build profiles.

Nov 8

SitePen Podcast Episode 021

By on November 8, 2016 1:29 pm

Is it a dongle? The Apple event happened and the team shares their thoughts on the future of the Mac. They discuss what they like and don’t like, and what they think of the future of their favorite development platform. Also, the gang discusses Intern and the new features coming down the pipeline.


Show Notes

That’s a wrap! If you’d like to be a guest on the SitePen Podcast or just think we’d be fun to hang out with for an hour, let us know!

Oct 27

SitePen Podcast Episode 020

By on October 27, 2016 8:12 am

Torrey is out this week, but we have a very special guest, Dylan Schiemann! We start off by talking about the new features in TypeScript 2.0 and then Neil describes his woes using TypeScript for rapid prototyping. Additionally, we talk about Yarn – the new npm CLI tool, and the announcement of the JS Foundation!


Show Notes

That’s a wrap! If you’d like to be a guest on the SitePen Podcast or just think we’d be fun to hang out with for an hour, let us know!

Jun 13

JSConf 2014 Adventures

By on June 13, 2014 12:27 pm

JSConf 2014Warm weather, ocean water, and sunburn. Yes, I just attended a JavaScript conference! JSConf is a three-day conference that has talks by a number of great speakers, split up with a “choose-your-own-adventure” day in the middle. The talks covered a wide variety of topics, from front end tooling to JavaScript robotics.

The first day of the conference had many great talks. The one that stood out the most to me was the User Interface Algorithms talk by Mark DiMarco. He described Voronoi Diagrams and, using The New York Times’ 512 Paths to the White House page, shows how they are used to determine which path to highlight in a tree based on the mouse position. He then examined the Amazon drop-down menu and explained how it knows when to keep submenus open.

Apr 16

Dojo FAQ: What does Dojo’s parser do?

By on April 16, 2014 9:53 am


The Dojo Parser provides the ability to declaratively instantiate widgets within our markup, allowing you to add Dojo widgets to your page in the same way you are accustomed to adding HTML5 widgets and form elements, keeping your JavaScript free of boilerplate instantiation code. It does this by scanning the DOM for nodes containing a data-dojo-type attribute and instantiating widgets in place of those nodes. It can scan the page automatically when parseOnLoad is true in our Dojo configuration, or it can be invoked manually by requiring the dojo/parser module and then calling it’s parse method. The parser is also used by Dijit’s _WidgetsInTemplateMixin so we can declaratively instantiate widgets from within our widget templates.

Mar 26

Dojo FAQ: What is the difference between dojo/on and dojo/aspect?

By on March 26, 2014 10:01 am


dojo/on and dojo/aspect are two APIs that appear to do similar jobs but actually serve two different purposes. dojo/on is used to setup event listeners for DOM nodes and event-emitting objects. dojo/aspect provides Aspect Oriented Programming facilities so functionality can be run before, after, or around a method call and can even manipulate the input to the original method or the original method’s output.

Feb 13

Creating Dojo Widgets with Inline Templates

By on February 13, 2014 11:58 am

Many Dojo widgets make use of client-side templating for generating the UI. Template HTML files are brought in to the page with dojo/text, parsed and converted to DOM nodes, and placed on the page, allowing our code to make substitutions, instantiate widgets within the template, and hook up events and attach points. However, we may find ourselves dealing with markup generated on the server and delivered on the page that we want to enhance with Dojo. Luckily, it is quite simple to make a custom widget that uses its source node as the template, allowing us to use markup already on the page as the template for our widget.

Feb 5

Dojo FAQ: Why are my dijits rendered without a theme?

By on February 5, 2014 11:55 am

Dijit was designed to help make your development life easier. However, There are a few pain points to be aware of, and one of them is when dijits are rendered without a theme applied to them. There are a few common causes for this that are easy to identify and even easier to fix.

Forgot to add class to body tag

Forgetting to add the theme class name on the body tag of the document can cause dijits to appear unstyled. This is the most common cause of unstyled dijits, and should be the first place to look.




<body class="claro">

Dijit theme CSS selectors begin with the theme name as the top-level selector. If the theme class is not included on the body tag it would cause all dijits to appear unstyled, even if the theme CSS is pulled in, as none of the theme selectors will match the markup.

Forgot to include CSS for theme

Forgetting to pull in the CSS file for the theme is another common pain point. To include the theme, add a link tag with an href that points to the theme file. Theme files in dijit are in the following path structure dijit/themes/themename/themename.css. For example, the claro theme would be included in the following way:

<link rel="stylesheet" href="dijit/themes/claro/claro.css" />

Included wrong CSS or applied wrong class

A less common but possible cause of unstyled dijits is adding the wrong class name to the body tag or including the wrong CSS file.

	<link rel="stylesheet" href="dijit/themes/claro/claro.css" />
<body class="tundra">

Just as before, the theme’s CSS selectors will not match the markup and the styles will not be applied if the class name on the body tag does not match the name of the loaded theme.

These issues can be easy to miss and be a real cause for confusion and frustration. Once you know where to look, however, fixing them is extremely simple.