Braindrop Labs Apps

Welcome to Daklab.

Daklab is my experimental publishing space and blog.

In this space you'll find experiments, projects, designs, tips, and tutorials related to coding. Enjoy.

Visit my portfolio or Braindrop Labs for examples of professional work.

360° Slider

360° Slider is a UI Component Concept which enables a subject/product to be spun 360° and to be viewed at predetermined “hotspot angles”.

This project is a simple prototype and could easily be expanded upon to create a more flexible/dynamic solution. Example improvements include it leveraging SVG vs. .png, being implemented as a jQuery plugin, or utilizing % based CSS, etc. but these ideas are out of the scope of this prototype. I just wanted to create a quick prototype that had some appeal to get a better feel of the interaction/behavior.

Click the image below to view an interactive sample.

360° Slider

Noded Official Release

Noded is the first Smart Timeline Calendar app designed and developed from the ground up to empower the productive.

At the core, Noded is a hybrid note taker, planner, and timeline-calendar app devoted to speed. Noded exists in spite of Google Calendar and Evernote. Noded has multilingual support and empowers customers through productivity speed, ease-of-use, and a unique approach to organization – The Timeline Node Stream. The Timeline Node Stream leaves the traditional calendar in the dust by removing “empty” calendar days, providing contextual friendly dates, and displaying everything linearly. This design provides more screen real estate to display only the information that is important to you: your life’s plans, todos, notes, ideas, and anything else you come up with.

Click the image below to get Noded:

Noded on Goole Play
 

Intro
Below are my notes from The Principles of Object-Oriented Javascript by Nicholas C. Zakas. This can be used as a summary aid but is intended as a personal reminder that is web accessible.
 
Primitive and Reference Types

  • Primitive types – are stored as simple data types (boolean, number, string, null, undefined)
  • Reference types – are stored as objects, which are just references to locations in memory. Reference values are instances of reference types and are synonymous with objects (unordered list of properties consisting of a name and a value). When the value is a function, it is referred to as a method.
  • Variable object – scoped data, primitive values are stored directly on the variable object where reference values are placed as a pointer in the variable object – serving as a reference to a location in memory where the object is stored. A value is copied when a primitive is assigned to a variable.
  • The primitives boolean, string, and number also have methods but are NOT objects. JavaScript makes them look this way for a consistent experience for development by using primitive wrapper types. These wrapper types use autoboxing, a quick instantiate and destroy of JS primitives for temporary use in processing values.
  • Bracket notation – allows object property access via string literals or variables vs dot notation. This can be extremely helpful when dynamically deciding which property to access
    • EX. var array = []; var method = “push”; array[method](“something”);
  • instanceof – can correctly identify a reference type against its inheritance (inherited base is Object)
  • In ECMAScript 5 Array.isArray() was added as JavaScript values can be passed between Frames and each page has its own global context (instanceof Array in one Frame differs from the Array in another Frame)

Read More »

Crozzword – Word Piece Puzzles

Crozzword is an easy to play and minimalist game whose gameplay is a blend between crossword and jigsaw puzzles. The idea surfaced while playing Bannanagrams recently. The idea seemed so obviously fun and through quickly prototyping it, it has proven to be. As a result, I’ve sped up my focus on this project. An official launch can be expected in Q3 2014. Here are a few teaser images :)

Crozzword Intro Teaser

Crozzword Gameplay Teaser

Triple Toggle

Triple Toggle is a 3-state toggle switch user interface component concept. The idea for a 3-state toggle switch surfaced when exploring ideas for ways to let the user easily change between a primary, secondary, and tertiary color picker in my upcoming app Noded. Originally, the goal of the color picker UI was to have a single color wheel selector visible with a single triple toggle component. This way the user could simply toggle the switch and reuse the same color wheel instead of having three separate color wheel instances. Ultimately the triangular design didn’t fit in this specific case and I didn’t force it into the UI. The idea itself was still interesting so I designed and developed this rich prototype. The image below is a magnified version of the component and clicking it will take you to an interactive sample with source code/assets.

How to Dynamically Load Scripts and StyleSheets using jQuery

Though not necessarily common, there are times when you want to conditionally load CSS stylesheets and/or JavaScript files (or modules) on a webpage. An example of where this personally came in handy was for a video module I developed which was responsible for managing video playback, playlist functionality, and the popup HTML that serves as the video container. The module was designed to be utilized in two distinct ways on the website.

  1. Minified – on an “all things video” page
  2. Standalone – on any page of the website that needed to playback video


