Portfolio Artifacts

Interactive Learning Widgets for Web Dev Students — https://aaawebdev.com/interactive-web-dev-activities/

Teaching web design and development requires practice with concepts and code. These widgets provide hands-on drill practice without the need to develop a complete project. The animation above shows just one of these tools in action, allowing students to interactively adjust the CSS Box Model properties of an element with immediate results and a final accuracy check.

Tutorial Videos — https://www.youtube.com/@abbylangner

Before, during, and after the COVID lockdowns, I have been creating remote learning videos for students and teachers. My YouTube channel includes a selection of public-facing tutorials for students of Web Development, Robotics, Physical Computing, and more. With physical computing, such as the wearables lesson shown above, I have a portable setup for recording live. For screencasts, my preferred software is Camtasia.

WordPress Professional Development Presentations

As a web developer, I am deeply familiar with WordPress as a CMS, development platform, and all-around great tool for a majority of public-facing websites. Giving back to the amazing WordPress community is important to me, and I’ve presented workshops at local Meetup groups as well as regional WordCamp conferences. I enjoy working with professional adults to extend their knowledge and skills.

EAI Education — www.eaieducation.com

I provided front-end support for this Nodus E-Commerce store which provides education supplies out of New Jersey. I frequently used jQuery plugins and stretched my CSS skills to accomplish the designer’s vision and meet functional requirements.

Curriculum for 3rd Semester Web Design — StudentView

Coming in as a new teacher with 2nd-year web students, I spent one unit ramping up the rigor of their vocabulary and quality of code, including strict XHTML compliance and separation of CSS to an external style sheet. Then we moved on to more advanced CSS topics (thumbnailing, spriting, etc), JavaScript, and a brief e-commerce project using a content-managed PHP shopping cart.

Slider-Pushover Widget — https://abbysdoor.com/work_samples/left-to-right-slide-pushover/

Click here to see a demonstration and explanation of the widget. The animation is powered by jQuery, and the pushover effect is the result of carefully constructed CSS.

Above is the simpler, stripped-down version. This link takes you to the version which is built to accept two generic Backbone.js views as the content of the left and right panels. Feel free to view the source code and make use of the widget, but please drop me a line when you are finished. I would love to see others using the Backbone.js version for interesting work!

Lindsay VFD Calculator

  
Live link unavailable. This application was written entirely in JavaScript using CoffeeScript and HighCharts.

WooCommerce Hide Out-of-Stock Variations

Sometimes the key to working in WordPress is getting to know the hooks and filters available in well-developed plugins like WooCommerce. Hiding the out-of-stock variations of a product (as opposed to simply disabling them) was very easy with this three-liner that hooks into the appropriate WooCommerce event.