I wrote a blog post about <a href="/blog/signing-you-work-as-a-developer" target="">signing your work as a developer</a>. If didn't get a chance to check out my post, I gave a quick summary of what signing is.

<blockquote class="blockquote">
| Signing is a form of encryption authentication. When encrypting a message in PGP, you are able to sign it with your private key. The recipient could then verify that signature with your public key. This would allow them to verify the message was in fact sent by you.
</blockquote>

  This same concept of "signing" can apply to files. You can create a digital signature file using encryption to verify the source of a document.

As a result, I wanted to created a repository of all my digital signatures for any files I share online. This provides a way for viewers of my content to verify its source. 

## Built With:
- Keybase Pages for hosting
- Bootstrap 4.0 front end styling
- PGP for signing

## Keybase Pages Hosting:
<a href="https://keybase.io/docs/kbp" target="_blank" rel="noopener">Keybase Pages</a> are a way to host static sites from the <a href="https://keybase.io/docs/kbfs/understanding_kbfs" target="_blank" rel="noopener">Keybase File System</a>. If you are not familiar with their file system, I would suggest checking it out. A quick summary is that as a Keybase user, you have access to both public and private folders on their servers. Public folders are publicly accessible via URL. Private folders are encrypted. All the content is digitally signed. 

To get working with Keybase Pages, all you need to do is upload your html files to the Keybase File System. From there, you point your DNS to the Keybase Pages Api. You can read more about this in the documentation linked above.</span></div>

## Signed Content:
For information around PGP and signing your work as a developer, I would suggest the post I wrote on the subject.

One of the nice features about Keybase Pages is that all content uploaded to it is digitally signed. So all the static site content I am using to host my digital signatures are signed as well.

## Site URL:
<a href="https://debpu06.keybase.pub/my-site/index.html">https://debpu06.keybase.pub/my-site/index.html</a>

I built an archive for my digital signatures.

For more information, like how I built it and why, can be found here.

screenshot of the digital signatures site in the browser

digital signatures browser

I built an archive for my digital signatures. For more information, like how I built it and why, can be found here.

Digital Signatures Archive

This package consists of multiple TinyMCE templates. These templates can be used within your Episerver implementation to add default structure to your rich text content. The templates are listed below, along with how they appear once rendered on page. 

The default styling for the templates is done in bootstrap. However, additional configuration mentioned below allows for using custom class names within the templates.

For addional configuration or adding additional templates, you can reference this post I wrote describing how to <a href="/blog/create-episerver-tinymce-default-templates">Create Episerver TinyMCE Default Templates</a>. 

The source for this project is available on our <a href="https://github.com/nansen/Nansen.Components.TinyMCETemplates" target="_blank" rel="noopener">Github Repo</a>.

You can find it on <a href="https://nuget.episerver.com/package/?id=Nansen.Components.TinyMCETemplates" target="_blank" rel="noopener">Episervers NuGet Feed</a>.

## Installation:
Installation is done via NuGet package. The templates are added to the modules/_protected folder. Upon installing the NuGet package, your web configuration file will update to include reference to the templates in the modules/_protected folder. By default the templates are styled in bootstrap.

## Custom Styles:
With the added appSetting configuration below, each class will be prefixed with "ntemplate-" to assist in custom styling. 

``` markup
<add key="nansen:tinymce:customcss" value="true"/>
```

## Latest Version:
1.0.0

## Dependencies:
- EPiServer.CMS.UI.Core [11.4.6,12.0)
- EPiServer.CMS.TinyMCE [2.4.0,2.8.0]
- Boostrap [4.0.0] (Optional)

I listed <a href="https://getbootstrap.com/" target="_blank" rel="noopener">bootstrap</a> as an optional dependecy. 4.0 is the version this was built with. If you decide to use the custom css, you can ignore this dependency.

