WordPress Front End Application and Custom Admin Dashboard

Below is an email I sent to a client after finishing the project I was hired to do. It demonstrates my ability to provide a static walk through of a UI using screenshots and clearly written descriptions and instructions. Note: I have changed the clients’ contact information to protect their privacy.

“Lindsay Brown” <LindsayBrownDenotes@gmail.com>
To: “Clients with a private GitHub Repository” <client@co.com>
Subject: Walk Through of WordPress InTheNews Page and Admin Dashboard

Good Morning, Client,

I pushed the finished WordPress admin dashboard and news cards web page to the staging branch on December 5th. Have you been able to review it yet? I would be happy to demo them to you using Google Screen Share at your earliest convenience. Meanwhile, I pasted some screenshots below which basically provide you with a tour of the finished admin dashboard and the finished public-facing responsive, flexible grid for the news cards.

I upgraded your WordPress site to v 4.7 and pushed that and some other admin dashboard customizations to the staging branch. The 4.7 upgrade does not change the look or functionality of the site.

If you do not have the time for a demo and the below looks okay, I would be happy to merge to master after receiving your approval.


Getting started:

Your user login is “client@co.com.” You can log in using a password that will be auto-generated when the site is deployed on the production server. You should change that password the first time you log in by clicking on “Users,” then scrolling down to the “Generate Password” button.

Once the live site is configured correctly, you and the other Co staff members will log in at https://co.com/inthenews/login.

The only user who can create additional users and update plugins is you, the administrator user, client@co.com. There are three installed plugins: Advanced Custom Fields (v 4.4.11), Podamibe Custom User Gravatar (v 1.0.3), and WordPress Database Backup (v 2.3.1), which will email you a database backup once a week.

You will know when a plugin needs to be updated when you see the pink circular arrow icon appear in the left corner of the admin bar as shown in the screenshot below. Click on the icon to go to the update plugin page and follow the prompts from there.

Admin dashboard tour

News Card screen:

The Edit | Trash | View submenu items appear when you or an editor user hover over or touch the title of an individual news card. The rows’ default order is reverse chronological order (most recent on top). You can change the sorting order by clicking on each header (Title or Date). Clicking on the Title header will sort the news cards alphabetically.

Edit or Trash News Cards screen:

Category name is a drop down menu and publication date is a “date picker” (like a mini calendar) that pops up when you click in the field.

Add a News Card screen:

Very similar to the Edit or Trash a News Card screen except fields haven’t been filled in yet by any user and the “Preview Changes” button is simply a “Preview” button. Placeholder text provides brief instructions for each field.

Instructions are otherwise located just above the Publisher field and Image button.

Select Image screen:

Images need to be uploaded to the Media Library. The reason for keeping images on your own server is that images that sit on external websites are third party dependencies that you cannot control. Eventually they get moved to different URLs (I fixed a few that already have been) and the respective news card ends up with a missing picture icon in the corner of a mostly blank, gray news card. Fortunately, images that you upload into the Media Library are in your control; plus, they can be edited and cropped by clicking on the blue Edit Image link on the right side of the Select Image screen.

Edit Image screen:

To use the crop tool, click on the crop button all the way on the left (it will become darker, indicating it is active), then click and drag on the image to define the crop area, then click back on the crop tool again. The save button will then turn a brighter pink, meaning it can then be clicked.

Previewing a news card:

Back on the Add a News Card screen and also on the Edit or Trash News Cards screen, the news card preview button (upper right corner) will show you what the single news card you just worked on will look like at various screen sizes as you drag and resize your browser window. For example, the below screenshot shows a browser width of 1400px (each card column is narrow and so publisher and title cover four lines, and there is more white area under the image).

The preview below shows a browser width of 542px (the card column is wider and so publisher and title cover three lines as opposed to four, and there is less white area under the image).

Public-facing Web Page

The In the News Web Page:

The new WordPress public-facing web page looks almost identical to the original Laravel web page except now there is better centering and the View All News button has a white background that turns gray on hover like this:

If I missed anything, I’m just a phone call away. Please let me know if I can go ahead and merge this to the master branch. The original InTheNews web page will remain published until Sajad or someone in Dev Ops handles the redirect; i.e., removing “.html” from “https://co.com/inthenews.html.”

Thank you and I hope you are enjoying your holidays!

Lindsay Brown
(202) 555-5555

TypeScript Configuration Troubles – Developers Unite