Since not all pages on the website needed to playback video, the decision to load the module and its required assets (css, other javascript, and a web font) on every page would be irresponsible. This fact led me down the path to find out how to dynamically load javascript and dynamically load css. As you can see there are many people who have looked for a solution to this problem in addition to many solutions for it. In our specific case jQuery was loaded on every page and thus could be utilized (Note: jQuery is not required to achieve this but is helpful for the sake of brevity if already loaded). I took advantage of this fact to keep the solution very simple and succinct. You can view an example below:

//conditional determining the need to load a stylesheet or javascript file

var css = "path/to/file.css";
document.createStyleSheet ? document.createStyleSheet(css) : $("head").append("<link href='" + css + "' rel='stylesheet' type='text/css'>");

//you can similarly inject a <script> into the <head> element or preferably make an AJAX call for a script

If you are unfamiliar with the ternary operator (used on line 4) it is a shorthand for an if/else conditional. I utilize this to succinctly determine if the document contains the createStyleSheet method (thanks Internet Explorer) and then in a browser agnostic way inject the stylesheet into the document to be loaded by the browser. That’s all there is to it.

Removing Padding

Recently I ran into an issue with AlertDialog.Builder in Android when I was creating custom AlertDialog instances. In the Android docs for AlertDialog it states that there is this public method signature:

setView (View view, int viewSpacingLeft, int viewSpacingTop, int viewSpacingRight, int viewSpacingBottom)()

I thought, “Cool, this is just what I need”.

Unfortunately after trying to make the same setView call from AlertDialog.Builder, I learned that its signature did not have the option to pass in the spacing arguments. Upon some research on the Google machine and at StackOverflow (How to change dialog background color programatically? & custom alert dialog getting unwanted padding), I found that others had similar issues.

After further investigation on StackOverflow I found the answer I was looking for via this link (Remove padding around alert dialog). So in essence, when using AlertDialog.Builder to create custom AlertDialog instances, you need to instantiate an actual Dialog or AlertDialog instance prior to making the desired setView call.

Here is an example (from the app Noded which will be released Q1 2014) highlighting the before and after:

Before

	@Override
	protected Dialog onCreateDialog(int pId)
	{
		if(pId == ViewManager.DIALOG_ID_KEY)
		{
			AlertDialog.Builder builder = new AlertDialog.Builder(this);
			builder.setView(ViewManager.getInstance().getKeyDialogView());
			return builder.create();
		}

		return null;
	}

After

	@Override
	protected Dialog onCreateDialog(int pId)
	{
		if(pId == ViewManager.DIALOG_ID_KEY)
		{
			AlertDialog.Builder builder = new AlertDialog.Builder(this);
			AlertDialog dialog = builder.create();
			dialog.setView(ViewManager.getInstance().getKeyDialogView(), 0, 0, 0, 0);
			return dialog;
		}

		return null;
	}

Before (Left) and After (Right) – Notice the sliver of black color at the top and bottom of the dialog.

Quick Reference Gem
I recently read The Pragmatic Programmer by Andrew Hunt and David Thomas because the title kept popping up when I would research recommended programming books. Upon finishing, I think it would be safe to say that it is a must read for all programmers, rookie or seasoned. It is littered with great tips, practical advice, and encourages smart and respectful programming practices (language agnostic as you’d expect). At its core, it outlines a philosophy by which programmers can live by (if you’re not already). Even if you already find yourself practicing much of what the authors proclaim you should be, you’ll undoubtedly find additional nuggets of wisdom. At worst, you’ll be pleasantly reminded of things you should be doing more of.

I highly recommend the read, but the Cliffs Notes lovers, will be happy to know that the book provides a Quick Reference Card that hits the core principles outlined within. I’ve provided them below for reference and created a mini Refresh Gem, where upon refresh one of the seventy tips is focused upon. Think of the refresh gem as a “daily reminder” of sorts. But seriously, you should read the book.

Refresh

 
Full Reference

  1. Care About Your Craft
    Why spend your life developing software unless you care about doing it well?
  2. Think! About Your Work
    Turn off the autopilot and take control. Constantly critique and appraise your work.
  3. Provide Options, Don’t Make Lame Excuses
    Instead of excuses, provide options. Don’t say it can’t be done; explain what can be done.
  4. Don’t Live with Broken Windows
    Fix bad designs, wrong decisions, and poor code when you see them.
  5. Be a Catalyst for Change
    You can’t force change on people. Instead, show them how the future might be and help them participate in creating it.
  6. Remember the Big Picture
    Don’t get so engrossed in the details that you forget to check what’s happening around you.
  7. Make Quality a Requirements Issue
    Involve your users in determining the project’s real quality requirements.
  8. Invest Regularly in Your Knowledge Portfolio
    Make learning a habit.
  9. Read More »