## Templates:
- <a href="#article_template_1" >Article Template: 2 Image Columns</a>
- Article Template: 3 Image Columns
- Template with 2 Images
- Template with 3 Images
- General 2 Column Layout: (50%/50%)
- General 2 Column Layout: Image Left / Text Right (33%/66%)
- General 2 Column Layout:Text Left / Image Right (66%/33%)
- General 3 Column Layout
- Accordion

### Article Template: 2 Image Columns
#### Template w/Side by side Images
<p>Donec sit amet nibh vel dolor pharetra pharetra nec id diam. In in mauris faucibus, porttitor sapien a, aliquam ligula. In diam quam, mollis non erat eget, tempus placerat quam. Integer ultrices arcu nisl, eget sagittis massa vehicula in. Ut nec eros non velit aliquam imperdiet a nec lorem. Integer sit amet ante ut turpis maximus convallis eget at tortor.</p>
<div class="row">
<div class="col-md">
<figure class="figure"><img class="img-fluid" src="https://photos.davidboland.site/debpu06-blog-container/08ec364f-47fa-414b-9c7d-ebe0b089a447-placeholder.png" alt="" />
<figcaption class="figure-caption">Ut nec eros non velit aliquam imperdiet a nec lorem. Integer sit amet ante ut turpis maximus convallis eget at tortor.</figcaption>
</figure>
</div>
<div class="col-md">
<figure class="figure"><img class="img-fluid" src="https://photos.davidboland.site/debpu06-blog-container/08ec364f-47fa-414b-9c7d-ebe0b089a447-placeholder.png" alt="" />
<figcaption class="figure-caption">Proin vel fringilla nibh, eget dignissim velit. Curabitur elementum sapien eget nisi congue egestas. Etiam nec ex hendrerit, maximus odio sed, congue elit.</figcaption>
</figure>
</div>
</div>
<div class="row">
<div class="col">
<p>Integer laoreet ligula sed eros posuere, eget semper nibh luctus. Maecenas lacus nisi, fermentum sit amet consectetur condimentum, condimentum id velit. Praesent scelerisque urna convallis, auctor orci non, facilisis diam. Proin vel fringilla nibh, eget dignissim velit. Curabitur elementum sapien eget nisi congue egestas. Etiam nec ex hendrerit, maximus odio sed, congue elit. Pellentesque fringilla nulla at convallis molestie. Integer non nunc sapien. Morbi erat nunc, sagittis fermentum felis sit amet, venenatis aliquam lacus.</p>
</div>
</div>
<div class="row">
<div class="col d-flex justify-content-center"><img class="img-fluid" src="https://photos.davidboland.site/debpu06-blog-container/08ec364f-47fa-414b-9c7d-ebe0b089a447-placeholder.png" alt="" />
<p>&nbsp;</p>
</div>
</div>

