Wrapping Web Components With React

By on August 8, 2017 9:38 am

There are many reasons to like React. It provides a nice library for writing reusable components and leverages its own virtual DOM, abstracting away the obtuse native DOM APIs in favor of a simple method calls, which are further abstracted away with a JavaScript language extension, JSX. Numerous other reactive and virtual DOM solutions exist that provide a similar level of abstraction. These solutions diff the current and next state and properties of components in the virtual DOM to determine if and where changes are needed in the actual DOM, resulting in a performant, testable abstraction for writing new components. React is also lightweight in that it is not a full application solution. It simply provides the framework for reusable components that can be plugged into any web application.

Making TypeDoc better

By on April 20, 2017 11:01 am

Over the past several months, the SitePen team has been hard at work on Dojo 2 along with the tools and infrastructure to support it. Part of that infrastructure, and one of the major priorities for Dojo 2, is to have top notch developer documentation, complete with examples, tutorials, and API documentation. The early fruits of this labor can be seen on the new dojo.io website.

For API documentation of JavaScript projects, JSDoc is a solid tool that gets the job done, and we wanted to be able to use something similar for TypeScript. JSDoc has support for type annotations in source code documentation comments, but this is redundant in TypeScript as the type annotations are provided in the code. We wanted to find a tool that was similar and a defacto standard, but that would take advantage of the TypeScript compiler API to derive the types of nodes.

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.

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.

cover

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!

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!

cover

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!

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.

Dojo FAQ: What does Dojo’s parser do?

By on April 16, 2014 9:53 am

DojoFAQ

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.

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

By on March 26, 2014 10:01 am

DojoFAQ

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.

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.

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

By on February 5, 2014 11:55 am

DojoFAQ
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.

Wrong:

<body>

Right:

<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.

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

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.