Category: Projects

ngx-month-year-selector: A month & year selector for Angular 6+

Posted on | by John Endicott

I had some trouble finding an independent date selector for Angular that supported month & year selection only (without day selection). Most of the stand-alone ones did not support the functionality of skipping day selection out-of-the-box and the few that did were tied to UI frameworks, like Angular Material’s date picker. So I decided to code and release one as a learning project and to maybe fulfill somebody’s need for a solution.

ngx-month-year-selector is a month & year selector form control directive for Angular 6+ with support for ngModel binding, Reactive Forms, and Events. ngx-month-year-selector is independent from any UI frameworks (however should be compatible in any UI framework like Bootstrap, Angular Material, etc). The package can be imported into your project using NPM by running npm install ngx-month-year-selector. More details on getting started can be found here.

Demonstration: https://crankedapps.github.io/ngx-month-year-selector/

GitHub: https://github.com/crankedapps/ngx-month-year-selector
NPM: https://www.npmjs.com/package/ngx-month-year-selector

REST API boilerplate using Slim 3, Eloquent ORM, JWT, PHPUnit, and more

Posted on | by John Endicott

I have been using Slim 3 in some recent projects and wanted to create a quick boilerplate for scaffolding out RESTful APIs. Slim is a PHP microframework that helps you quickly write simple yet powerful web applications and APIs. It provides framework essentials such as routing, middleware, and dependency injection without all the bloat other “kitchen-sink” frameworks provide. My boilerplate comes with the following configurations out of the box:

Slim 3 Framework
Built on the latest Slim v3.10 PHP microframework and supports PSR-7 interface.

Eloquent ORM
Boilerplate is bundled with Laravel’s Eloquent ORM, a popular object-relational mapping library for PHP. This allows for easier query building and management of database data using object-orientated models.

JSON Web Tokens (JWT)
JWT middleware is bundled and used for user authentication sessions and to guard protected routes.

Respect\Validation
Respect\Validation helps saves time by allowing us to write less boring validation code for user-inputted data.

Monolog
Monolog provides out-of-the-box PSR-3 interface application logging.

PHPUnit
PHPUnit also comes bundled and I’ve written enough test scripts to provide 100% code coverage of example To-Do List API.

Phinx
Phinx makes database migrations a breeze, allowing you to write migrations in both PHP and SQL, while providing easy version management of your database.

To-Do List API
A RESTful user-authenticated To-Do List API ships with the boilerplate as quick example. See API documentation on GitHub.

Find it on GitHub
Get all the code and see the documentation on GitHub: https://github.com/crankedapps/slim-rest-boilerplate

CrankedBlue – A responsive WordPress theme in HTML5 & CSS3

Posted on | by John Endicott

I’ve had quite a few questions and requests for examples in regards to my experience with responsive web design and WordPress themes. I’ve worked with WordPress frequently over the last 10 years, and I wanted to do a quick example for those asking about my experience and figured I’d just release it free. There are lots of easy UI frameworks like Bootstrap where you can whip together responsive design with virtually no knowledge of HTML5, CSS3, media queries, etc but I wanted to create a project that showed I have the knowledge to build a responsive website design from scratch without using any UI frameworks, jQuery plugins, or similar technologies – just pure HTML5 and CSS3. I also wanted to demonstrate my knowledge of coding themes from scratch into WordPress, so I broke this project down into two sections.

The Mock-Up
So to start this project, I needed to put together a mock-up in just HTML and CSS. You can see that mock-up live here. I have started with the most basic necessities for a WordPress theme: a header, 2 columns (a posts/content column & a widgets column), and a footer. I coded this from scratch using CSS3 media queries to make it responsive. The most complicated part of the design was the responsive menu – I needed the dropdowns to go at least 3 tiers deep in preparation for WordPress. The nav menu is mostly composed of CSS, but eventually I had to add a little Javascript for toggling the dropdowns on smaller screens. You can download a zip of the mockup here.

Coding to WordPress
Coding to WordPress is fairly straight-forward. Their documentation is long-standing and the API hasn’t really changed drastically over the years. Went smoothly, wrote several things in PHP using several action hooks and even a filter. I integrated WP Customization API so you can change the logo, header image, background color, header text colors, menus, etc via the WordPress Customizer in the admin panel. After I was finished, I did quick testing using Theme Unit Test provided by WordPress and also the Theme Check plugin recommended by the WordPress Theme Developer reference.

Overall, this serves as a quick example that I was able to throw together in some spare time over the weekend. I will most likely be following up with updates to CrankedBlue; and maybe a sister theme based on Bootstrap and/or some jQuery plugins, and maybe some WordPress custom plugins as well, just because to broaden my portfolio.

Live Demo & Download
Live demo is available here. I am submitting to the WordPress theme database, however apparently after searching, it appears the wait on review can be 6+ months. In the meantime, CrankedBlue is available for download and is licenced under GPL.