### Article Template: 3 Image Columns
#### Template with three image colums
<p>Donec sit amet nibh vel dolor pharetra pharetra nec id diam. In in mauris faucibus, porttitor sapien a, aliquam ligula. In diam quam, mollis non erat eget, tempus placerat quam. Integer ultrices arcu nisl, eget sagittis massa vehicula in. Ut nec eros non velit aliquam imperdiet a nec lorem. Integer sit amet ante ut turpis maximus convallis eget at tortor.</p>
<div class="row">
<div class="col-md">
<figure class="figure"><img class="img-fluid" src="https://photos.davidboland.site/debpu06-blog-container/08ec364f-47fa-414b-9c7d-ebe0b089a447-placeholder.png" alt="" />
<figcaption class="figure-caption">Ut nec eros non velit aliquam imperdiet a nec lorem. Integer sit amet ante ut turpis maximus convallis eget at tortor.</figcaption>
</figure>
</div>
<div class="col-md">
<figure class="figure"><img class="img-fluid" src="https://photos.davidboland.site/debpu06-blog-container/08ec364f-47fa-414b-9c7d-ebe0b089a447-placeholder.png" alt="" />
<figcaption class="figure-caption">Proin vel fringilla nibh, eget dignissim velit. Curabitur elementum sapien eget nisi congue egestas. Etiam nec ex hendrerit, maximus odio sed, congue elit.</figcaption>
</figure>
</div>
<div class="col-md">
<figure class="figure"><img class="img-fluid" src="https://photos.davidboland.site/debpu06-blog-container/08ec364f-47fa-414b-9c7d-ebe0b089a447-placeholder.png" alt="" />
<figcaption class="figure-caption">Proin vel fringilla nibh, eget dignissim velit. Curabitur elementum sapien eget nisi congue egestas. Etiam nec ex hendrerit, maximus odio sed, congue elit.</figcaption>
</figure>
</div>
</div>
<div class="row">
<div class="col">
<p>Integer laoreet ligula sed eros posuere, eget semper nibh luctus. Maecenas lacus nisi, fermentum sit amet consectetur condimentum, condimentum id velit. Praesent scelerisque urna convallis, auctor orci non, facilisis diam. Proin vel fringilla nibh, eget dignissim velit. Curabitur elementum sapien eget nisi congue egestas. Etiam nec ex hendrerit, maximus odio sed, congue elit. Pellentesque fringilla nulla at convallis molestie. Integer non nunc sapien. Morbi erat nunc, sagittis fermentum felis sit amet, venenatis aliquam lacus.</p>
</div>
</div>
<div class="row">
<div class="col d-flex justify-content-center"><img class="img-fluid" src="https://photos.davidboland.site/debpu06-blog-container/08ec364f-47fa-414b-9c7d-ebe0b089a447-placeholder.png" alt="" />
<p>&nbsp;</p>
</div>
</div>

### Template with two images
#### Image Layout: 2 Columns
<div><br />
<div class="row justify-content-center">
<div class="col-md" style="margin-top: 20px;"><img class="img-fluid" src="https://photos.davidboland.site/debpu06-blog-container/08ec364f-47fa-414b-9c7d-ebe0b089a447-placeholder.png" alt="" /></div>
<div class="col-md" style="margin-top: 20px;"><img class="img-fluid" src="https://photos.davidboland.site/debpu06-blog-container/08ec364f-47fa-414b-9c7d-ebe0b089a447-placeholder.png" alt="" /></div>
</div>
<p>&nbsp;</p>
</div>

### Template with three images
#### Image Layout: 3 Columns
<div>
<div class="row justify-content-center">
<div class="col-md" style="margin-top: 20px;"><img class="img-fluid" src="https://photos.davidboland.site/debpu06-blog-container/08ec364f-47fa-414b-9c7d-ebe0b089a447-placeholder.png" alt="" /></div>
<div class="col-md" style="margin-top: 20px;"><img class="img-fluid" src="https://photos.davidboland.site/debpu06-blog-container/08ec364f-47fa-414b-9c7d-ebe0b089a447-placeholder.png" alt="" /></div>
<div class="col-md" style="margin-top: 20px;"><img class="img-fluid" src="https://photos.davidboland.site/debpu06-blog-container/08ec364f-47fa-414b-9c7d-ebe0b089a447-placeholder.png" alt="" /></div>
</div>
<p>&nbsp;</p>
</div>

### General: 2 Column Layout: (50%/50%)
#### Template with two columns
<div class="row justify-content-around">
<div class="col-md-6">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas molestie enim id leo aliquet, ut vehicula est tempus. Duis in orci non urna commodo euismod sit amet quis nunc.Proin viverra turpis sed neque varius porta. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Morbi mattis justo vitae urna consequat tincidunt. Sed facilisis libero tincidunt interdum ultricies.</p>
</div>
<div class="col-md-6">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas molestie enim id leo aliquet, ut vehicula est tempus. Duis in orci non urna commodo euismod sit amet quis nunc.Proin viverra turpis sed neque varius porta. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Morbi mattis justo vitae urna consequat tincidunt. Sed facilisis libero tincidunt interdum ultricies.</p>
</div>
</div>