After three long days of whack-a-mole’ing my Modern Web Dev build for my Angular 2/TypeScript/Sass/Gulp website project, it is launched again on my local server. Four compilation errors plagued me and other developers world-wide. I fixed three out of four of them. I welcome any comments over the next few days that could point me toward a solution on the one that is still broken. See first error below.

1) error TS2304 is TypeScript compilation-related


First thing first: the one left unfixed. The most recent error from my command line today, which resulted from my running the gulp serve command, centers around TypeScript compilation failing in my build. As advice via the link above suggests, I could call the compiler from the root directory, or pass in absolute paths. The absolute paths work-around is what I will try tomorrow. My initial thought was to change a line or two in the gulpfile.js, but this generated build is very complicated and, aye, there is no such file named gulpfile.js in it!

Error on command line:
[19:22:53] Error in plugin run-sequence

An error occured in task 'scripts-javascript-dist'.

app/pages/public-events/public-events.component.ts(6,36): error TS2307: Cannot find module '[filepath to typescript file].

app/pages/public-events/public-events.component.ts(16,13): error TS2304: Cannot find name 'Images'.

app/test/sanity_test.spec.ts(2,1): error TS2304: Cannot find name 'describe'.

app/test/sanity_test.spec.ts(3,2): error TS2304: Cannot find name 'it'.

app/test/sanity_test.spec.ts(4,3): error TS2304: Cannot find name 'expect'.

app/test/sanity_test.spec.ts(7,2): error TS2304: Cannot find name 'xit'.

app/test/sanity_test.spec.ts(8,3): error TS2304: Cannot find name 'expect'.

/Users/lindsaybrown/dev/Lynzphotos2016/node_modules/angular2/platform/browser.d.ts(77,90): error TS2304: Cannot find name 'Promise'.

/Users/lindsaybrown/dev/Lynzphotos2016/node_modules/angular2/src/core/application_ref.d.ts(83,60): error TS2304: Cannot find name 'Promise'.
X 5 more similar promise errors referencing different line numbers in the parentheses.

/Users/lindsaybrown/dev/Lynzphotos2016/node_modules/angular2/src/core/change_detection/differs/default_keyvalue_differ.d.ts(23,15):error TS2304: Cannot find name 'Map'.
X 8 more similar map errors of course referencing different file names and line numbers.

/Users/lindsaybrown/dev/Lynzphotos2016/node_modules/angular2/src/facade/collection.d.ts(2,25):error TS2304: Cannot find name 'SetConstructor'.

/Users/lindsaybrown/dev/Lynzphotos2016/node_modules/angular2/src/facade/collection.d.ts(1,25): error TS2304: Cannot find name 'MapConstructor'.

2) npm complains about peer dependencies

Here is my comment on this issue (#5746) on Angular’s GitHub account and the comments of others who chimed in with me: https://github.com/angular/angular/issues/5746#issuecomment-215327528

Although this issue was closed on Angular’s repo, that does not mean it is fixed, as recent comments reflect. My error (pasted below) concerned the reflect-metadata dependency, but others’ concerned es6-promise, es6-shim, rxjs, and zone.js. NPM is referring to these dependencies as peer dependencies, although they are all required by Angular 2 in order to run an application. It is strange that they are referred to as peer dependencies and not just dependencies. The reflect-metadata API makes it possible for Angular 2 component decorators to work. They involve mapping and observables.

Error on my command line:
npm WARN angular2@2.0.0-beta.15 requires a peer of reflect-metadata@0.1.2 but none was installed

My get-it-to-run solution:
Lindsays-MacBook-Pro-2:Lynzphotos2016 lindsaybrown$ npm install reflect-metadata@0.1.3 --save-dev

Note: the --save-dev flag makes sure the npm package gets written to the package.json.

3) sass-node update

The first dependency that broke my Modern Web Dev build was my sass-node package not handling errors that I made as I played with my SCSS styling. I updated that package with npm-install node-sass@3.5.3 --save-dev.

4) Upgrading the whole Modern Web Dev build

I updated the entire Modern Web Dev package.json from https://github.com/dsebastien/modernWebDevBuild/blob/master/package.json, then ran jspm init (the default module loader for this project), then I ran gulp clean, then gulp, then gulp serve. My project is running on my local server but errors are still present. Feels like a fragile build to me, maybe due to my meddling with it, or maybe due to the challenge of any build keeping third party dependencies updated and compatible with one another.

