All Posts

    • AEM
    • Java
    • JUnit
    • Sling
    • Unit Testing

    - How to write JUnit Unit Tests for AEM Sling Models and Servlets, including how to mock resources, OSGi Services, and content.

  • A USGS Topographical map showing Sintson Beach, along with a hiking route in the area. The image was captured from the OpenLayers mapping application built with ReactJS.
    • Functional Components
    • Geospatial
    • GIS
    • Hooks
    • JavaScript
    • OpenLayers
    • React

    - Provides an example of how to integrate OpenLayers 6 with React Functional Components and Hooks, including how to share data and events between the two.

    • Functional Components
    • Hooks
    • JavaScript
    • React
    • SoundCloud

    - Summarizes a recent ReactJS project I worked on involving an integration with the SoundCloud Widget API. Learning to use Hooks to perform the integration was challenging but rewarding.

    • GIS
    • JavaScript
    • Linear Referencing
    • PostGIS
    • REST APIs
    • SQL

    - Describes what Linear Referencing is, and how it can be used. Includes a JavaScript snippet showing how references can be added to existing geometries, and SQL for storing/retrieving geometries from PostGIS.

    • CSS
    • JavaScript
    • Mobile Development
    • Website Optimization

    - Discusses challenges in sizing content to match the true height of mobile device screens. Includes CSS and JavaScript fixes to help address sizing issues.

    • JavaScript
    • Performance
    • PHP
    • Website Optimization
    • WordPress

    - Details a simple technique for loading Above the Fold content quickly using JavaScript and the HTML Template Tag.

  • A screencap of the AEM CRXDE interface showing a /conf node directory that is associated to the Content Tree via the cq:conf property.
    • AEM
    • Java
    • JSP
    • Sling

    - Discusses ways to resolve the ContentPolicy object from different places within AEM, including a Component's Sling Model and a Granite UI Form Field.

    • Apache
    • Architecture
    • AWS
    • AWS API Gateway
    • AWS IAM
    • AWS Lambda
    • CloudFront
    • DNS
    • JavaScript
    • Proxy
    • REST APIs
    • SSL Certificate

    - Discusses the options for hosting an AWS Lambda function behind a custom domain name, such as reverse proxying, or configuring base path mappings in AWS API Gateway. Also includes steps to publish a REST API into AWS Lambda using the Serverless Framework.

    • GIS
    • Graph Databases
    • Java
    • Neo4j
    • Open Source Software
    • OpenStreetMaps
    • Routing
    • XML

    - Details my efforts in loading OpenStreetMap data into a Neo4j Graph Database. Discusses the steps taken to load Nodes and Ways, as well as methodologies used to improve load performance.

  • A screen capture of the top navigation header of Taylor Callsen's blog, featuring a circular logo image and Taylor's name.
    • Asynchronous Programming
    • CSS
    • JavaScript
    • SASS

    - How to use the Intersection Observer API to add a shrinking logo animation to your website. Includes CSS/SASS for the structure, as well as sample JavaScript that can be used to configure the observer, and handle the logo size adjustment in the callback function.

  • A screen capture of the AEM 6.4 Global Navigation, inside the Tools and Assets section. The Reports Icon is highlighted.
    • AEM
    • Security

    - Provides the steps required to grant access permissions to the Asset Reports section of AEM 6.4

  • A screen capture of the AEM Classic UI miscadmin with a dialog window open for creating a Redirect Map Configuration.
    • AEM
    • AEM Replication
    • Apache
    • Architecture
    • Bash Scripting
    • Linux
    • Open Source Software
    • Security

    - Details how the ACS AEM Commons Redirect Map Manager interface can be used to author vanity URLs in environments with URL shortening or other URL filters. An example Bash Shell script and Apache Vhost configuration are provided that enable authored redirect maps to automatically be loaded into Apache and become active on live sites.

    • Architecture
    • AWS
    • Cache
    • CloudFront
    • JavaScript
    • PHP
    • REST APIs
    • Website Optimization
    • WordPress

    - Discusses three alternatives for loading dynamic content on cached webpages, and provides specific configurations used to implement one of the options to enable loading WordPress Comments over AJAX on a website that is cached by AWS CloudFront.

  • Locale Switcher deployed as part of the CasellaSolutions.com website
    • Apache
    • AWS
    • CloudFront
    • JavaScript
    • Open Source Software
    • Performance

    - Outlines a strategy taken to present region specific content to users based on their location or preferred locale. Describes how to determine a user's location and redirect them to the appropriate locale/version of a website. Also describes example locale switching logic using cookies set by JavaScript, and then Apache rewrite rules redirect as needed based on the cookie value.

  • Diagram showing a traditional key-based authentication scheme. When a user supplies their login credentials to an Authentication Server, they are given a sessionID cookie. The sessionID cookie is supplied with all subsequent requests, and each Protected API Endpoint must verify that the sessionID is still valid (which usually requires interation with another Authentication Server).
    • Architecture
    • JavaScript
    • JSON
    • JWT
    • Open Source Software
    • Security

    - Covers how JSON Web Tokens can be used for authentication in distributed environments, with a comparison against traditional key-based authentication schemes, and an explanation of the performance benefits that JWTs offer.

    • AEM
    • AEM Replication
    • Bash Scripting
    • Content Migration
    • cURL
    • DAM
    • SSH

    - Tools and techniques to help with content migration between AEM environments. Includes steps for disabling the AEM DAM Workflows, sample cURL commands for package installation, an overview of the Disk Usage Report, and examples of excluding paths with CRX Package Filters.

    • AJAX
    • Asynchronous Programming
    • HTML5
    • JavaScript ES6

    - Chronicles the steps I took when creating a custom HTML5 multi file uploader with Native JavaScript. Includes features like AJAX file uploads, mobile support, and upload progress indicators. The need for supporting large batch file uploads also led to the inclusion of Asynchronous JavaScript logic to ensure uploads happened one at a time, rather than all at once.

    • Asynchronous Programming
    • Google Analytics
    • HTML5
    • JavaScript
    • Website Optimization

    - Details how to set up button click tracking in Google Analytics. Features an overview of Goals in Google Analytics, how they can be created, how they can be triggered with JavaScript, and where to find Goal Conversions Reports in Google Analytics Console.

  • Screen capture of my personal blog homepage taken in June of 2018.
    • Asynchronous Programming
    • CSS
    • IntersectionObservers
    • JavaScript ES6
    • Performance
    • SASS

    - Offers a guide on how to create a table of contents style navigation menu, with progress indicators that update based on page scroll position. IntersectionObservers are used to track the page scroll position in a performant manner.

  • Screen capture of the Chrome Developer Tools showing the Network requests loading images on the sample blog post after image optimizations are activated, showing that smaller images files are requested for mobile users.
    • Performance
    • PHP
    • Responsive Images
    • Website Optimization
    • WordPress

    - Discusses Responsive Images, what they are, why they are important, and how to include them on your WordPress site. Includes research done on the most popular screen sizes, as well as how to configure these image sizes in WordPress. Shows code snippets for plugging into the wp_get_attachment_metadata and wp_calculate_image_sizes WordPress hooks to fully customize the image srcset and sizes attributes generated by WordPress. Wraps up with a performance comparison of the before and after, yielding a 60% reduction in image footprint for mobile users!

  • Detailing steps taken by a custom Bash script to automate Let's Encrypt Certificate auto-renewal and configuration in AWS CloudFront.
    • Apache
    • Automation
    • AWS
    • Bash Scripting
    • Cache
    • CloudFront
    • DevOps
    • Let's Encrypt
    • Security
    • SSL Certificate

    - How to automate the renewal of Let's Encrypt SSL Certificates, and import the new Certificates into AWS Certificate Manager while associating them with AWS CloudFront Distributions. Features a Bash Script that executes the Let's Encrypt Certificate renewal process, with example AWS CLI commands for importing Certificates and updating existing CloudFront Distributions. Closes with an example Crontab configuration so the entire process can be run automatically every 60 days.

  • Screen capture showing the respond headers of of web request; the X-Cache header, with a value of
    • Apache
    • Cache
    • Linux
    • Proxy
    • REST APIs
    • Website Optimization

    - How to set up Apache as a proxy server, while caching the content as well. Details a few of the caching configurations available, including ignoring or setting Cache-Control headers, caching content by type, or disabling caching on certain paths.

  • Sample directory structure for a WordPress Theme that uses Webpack to compile the JavaScript and SASS assets.
    • CloudFront
    • CSS
    • JavaScript
    • Minification
    • NodeJS
    • SASS
    • Theme Development
    • Webpack
    • Website Optimization
    • WordPress

    - Guide on how to use Webpack 4 to compile JavaScript and SASS in a WordPress environment. Gives examples on how to organize the JS and SCSS source code, configure Webpack, and enqueue the compiled assets into a WordPress theme. Also covers how to add unique versioning hashes to the output file names if working in a cached environment.

  • Diagram displaying the various layers that an HTTP request must pass through between the web browser and a custom Sling Servlet. The request originates in the Web Browser, then passes through the CloudFront and Dispatcher caches, then into the AEM Publish Instance and through its various Security Filters, then finally reaching the Custom Servlet.
    • AEM
    • AWS
    • CloudFront
    • Java
    • Security

    - How to create a custom Sling Servlet in AEM, perform OSGi configuration to allow requests to securely pass through AEM's security filters, and enable POST request pass-through on AEM Dispatcher and AWS CloudFront Caches.

  • Screen capture of the Google Chrome JavaScript debugger console showing that when we set the resourceA property on the asyncResources Object, our component event handler above fires property.
    • Async
    • Asynchronous Programming
    • Asynchronous Resources
    • JavaScript
    • JavaScript ES6

    - Discusses various alternatives for managing dependencies on asynchronous resources in JavaScript. Illustrates how this can be done with things like setIntervals, the Promise Deferred Pattern, and a new ES6 Proxy Object.

  • Displays a flow diagram of the HTTP request in my CloudFront WordPress caching setup. The request will be forwarded from my Website Front Door (taylor.callsen.me) to CloudFront via a DNS CNAME. If the requested content exists in CloudFront, it will be returned to the user. Otherwise CloudFront will request the information from its configured Origin server, which is my WordPress WebServer at cdn_internal_blog.gritto.net).
    • AWS
    • Cache
    • Cache Invalidation
    • CloudFront
    • Gutenberg
    • Gutenberg Editor
    • Website Optimization
    • WordPress
    • WordPress 5

    - Guide covering how to set up an AWS CloudFront cache in front of your WordPress blog, which can drastically speed up the delivery of content to your readers. This guide features special steps taken for WordPress instances hosted outside of AWS.

  • Gives example usage of HTML5 Semantic Elements on a website.
    • HTML5
    • Minification
    • Optimization
    • Robots.txt
    • Semantic HTML
    • Sitemap
    • Theme Development
    • Website Optimization
    • WordPress

    - A quick guide detailing steps to optimize your WordPress Theme for the modern web. Includes topics like cleaning up the default WordPress header, usage of HTML5 Semantic Elements, management of Sitemaps and Robots.txt, and code minification plugins.

  • A Provacative Facebook post mentioning the First Lady, designed to grab the user's attention.
    • 2016 Presedential Election
    • Facebook
    • Fake Accounts
    • fake news
    • Internet Bots

    - This post takes a look at an example Facebook post, and shows how fake accounts are used to promote it with Likes and Shares, making the post seem more legitimate. The post also discusses the number of fake accounts currently on Facebook and Twitter, and how Social Media platforms previously had no incentive to remove these fake accounts in the past.

  • Summarizes the process for generating parallel lines for each side of the Polygon Shape. These parallel lines are joined together via a convex hull to create a buffer expanding the original polygon Shape.
    • Boulder CO
    • GIS
    • Java
    • PostGIS
    • Shape Transformation

    - Details one method of creating a shape Buffer around Central Park in Boulder, CO. The method involved expanding each edge of the original Polygon shape, and then using a Convex Hull function to rejoin them into an expanded Polygon. This technique used custom Java functions, as well as several PostGIS functions to perform shape transformations.

  • A diagram of the standard Flux Dataflow, with the View component expanded with more detail. Stores will hook into the componentDidUpdate lifecycle function, which is used to update third party libraries with new data from the store. Event handlers in Third Party Libraries can be set to trigger Flux Actions, and pass data from the library back into the Flux data flow.
    • Flux
    • Immutability
    • ImmutableJS
    • JavaScript
    • React

    - Code examples and a brief explanation of how someone can use Immutable JavaScript Objects to prevent excessive ReactJS renders. This will improve performance, but only re-rendering the ReactJS application when the underlying data has changed. This relies on principles of variable Immutability to detect change, and are enforced with the ReactJS shouldComponentUpdate function.

  • Diagram portraying the data flow between components in a front end web application. Actions are Disaptched to the Store, which replicates to the Views, which the user interacts with to trigger new Actions, this starting the cycle again.
    • Data Structures
    • Immutability
    • ImmutableJS
    • JavaScript

    - Covers the basic concept of variable Immutability in JavaScript, as well as come use-cases and popular libraries that are used to aid in development. Includes examples of direct variable manipulation versus updates made with variable Immutability in mind, used to illustrate the differences between these two methodologies.

  • A diagram of the standard Flux Dataflow, with the View component expanded with more detail. Stores will hook into the componentDidUpdate lifecycle function, which is used to update third party libraries with new data from the store. Event handlers in Third Party Libraries can be set to trigger Flux Actions, and pass data from the library back into the Flux data flow.
    • Flux
    • GIS
    • JavaScript
    • OpenLayers
    • React

    - How to integrate React with OpenLayers, and use the Flux data flow pattern to update the OpenLayers Map based on Actions/Events triggered by the React Application (and vice versa).