### General: 2 Column Layout: Image Left / Text Right (33%/66%)
#### Template with two columns. Image on the left.
<div class="row">
<div class="col-md-3 justify-content-center"><img class="img-fluid" src="https://photos.davidboland.site/debpu06-blog-container/08ec364f-47fa-414b-9c7d-ebe0b089a447-placeholder.png" alt="" /></div>
<div class="col-md">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas molestie enim id leo aliquet, ut vehicula est tempus. Duis in orci non urna commodo euismod sit amet quis nunc.Proin viverra turpis sed neque varius porta. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Morbi mattis justo vitae urna consequat tincidunt. Sed facilisis libero tincidunt interdum ultricies.</div>
</div>

### General 2 Column Layout: Text Left / Image Right (66%/33%)
#### Template with two columns. Image on the right
<div class="row">
<div class="col-md">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas molestie enim id leo aliquet, ut vehicula est tempus. Duis in orci non urna commodo euismod sit amet quis nunc.Proin viverra turpis sed neque varius porta. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Morbi mattis justo vitae urna consequat tincidunt. Sed facilisis libero tincidunt interdum ultricies.</div>
<div class="col-md-3 justify-content-center"><img class="img-fluid" src="https://photos.davidboland.site/debpu06-blog-container/08ec364f-47fa-414b-9c7d-ebe0b089a447-placeholder.png" alt="" /></div>
</div>

### General 3 Column Layout
#### Template with three columns
<div class="row justify-content-around">
<div class="col-md-4">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas molestie enim id leo aliquet, ut vehicula est tempus. Duis in orci non urna commodo euismod sit amet quis nunc.Proin viverra turpis sed neque varius porta. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Morbi mattis justo vitae urna consequat tincidunt. Sed facilisis libero tincidunt interdum ultricies.</p>
</div>
<div class="col-md-4">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas molestie enim id leo aliquet, ut vehicula est tempus. Duis in orci non urna commodo euismod sit amet quis nunc.Proin viverra turpis sed neque varius porta. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Morbi mattis justo vitae urna consequat tincidunt. Sed facilisis libero tincidunt interdum ultricies.</p>
</div>
<div class="col-md-4">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas molestie enim id leo aliquet, ut vehicula est tempus. Duis in orci non urna commodo euismod sit amet quis nunc.Proin viverra turpis sed neque varius porta. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Morbi mattis justo vitae urna consequat tincidunt. Sed facilisis libero tincidunt interdum ultricies.</p>
</div>
</div>