To sum up…

I had no idea how many build configuration kinks still needed to be ironed out while Angular 2 is still in beta. Angular is open about the fact that they rely on third party packages/modules/dependencies. Granted, being that this is my first Angular 2 website, I could have tried writing a simpler gulpfile.js or even skipping the task runner and using just npm as outlined on https://angular.io/docs/ts/latest/quickstart.html.

With that in mind, if this Modern Web Dev build breaks one more time, I will write my own, simpler gulpfile.js from scratch, and add each dependency using npm install [package-name] --save-dev.

Update on April 28, 2016: Thank you Dave Ceddia of Angularity for your emailed advice that I follow my plan B irregardless of any additional breaks: start my build from scratch by writing my own gulpfile.js.

Checking In

This is a status update regarding my job hunting.

After I went on some interviews in January, I realized what kind of tech job I really want. I spent February and March learning NodeJS by attending NodeDC meetups, making inspiring connections at the annual NationNode conference, and working my way slowly through LearnYouNode.

I have also been dissecting the Modern Web Dev build I used to scaffold the next version of my event photography website. Lynzphotos2016 is under development. I am writing it in TypeScript using the much-anticipated JavaScript framework, Angular 2. Babel will compile my TypeScript to es5. My task runner is Gulp. I am using Sass for my styling, so am writing my styling in a SCSS file, using mixins and variables. I am going to dabble in BEM and SuitCSS. Frankly, I am dabbling and exploring too many optional tools and methodologies in this build, hence my slow progress. I hope I am not being too hard on myself by calling my progress slow.

For greater detail about the build, about my thoughts on the naming convention, and to find out which learning resources have helped me along the way, check out my project’s README.md on GitHub.

Further, I have refactored my NTPEP map in order to demonstrate that I can exercise closure. I have also taken Angular 2 tutorials, the main one being the Tour of Heroes which I pushed to GitHub. I have attended the DC OpenDataDay conference and taken smaller, unpublished tutorials on Plunkr and cloud9.

Every day I log my hours and summarize what I do in each session. I believe in Deliberate Practice, a learning methodology which entails stretching out of my comfort zone and challenging myself on new material in two sessions a day.

Interactive NTPEP Map – JavaScript, SVG, JSON, Python

NTPEP is the National Transportation Product Evaluation Program, a resource-pooling project for state Departments of Transportation run by my former employer AASHTO.

Here are four short paragraphs summarizing why I made this single page web application and how it works: README

This is the second version of the map. I added click functionality instead of hover, and a drop down menu by which users can select a transportation product type and then see those participating states turn white. Visit my GitHub account to see the complete code for this second version of the NTPEP map.

Please note that the implementation below uses Flexbox for styling.


If the interactive map does not appear in this space, your browser needs to be updated. Please view the map on ntpep.org instead.

Video: My Interactive Map with Python, JavaScript, SVG, JSON

I gave a presentation on my interactive map at Ladies Who Code – DC on September 21, 2015. Thank you, Jennifer Galvin, for recording this at the Sunlight Foundation in Washington, DC.

The player above will play this entire YouTube playlist. It is comprised of several three to nine minute-long videos. The video topics are:

  • an overview of how my single-page web application works,
  • a demonstration of the SVG coordinate system which drew the state shapes,
  • a discussion about JavaScript testing on UI elements,
  • a look at the JSON structure and the Python script that wrote it,
  • ideas on how to automate updating the contact information;
  • and lastly, a challenge posed by Liz Merkhofer to show only the contact information for the individual(s) who serve as the point of contact for the one product type that is selected in the drop down menu.

If you are interested in trying to solve Liz’s challenge, you may view and fork or pull the map’s code from my GitHub account: https://github.com/LindsayBrown81/exploreMapPy

The official Meetup summary for this event: http://www.meetup.com/Ladies-Who-Code-Washington-DC/events/225259705/


Interactive Map (previous version): State DOT Usage of NTPEP

I designed and developed the 2013 version of the interactive JavaScript map for AASHTO’s National Transportation Product Evaluation Program (NTPEP).

Update: 7/26/2015  See post “Interactive NTPEP Map – JavaScript, SVG, JSON, Python” to view the second version of this map which is responsive, includes click instead of hover functionality, and a drop down menu by which users can select a product type and see those states turn.

If the interactive map does not appear in this space, your browser needs to be updated.