### Accordion
#### Simple accordion example with 3 items
<div id="accordionExample" class="accordion">
<div class="card">
<div id="headingOne" class="card-header">
<h5 class="mb-0" data-toggle="collapse" data-target="#collapseOne" aria-expanded="true" aria-controls="collapseOne">Group #1</h5>
</div>
<div id="collapseOne" class="collapse show" aria-labelledby="headingOne" data-parent="#accordionExample">
<div class="card-body">Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid. 3 wolf moon officia aute, non cupidatat skateboard dolor brunch. Food truck quinoa nesciunt laborum eiusmod. Brunch 3 wolf moon tempor, sunt aliqua put a bird on it squid single-origin coffee nulla assumenda shoreditch et. Nihil anim keffiyeh helvetica, craft beer labore wes anderson cred nesciunt sapiente ea proident. Ad vegan excepteur butcher vice lomo. Leggings occaecat craft beer farm-to-table, raw denim aesthetic synth nesciunt you probably haven't heard of them accusamus labore sustainable VHS.</div>
</div>
</div>
<div class="card">
<div id="headingTwo" class="card-header">
<h5 class="mb-0" data-toggle="collapse" data-target="#collapseTwo" aria-expanded="false" aria-controls="collapseTwo">Group #2</h5>
</div>
<div id="collapseTwo" class="collapse" aria-labelledby="headingTwo" data-parent="#accordionExample">
<div class="card-body">Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid. 3 wolf moon officia aute, non cupidatat skateboard dolor brunch. Food truck quinoa nesciunt laborum eiusmod. Brunch 3 wolf moon tempor, sunt aliqua put a bird on it squid single-origin coffee nulla assumenda shoreditch et. Nihil anim keffiyeh helvetica, craft beer labore wes anderson cred nesciunt sapiente ea proident. Ad vegan excepteur butcher vice lomo. Leggings occaecat craft beer farm-to-table, raw denim aesthetic synth nesciunt you probably haven't heard of them accusamus labore sustainable VHS.</div>
</div>
</div>
<div class="card">
<div id="headingThree" class="card-header">
<h5 class="mb-0" data-toggle="collapse" data-target="#collapseThree" aria-expanded="false" aria-controls="collapseThree">Group #3</h5>
</div>
<div id="collapseThree" class="collapse" aria-labelledby="headingThree" data-parent="#accordionExample">
<div class="card-body">Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid. 3 wolf moon officia aute, non cupidatat skateboard dolor brunch. Food truck quinoa nesciunt laborum eiusmod. Brunch 3 wolf moon tempor, sunt aliqua put a bird on it squid single-origin coffee nulla assumenda shoreditch et. Nihil anim keffiyeh helvetica, craft beer labore wes anderson cred nesciunt sapiente ea proident. Ad vegan excepteur butcher vice lomo. Leggings occaecat craft beer farm-to-table, raw denim aesthetic synth nesciunt you probably haven't heard of them accusamus labore sustainable VHS.</div>
</div>
</div>
</div>

I created a NuGet package to house common templates we have used for the TinyMCE editor in Episerver. 

internet browser with view of the tinymce template implementation in it

tinymce browser screenshot

I created a NuGet package to house common templates we have used for the TinyMCE editor in Episerver. Here you can find all the project information

TinyMCE Templates Package

## Built With:
- Piranha CMS running on dotnet core
- Bootstrap 4.0 front end
- Azure Web App for hosting

I created this site to act as a space to share my blog posts and projects.  It is based primarily off of the Piranha CMS blog <a href="http://piranhacms.org/docs/introduction/getting-started/project-templates" target="_blank" rel="noopener">template</a>, with some features that I added that did not exist in the current version (as of this writing), such as RSS and custom content types. The front end is built out using <a href="https://getbootstrap.com/" target="_blank" rel="noopener">Bootstrap</a>, and the site is hosted as an Azure Web App, with the database hosted in Azure as well.

An additional feature that I built into the site was turning it into a <a href="https://developers.google.com/web/progressive-web-apps/" target="_blank" rel="noopener">Progressive Web App</a> (PWA). It may be a bit overkill for a small personal site, but it seemed like a fun afternoon project, so I implemented it anyway.

A previous version of this site to act as a space to share my blog posts and projects.

You can find more detailed information about it here.

Home page of previous david boland blog in example browser window

Website Screen Capture

I created this site to act as a space to share my blog posts and projects. You can find more detailed information about it here.

Blog in Piranha CMS

Pixzle was a mobile application that allowed you to send photos to your friends as puzzles.

## Development Info
Pixzle was the last large scale mobile app that I worked on outside of work. It was active between 2016 & 2017.

Some technical aspects:

- .NET API handling gameplay
- mobile application developed with Objective-C
- integrations with Facebook and Twitter APIs

Pixzle was a fun project that I was glad to be able to work on with friends. While it did not have much success in the App Store, it was definitely something we are proud of. 

## App Store Content
Pixzle is a fun and simple puzzle game that allows you to interact with photos in a whole new way.

Playing is easy - choose one of your photos to get scrambled into a puzzle, and send it to a friend!

Solve puzzles from your friends before the timer runs out.  Use power-ups to help solve difficult puzzles. Collect points and see how many puzzles you can solve!

__Pixzle is no longer available in the app store. However, my development parther Matt Jankowiak has been working on revisions and updates. So it may be back in the App Store before you know it!__

Puzzle Your Friends with Pixzle! Pixzle was a mobile application that allowed you to send photos to your friends as puzzles.

image with pixzle icon and devices with screenshots

pixzle-hero

Pixzle was a fun project that I was glad to be able to work on with friends. While it did not have much success in the App Store, it was definitely something we are proud of.

Pixzle iOS Application

PicWords was an iPad application developed for individuals with disabilities. My cousin and I worked on this together for our cousin who's disability impaires his ability to communicate. There are simlar other tools on the market called Picture Exchange Communication Systems (PECS). However, most of them are either very expensive, or only provide a limited number of pictures.

Our application allowed users to leverage the iPad camera and microphone to set customized pictures and audio.  Users can then communicate needs by selecting the presented items.

While the app had moderate success in the App Store, my cousin and I really enjoyed this project. Not only was it our first venture in iOS applications, being able to provide our cousin with a useful tool was very fulfilling. 

__While it is no longer available in the App Store, we hope to be able to <a href="https://picwords.app/" target="_blank" rel="noopener">provide updates</a> when we have more free time.__

## App Store Content
PicWords is a simple Augmentative and Alternative Communication app, also known as a Picture Exchange Communication System (PECS/AAC).

It was designed with two basic ideas in mind. The big and easy-to-touch buttons were developed for people with physical disabilities. It reduces the difficulty of navigating across pages with smaller buttons, or reaching areas on the screen that might be out of a person’s range. The buttons only need to be touched to trigger the action - they do not need to be tapped.

The items created can be completely determined by the user. This way, the person using the app will see familiar, accustomed objects and places, rather than hand drawn or generic images. Similarly, the audio can be recorded by someone whose voice is easily recognized by the user.

The goal of PicWords is to help a person with physical and communicative disabilities convey needs and wants. For example, a category called “Breakfast” can have 12 possible items such as eggs, cereal, toast, fruit, etc. The user can swipe through and select what is desired that morning. The app can also be used to alert more pressing needs such as going to the bathroom or requesting medicine.

PicWords can be used in a variety of ways. The main action is simple. When the user touches an item along the bottom, the image is displayed larger at the top of the screen and the audio for that item is played. The app was designed to be used by the person with the disability, however, parents or caregivers can select items to communicate as well.

Images can be created by taking pictures in the app or by using any photo in the iPad’s photo library. Audio is easily recorded with the built in mic. Re-record audio or change pictures at any time by editing existing items. The app comes with four default categories to help you get started - "Around the House," "Food," "Responses," and "Fruits." Get creative and make your own custom items!

The creators of PicWords developed the app for a family member with Cerebral Palsy. The degree of his physical disability made apps with small buttons or complicated interfaces hard to use. Knowing that the iPad had the potential to be an extremely useful communication tool, the creators worked with parents and caregivers to design a simple yet effective platform.

Please contact us with comments, questions, requests, or feedback of any kind. We welcome ideas that would make PicWords better for you!

Features:

- Big, easy to touch buttons
- Customizable categories
- Create new images with the camera
- Use images from your photo library
- Record your own voice
- Four basic default categories
- Different color backgrounds
- Up to 12 items per category
- Swipe between groups of items in a category
- Easily edit the audio, image, and title of any item
- Help pages with instructions

Picwords was a PEC system which allowed you to create custom image and word associations that assisted individuals with disabilities.

Picwords logo next to ipad with screenshot of application

picwords ipad logo

Picwords was a PEC system which allowed you to create custom image and word associations that assisted individuals with disabilities

Projects

Digital Signatures Archive

TinyMCE Templates Package

Blog in Piranha CMS

Pixzle iOS Application

Picwords iOS Application