Forem: Adam Romig 🇵🇭

Same Company, New Job, Finally a Developer

Adam Romig 🇵🇭 — Tue, 15 Feb 2022 15:36:00 +0000

After so many years with development being a secondary role in my job and so many rejections later, I have finally landed a position as a full-time developer.

Applying for the Job

At the beginning of last August, my manager forwarded to our team an email regarding a job posting for a different department that had an opening (with the usual courtesies of forwarding it to anyone we know who may be interested). While looking at that, I saw a different posting for a Software Engineer I job for another team. Seeing that the listing had been up for a few weeks had me wondering if I was already too late to apply.

I decided to just go for it. Why not, right? I polished my resume and wrote a quick cover letter, submitting the application later that evening. I also wrote an email directly to the listed hiring manager (who happens to be our business unit's VP) to prevent issues with the Workday process and assigned recruiters delaying my application being seen. Probably not the best idea but I was pretty honest in my email. I told her that I may not look like a perfect fit; however, I recalled to her what she had said in our last town hall meeting about giving our internal candidates a chance and that we can always learn what we don't know. Crossed my fingers and clicked Send.

The Interviews

That was a Thursday and I received an out-of-office reply stating she would be out Friday as well. Monday morning I received a reply from her thanking me for reaching out and that the acting manager will be contacting me to discuss the position. I had my first interview with him and a meeting with a panel of the team within the same week.

Usually I don't do well in interviews. I get nervous, blank out on questions, and find myself unable to find the right words. But this time was different. The meetings felt more like quick chats without the unnerving question/answer format. It did help that I already knew everyone at the interviews, either from providing a desktop support service or working with them on a past project. Having that already built-in connection really helped. I was able to talk freely and answer questions without a stutter or blanking out. My recent coding projects and my past experiences integrating our asset management app stood out for me.

A week later I had a meeting lined up with the newly announced manager of the team. In this meeting I learned that they were offering me the position. And obviously I accepted! I would be working primarily with the ServiceNow platform which involves a combination of no-code/low-code interfaces and JavaScript. My official start date was August 30.

The Transition and Onboarding

I had a 4 week transition period where I incrementally did less of my old work (while cross-training someone on my former duties) and actively learned more of the new job. Within that time and a couple extra weeks, I read through onboarding documentation, governance policies, and completed most of the available 'New to ServiceNow' developer courses. Tons of learning hours, not including the first portion of a Information Security course our business unit would like everyone to complete before the end of the year (which I did as well).

Overall onboarding was a good experience. I have understanding and patient teammates willing to answer any questions I have or show me how to do something that I hadn't done before. I am working entirely remote so I brought home everything else I had left at my old office which are currently still mostly boxed up in storage. I also upgraded my desk situation so I'm no longer half-assing a home-office setup.

My First Few Months

The beginning of my newbie period ran through the end of the year. I was given a couple of modification requests at a time a few weeks in so I could put into practice what I've learned and getting the processes down. Also daily stand-ups and monthly retrospectives were a change to get used to.

While I had primarily used ServiceNow as an ITIL user, there was so much to learn about being a developer within the platform. I didn't realize there were so many different ways to approach user interactions and controlling workflows. Figuring out which way was a better practice for certain situations would be key.

Another thing to get used to is that ServiceNow still uses ECMAScript 2009 (ES5) instead of the modern ECMAScript 2015 (ES6). This meant only using var to declare variables, not using the arrow function format, no spread operator, no destructuring, no template literal strings, etc... Sometimes I would need to look up how to code something (that I usually did in ES6) in the ES5 format.

So far I've put my work hours into walking through learning courses, solutioning problems, designing workflows, writing client scripts & APIs, manual testing for platform upgrades, and some administrative upkeep as well.

So far, so good

It's been a fairly pleasant ride these past 5 months. Not that I didn't like my job in desktop support, but it's not what I had planned on doing for the long term. Especially since the pandemic started, my duties became largely repetitious and burned me out quickly.

Now I'm enjoying a type of job that I've been wanting for a long time. Sure there are some things that cause me frustration but any job can do that now and again. The important thing is that I'm using more of my programming & problem-solving skills daily as well as feeling good about what I'm doing and, in turn, that will show through in the work I do for my team.

New Site: Wayne Music Club

Adam Romig 🇵🇭 — Wed, 31 Mar 2021 15:47:11 +0000

(originally posted on my blog June 2020)

Background

I'm a marching band dad. I have supported and volunteered with the Wayne Music Club (the organization that supports our high school band programs) for the past 6 years. And over the years I have seen their web site get a bit better with each iteration but it still wasn't what I thought it could be. At first it was built with tables, not updated much at all, and definitely not responsive to different devices. Then a couple of years ago, it was redesigned as a WordPress blog which was better in most aspects I'll admit. But it rubbed me wrong on how much it looked hurried and disorganized.

The music club's executive board is filled with volunteers who are elected each year, and this past fall I decided to run for the Drumbeat [newsletter] Editor & Webmaster position. I haven't seen that word used as an official role in a while but I would have to manage the site, hosting, and content so it seems traditionally fitting.

My main reason for running for the board position was to make information easy to find. If there was one thing I noticed in our group's Facebook posts, it was that people had some difficulty finding answers to a lot of common questions. And the answers to these could be found in a number of places; however, finding those places was a bit of a pain to accomplish without having a lot bookmarks to everything.

I got the position and in February [2020] I started planning how to go about the site makeover. I decided to keep its WordPress backend and use the WordPress REST API to my advantage. We could keep using WordPress's easy to use editors, plugins, and controls while I got to create exactly the site I wanted to make for them. Creating a minimal WordPress theme with no CSS, I set for WordPress to be used as a headless CMS with a JavaScript front-end.

Web Technologies Used

Vue & Vue CLI for the javascript framework & router
Styling with Sass, CSS Grid, & Tailwind CSS
WordPress REST API for accessing data & content
Axios for REST connectivity
WordPress Plugins
- Advanced Custom Fields to create extra fields in posts
- ACF to REST API to expose custom fields to the WP REST API
- Custom Post Type UI to manage different post types such as videos & events
- Envira Gallery for organizing photos into separate galleries

What I Learned

Querying with WP REST API, Axios, & Async/Await

This project gave me lot more practice with promises especially in the form of async / await. There are multiple versions of similiar functions I wrote in wp-api.js that return objects (or arrays of them) and though I could have copy/pasted (and changed where different), I made it a point to type it all out each time for sake of practice and ingraining it into memory.

Building with Single File Components

I love working with Vue for its developer experience. Using its single file component structure not only gives me reusable pieces of code that I don't need to duplicate but also helps me visualize how the pages (and parent components) will come together.

This was also a great exercise in sending/receiving props and keeping the overall file structure organized.

Using an Event Bus

There were a couple of situations where I needed different components communicating with each other in an event listener fashion.

On the home page, the background behind the main logo needed to switch between a rotating background image queue and a video background via a toggle button located in the navigation bar.
On the events page, the calendar component needed to highlight dates that had events scheduled on them (as well as today's date) and also make those dates clickable to scroll to the event clicked in the list on the page.

An event bus came in handy here, creating a bridge between two components without a lot of code. In my main src directory I had a 2 line Javascript called event-bus.js:

import Vue from "vue";
export const EventBus = new Vue();

Yup, that's it. In each component/view that I needed to use it I had to import it, of course. i.e. import { EventBus } from "@/event-bus";

And within the method that I'm using the trigger the event, I send my event and its corresponding value out into the ether.

EventBus.$emit("event-name", value);

On the receiving component's end, I set an event listener like this:

EventBus.$on("event-name", (value) => {
  this.localvariable = value;
});

This simple implementation was all I needed to sort out those two issues where props couldn't help me.

Using the Browser to Save Preferences

With the home page background toggle (images vs video), I wanted that choice to persist when the visitor returned to the page. In the past, I've dealt mostly with cookies but this time it seemed that there could be a better solution. Using the browser's built-in local storage sounded like a great way to achieve this, so I learned how to get & set values using this method and now it remembers this preference for the next visit.

CSS Grid

I've used CSS Grid before to create dynamic layouts dependent on viewport size like on my cakes site and I loved the results as well as coding it. I got a lot more practice with it on a few sections of this site such as the calendar component and the photo & video pages. I kept the layouts simple for the most part except for the photo pages. There I wanted to create something more interesting with thumbnails are shown are different shapes and sizes.

Reception

I received an overwhelming positive response to the new web site design & features when I presented it to the rest of the executive board. I acted on feedback regarding a few minor tweaks and a mobile browser issue but nothing too major was needed. Within a month from the start of my project, I announced the new launch of the web site at the beginning of March to our club members.

I had a lot of fun with the overall design of the site. Between playing with Tailwind CSS, Sass, SVGs, and CSS Grid, I had hoped I created a fun and fresh new site for our organization and everyone would enjoy using it.

Web Site URL: wayneband.com

Github Repository

Automating Active Directory Tasks with PowerShell

Adam Romig 🇵🇭 — Wed, 31 Mar 2021 14:56:43 +0000

The Problem

For the last few months of 2019, I was working on an integration project where we were migrating an acquired company onto our infrastructure. Our team's role concentrated on either replacing outdated computers or applying a fresh operating system image onto the rest. One of the tasks in our configuration process is to create a computer account for the machine in Active Directory, while adding it to the correct policy groups and getting permissions set.

Doing this for one, two, or even a small group of machines is not really a big deal. I can motion through the series of clicks and typing without having to think about it. No problem. However when we have big orders like this, it can be exhausting to do this sort of preparation work. If there's anything I dislike, it's monotony & repetition. And I was looking at around 200 computer accounts that would need to be created for this project. 😓

What's a programmer to do? Automate it, of course!

What I needed

I started by writing down what I needed this script to do — the essential functions to mimic our manual process.

Gather parameters such as target computer name, description, and OU container path.
Create the computer account in the given path.
Set a group account to be able to join the created computer to our network domain.
Add the created computer to certain policy groups.

The Solution

Since the tasks that I needed automated were contained within Active Directory, I chose to write the script in PowerShell as it has a module available for it, as long as the Active Directory domain tools are installed which was no problem for any of us on the team.

Getting the basics sorted out

The first part of the script is the New-ADComputer cmdlet, which creates a new Active Directory computer object.

param ($computername, $description, $ou)
New-ADComputer -Name $computername -Path $ou -Description $description -Enabled $true

Then I needed to be able to add the computer account to certain policy groups. The Add-ADGroupMember cmdlet can take care of this, along with the Get-ADComputer cmdlet for supplying the -Members parameter.

$computeraccount = Get-ADComputer $computername
Add-ADGroupMember -Identity $policy -Members $computeraccount

Setting a "join the domain" group to the computer account wasn't as straight forward as the policy groups. Changing the group for this works by granting a specific set of permissions onto the computer object. This blog post helped me understand what permissions needed to be set and how to implement this.

Function SetJoinDomainGroup()

Function SetJoinDomainGroup {
    param ($computer, $group)

    $done = $false

    Write-Host "Waiting for Computer Account to be available" -NoNewline
    do {
        Start-Sleep -Milliseconds 500
        Write-Host "." -NoNewline

        try {
            $groupSID = (Get-ADGroup $group).sid
            $computerDN = (Get-ADComputer $computer -ErrorAction SilentlyContinue).distinguishedname
            $computerACL = Get-ACL "AD:$computerDN" -ErrorAction SilentlyContinue

            $rule1 = New-Object System.DirectoryServices.ActiveDirectoryAccessRule($groupSID, 'DeleteTree, ExtendedRight, Delete, GenericRead', 'Allow', [GUID]'00000000-0000-0000-0000-000000000000')
            $rule2 = New-Object System.DirectoryServices.ActiveDirectoryAccessRule ($groupSID,'WriteProperty', 'Allow', [GUID]'4c164200-20c0-11d0-a768-00aa006e0529')
            $rule3 = New-Object System.DirectoryServices.ActiveDirectoryAccessRule ($groupSID, 'Self', 'Allow', [GUID]'f3a64788-5306-11d1-a9c5-0000f80367c1')
            $rule4 = New-Object System.DirectoryServices.ActiveDirectoryAccessRule ($groupSID, 'Self', 'Allow', [GUID]'72e39547-7b18-11d1-adef-00c04fd8d5cd')
            $rule5 = New-Object System.DirectoryServices.ActiveDirectoryAccessRule ($groupSID,'WriteProperty', 'Allow', [GUID]'3e0abfd0-126a-11d0-a060-00aa006c33ed')
            $rule6 = New-Object System.DirectoryServices.ActiveDirectoryAccessRule ($groupSID,'WriteProperty', 'Allow', [GUID]'bf967953-0de6-11d0-a285-00aa003049e2')
            $rule7 = New-Object System.DirectoryServices.ActiveDirectoryAccessRule ($groupSID,'Extendedright', 'Allow', [GUID]'5f202010-79a5-11d0-9020-00c04fc2d4cf')
            $rule8 = New-Object System.DirectoryServices.ActiveDirectoryAccessRule ($groupSID,'WriteProperty', 'Allow', [GUID]'bf967953-0de6-11d0-a285-00aa003049e2')

            $computerACL.AddAccessRule($rule1)
            $computerACL.AddAccessRule($rule2)
            $computerACL.AddAccessRule($rule3)
            $computerACL.AddAccessRule($rule4)
            $computerACL.AddAccessRule($rule5)
            $computerACL.AddAccessRule($rule6)
            $computerACL.AddAccessRule($rule7)
            $computerACL.AddAccessRule($rule8)

            $computerACL | Set-ACL "AD:$computerDN"

            $done = $true

            Write-Host ""
            Write-Host "   + Permissions set for $group" -ForegroundColor Green
        } catch {
            Write-Host " ! There was a problem setting permissions for $group"
            Write-Host $_
        }
    } until ($done)
}

I could then call this function as:

SetJoinDomainGroup -Computer $computername -Group $defaultJoinGroup

So far so good — I had a basic script written! 😄 Next I implemented logic for error checking as well as taking in a CSV (comma separated value) file, looping through the list to create the accounts in batch.

Making it user-friendly

It wasn't going to be just me using this script. While I don't mind editing a text file and then running things from the command line, I was sure others would find it inconvenient. I wanted to make a GUI version but what could it look like? I attempted to draw something I could reference when I was coding it up. It's nice to have a visual.

Yeah...You get the idea, right?

Then I looked up how to get started coding a GUI for PowerShell scripts. This post at LazyAdmin helped a lot in understanding how it goes together, while POSHGUI allowed me to quickly wireframe a design and provide me with code (like shown below) I could work off of and tweak.

Add-Type -AssemblyName System.Windows.Forms
[System.Windows.Forms.Application]::EnableVisualStyles()

$MainForm                        = New-Object system.Windows.Forms.Form
$MainForm.ClientSize             = '391,393'
$MainForm.text                   = "AD Computer Create"
$MainForm.TopMost                = $false
$MainForm.FormBorderStyle        = "Fixed3D"
$MainForm.MaximizeBox            = $false
$MainForm.ShowIcon               = $false

After an afternoon of playing around, I came up with this:

Changes to the location field and machine type radio buttons will automatically update the OU field with the proper path. A progress bar at the bottom of the interface fills up proportionately depending on how many accounts are being created and what step it's on. Feedback such as statuses and errors still log to the console window that opens when the app starts.

Making it customizable

I was planning on having this utility available for our team to use and possibly our IT teams in field offices. One configuration wouldn't work so well, especially if it's hard-coded into the app. So I added in functionality to read an XML-formatted config file so different users can have their own default settings.

Note: The formatting applies specifically to our internal usage and naming conventions. Most values have been redacted.

config.xml

<?xml version="1.0"?>
<ADComputerCreate>
  <!--
      Computer Naming Convention: <MachinePrefix><LocationCode><MachineType>-<ID>
      Example: CMPDAYL-7001234
  -->
  <MachinePrefix>CMP</MachinePrefix>
  <LocationCode>DAY</LocationCode>
  <!--
      OU defined as:
      OU=<LocationCode>,OU=<Region>,<Laptops|Desktops>,OU=<Container>,<Realm>

      Example: OU=DAY,OU=Americas,OU=Laptops,OU=Workstations,DC=domain,DC=forest,DC=tld
  -->
  <AD>
    <Realm>DC=domain,DC=forest,DC=tld</Realm>
    <Region>Americas</Region>
    <Container>Workstations</Container>
    <JoinDomainGroup>Client Installers</JoinDomainGroup>
  </AD>
  <!--
      Newly created computer accounts can be added to defined group policies
  -->
  <Laptops>
    <Policies>
      <Policy>Certificate Enabled Workstations</Policy>
      <Policy>MBAM BitLocker Encrypt</Policy>
    </Policies>
    <Attributes>
    </Attributes>
  </Laptops>
  <Desktops>
    <Policies>
    </Policies>
    <Attributes>
    </Attributes>
  </Desktops>
  <Macs>
    <Policies>
      <Policy>Certificate Enabled Workstations</Policy>
    </Policies>
    <Attributes>
      <!-- Value will be pulled from OU realm -->
      <!-- Example: cmpdayl-7001234.domain.forest.tld -->
      <Attribute>dnsHostName</Attribute>
    </Attributes>
  </Macs>
</ADComputerCreate>

The Results

As mentioned before, we were looking at needing around 200 computer accounts created. On average this task per account could take from 30 seconds to a minute depending on how fast you are with a mouse and keyboard as well as keeping an eye on which asset tag & user name you were currently on.

Instead I was able to export a spreadsheet to a CSV file and open that file directly into the app. So just for this project, we saved somewhere in the ballpark of 1.5 to 3 hours of labor — not to mention time saved from correcting any mistakes that could happen during manual entry. Having this app available helped make this project run a bit more smoothly and it will definitely be used in our everyday work.

Though the production code for this script is not available, I have published a public version (with redacted/generic values) onto a GitHub repository. I will possibly edit it in the future to allow for a more generic naming convention when creating in batch (or use literal values from the imported CSV).

Internet Flashback: The Silicon Valley Outsider

Adam Romig 🇵🇭 — Sat, 05 Oct 2019 23:37:54 +0000

Flash back to 1999, location: Silicon Valley. The Bay Area during the dot-com bubble was very different than it is today. It seemed everyone out there had a new start-up idea, venture capital funding, and dreams of striking it rich. It's where the cool kids were going to become someone in the tech industry. At least that's what it seemed to a friend and co-worker of mine, David Orth, who watched most of his friends abandon Ohio for the promises of gold in them darn hills. 💰

There indeed was money to be made out there which didn't help David try to convince many of his pals to finish up college here in the Buckeye State before running off on an adventure. There was a bit of jealousy that turned him a little sour towards the Valley. It was, of course, taking his friends away from his quaint midwestern life. 🐄

"In the past five years, I've probably had seven out of eight of my local friends move out to the Bay Area. It's killing me."

— David Orth

Not to be totally taken down about it, David decided to put that frustration into a more creative outlet. In the fall of 1999, he asked me to help him with a project. Certainly! What are friends for? During lunch breaks for a couple of weeks, we frankensteined a couple of old computers and got them ready to be online. I got Linux installed on one and the other was an old SPARCstation running SunOS. I spent some time getting the machines talking to each other on the network, configured Apache, ensuring firewalls were in place, and opening the right ports. 🖧

From a 2 bedroom apartment connected to the outside world on a mostly-stable blazingly fast 56K modem connection, he was ready to publish his first issue of the Silicon Valley Outsider - a web site that did no more than poke fun at the Bay Area. David wrote all of the articles weekly, usually parodying the Valley's obsession with money, the endless hype of new game-changing technology, Y2K, and businesses touting "web-based solutions." With a cow-spotted logo up on top and a lot of sarcasm & envy, David was ready to let it all out.

A month later, Mike Cassidy, a columnist at SiliconValley.com (now Mercury News), interviewed David and wrote an article about the site. Being one who chronicles Silicon Valley's unique and sometimes flabbergasting culture, Mike could see the humor in David's exaggerated prodding towards the Valley.

Week after week, short snippy articles were sent up to the web. Every week, a small part of the internet was amused. It was all very short-lived though - 11 issues in all. David ended up moving out to Sunnyvale four months after launch and worked at a couple of start-ups before the dot-com bubble burst. He's still out there and doing fairly well in the tech industry still. Mike did write a follow-up article on David's change of scenery and if he feels different about the Bay Area now that he's a part of it. 🤷‍♂️

"If you can't beat them, join them, I guess. I can either stay in Ohio and mock them for making millions and millions of dollars or I can move out."

— David Orth

Thanks to David's work (probably) at Beenz.com and their crazy internet currency, we had a very merry Christmas in 2000.

It was a good albeit very short run and I do miss seeing David around ever since he traded the Miami Valley for Silicon Valley. Something the other day just reminded me of him, the web site, and the fun we had setting everything up. It was just coincidence that its 20th anniversary was coming up. Take a browse through its back issues and breathe in one man's take on Silicon Valley's culture at the turn of the century.

JS&Friends Conf: DevOps+IoT+Security - Diana Rodriguez

Adam Romig 🇵🇭 — Sun, 18 Aug 2019 01:59:12 +0000

DevOps+IoT+Security - Diana Rodriguez

Diana delivered a very insightful talk about the link between DevOps, IoT (Internet of Things), and security. It comes down to collaboration and feedback.

DevOps is about collaboration between development and operations. Diana gave us this passage from the Vue.js docs regarding the effects of DevOps:

The adoption of DevOps culture, tools and agile engineering practices has, among other things, the nice effect of increasing the collaboration between the roles of development and operations. One of the main problems of the past (but also today in some realities) is that the dev team tended to be uninterested in the operation and maintenance of a system once it was handed over to the ops team, while the latter tended to be not really aware of the system’s business goals and, therefore, reluctant in satisfying the operational needs of the system (also referred to as “whims of developers”).

— Vue.js Docs

What this means is that DevOps works to bring solutions together for the benefit of the development and operations teams. For example, they may suggest using containers (like Docker) to limit the differences between the environment of a developer's laptop and the production server.

She explained that efficient DevOps will also provide faster feedback which bring about quicker & better enhancement/repairs as well as insight around performance and usage. With IoT, feedback regarding device performance and usage is analyzed and used to tune the product's quality for everyone's benefit.

The part of Diana's talk regarding security was eye-opening.

Liquid error: internal

There is a huge lack of faith in the security of IoT devices by not only customers but developers too.

Of those surveyed:

52% believe that most IoT devices on the market right now DO NOT have the necessary security in place

49% don’t trust having their personal/private data tied to IoT devices – but still use them

Only 18% trust having their personal data tied to IoT devices

Nearly 35% claimed that the breaches of major companies have not had much of an effect on the trust or consumer interest in these brands

85% of developers surveyed have felt rushed to get an application to market due to demand/pressure in the last 6 months

90% of developers surveyed do not believe that IoT devices on the market currently have the necessary security in place

Not only IoT devices for smart homes are potentially security-light but wearables as well. Peoples' biometric data is out there in the cloud which can sound kind of scary. Imagine how you would feel in the case of a data breach. 😱 How much personal information and security are people willing to unknowingly give out in the name of convenience?

Why aren't more developers/companies focused more on security instead of delivering a product quickly? The answer is mostly about money unfortunately. Companies also deter from seeking outside consultation because people don't like being told what they're doing wrong.

Diana then gave suggestions on what to concentrate on for increased device security: secure update processes, authentication, encryption, & independent security assessments to name a few.

At the end there were a few questions to ask yourself regarding your own IoT usage.

What devices are we using?
What information do we share?
What information do we have access to?

It was a very interesting presentation focusing on collaboration, capturing valuable feedback, and being security-minded. There was so much information - one of the best talks that day.

← Back to main JS&Friends article

JS&Friends Conf: Creating HTML tags with Vue & Web Components - Joe Erickson

Adam Romig 🇵🇭 — Sun, 18 Aug 2019 01:58:45 +0000

Creating HTML tags with Vue & Web Components - Joe Erickson

Joe of Tech Elevator gave a talk about creating web components. Similar to a previous talk; however, Joe's spin on it involved creating the them using Vue.

Joe flashed us back to 1997:

Deep Blue beats Kasparov
Microsoft buys a stake in Apple, saving the company
Harry Potter and the Philosopher's Stone was published
All major browsers supported the <blink> tag

And he intended that day to bring it back, at least for right then. Joe went through the steps to scaffold the initial code with Vue CLI and write out the component itself (using a different method of creating the blink animation).

Creating the component

Using Vue's template syntax, the component can be written in separate blocks for markup, logic, and styling.

Blink.vue

<template>
  <span ref="blinkyText"><slot /></span>
</template>

<script>
  export default {
    name: "blink",
    props: {
      interval: {
        type: Number,
        default: 500
      }
    },
    mounted() {
      setInterval(() => {
        this.$refs.blinkyText.classList.toggle("onoff");
      }, this.interval);
    }
  };
</script>

<style>
  .onoff {
    visibility: hidden;
  }
</style>

Building the component

By default Vue CLI sets its scripts to build an application. The build script needs to be tweaked a little.

package.json

...
"scripts": {
  "serve": "vue-cli-service serve",
  "build": "vue-cli-service build --target wc --name my-blink 'src/components/Blink.vue'",
  "lint": "vue-cli-service lint"
},
...

Now npm run build can be executed and it will be created in the dist folder. Inserted the component into a page entails including the blink.js file as well as the Vue script - and don't forget the tag itself!

<meta charset="utf-8" />
<title>my-blink demo</title>
<script src="https://unpkg.com/vue"></script>
<script src="./my-blink.js"></script>

<my-blink interval="1000">Blink every second</my-blink>

Adam Romig 🐧 🇵🇭

@adam_romig

Learning some neat stuff with web components again. This time from ⁦@firstclown⁩. #jsfriendsconf

19:07 PM - 02 Aug 2019

0 5

Joe also gave us examples of real and useful components that he has made, how they can interact with each other, and how to build them all at once. And just because they were built with Vue doesn't mean they have to be used in a completely Vue-made app. They can be used in a plain HTML page as long as the Vue script is called.

While the discussion and concepts were similar to Martine's, knowing there is a different way to create a component that can be used freely in non-frameworked sites is great to know.

← Back to main JS&Friends article

JS&Friends Conf: Querying NoSQL with SQL - Matthew Groves

Adam Romig 🇵🇭 — Sun, 18 Aug 2019 01:58:10 +0000

Querying NoSQL with SQL - Matthew Groves

I had always wanted to read up more on NoSQL databases and how they differ from relational databases. I have worked with SQL for 14 years so the relational design & structure is strong in how I think of table schema.

Matthew explained the benefits of using NoSQL over SQL: scalability (spin up more servers or cluster them if needed), flexiblity (no strict schema needed), and performance. He noted that we don't have to totally abandon relational databases - they can coexist.

While relational databases link separate tables by foreign keys, the JSON document model (the format NoSQL uses) can place related data in the same document as the main record. These extra pieces might be array objects if it contains more than one instance of child data. Other documents for seperate concepts can be created and referenced by a key.

Once he explained the concepts behind NoSQL, he showed us that queries (very similar to SQL's) can be created to find data. This is called N1QL (pronounced nickel) which is a Couchbase-centric query language. Azure Cosmos has something similar as well. Other NoSQL platforms would need to use aggregate functions which, to me, don't look very readable at first glance.

SELECT field
FROM `bucket` /* buckets contain logical groups of data-items */
WHERE otherfield = somevalue
/* JOINs are possible too! */
JOIN `otherbucket` ON (bucket.id = META(otherbucket).id)
LIMIT number;

N1QL queries return JSON objects that we can parse in our native coding language.

If there's anything to take away from this talk, Matthew says it's these 3 things:

Pick the right application. Whether it's NoSQL or SQL, use what makes sense.
JSON data is modeled differently. The structure of a document may be very different than a table.
Query NoSQL data with SQL. So much easier to write.

← Back to main JS&Friends article

JS&Friends Conf: Test Them JavaScripts - Rob Tarr

Adam Romig 🇵🇭 — Sun, 18 Aug 2019 01:57:39 +0000

Test Them JavaScripts - Rob Tarr

Rob of Sparkbox started his discussion on testing with a few questions for us:

What does testing mean to your team?
How do you test?
How often do you test?

Some answers:

Piece of mind, consistency
Manually in browser, while developing (TDD), with testing libraries
Rarely, all the time, during CI, before pushing to repository

He continued with why we test our code. It does give us piece of mind & consistency as well as giving confidence in the code and ourselves & designing better software because of it. But where do we start - especially when web development has had a culture not testing for so long? For whatever reasons, it's hard, there's no time or it's just an afterthought.

Rob listed out a few testing frameworks: Mocha, Ava, Jest, & Jasmine; though he was going to concentrate on Mocha (with the Chai add-on) for this short session. He mentioned different runners to use to initiate the tests: Grunt, Gulp, Karma, Make, npm.

Establishing boundaries of what to test is a very important point so that time is not wasted testing things that were (probably) already tested. He called it the concept of mowing your own yard. Don't test libraries and APIs. Just test your code.

I believe there was supposed to be more to the talk and possibly examples of how to start writing the tests - where do I begin? But with only 50 minutes available, it may have been cut short of that. I am aware of my knowledge gap in automated testing and I will definitely educate myself more on it.

← Back to main JS&Friends article

JS&Friends Conf: Mastering Shadow DOM - Martine Dowden

Adam Romig 🇵🇭 — Sun, 18 Aug 2019 01:57:18 +0000

Mastering Shadow DOM - Martine Dowden

Martine showed us how to create web components using just HTML and vanilla JavaScript - that's right, no framework!

We learned what Web Components and Custom Elements are as well as how the Shadow DOM works to give us the ability for encapsulated reusable components. After reviewing basic DOM manipulation with JavaScript, she showed us how to create a web component using those techniques by bringing back the <blink> tag!

Defining our tag

JavaScript

// blink.js
const Blink = (function() {
  "use strict";

  class Component extends HTMLElement {
    constructor() {
      super();
      // Create shadow root
      const shadow = this.attachShadow({
        mode: "open"
      });

      // Wrap text content with a span tag
      const wrapper = document.createElement("span");

      // Make a slot for text
      const slot = document.createElement("slot");
      slot.setAttribute("name", "content");
      wrapper.appendChild(slot);

      // CSS animation styles
      const style = document.createElement("style");
      style.textContent = `
        @keyframes blink {
          0%   { visibility: hidden; }
          50%  { visibility: hidden; }
          100% { visibility: visible; }
        }
        /* :host selects shadow root host */
        :host { animation: 1s linear infinite blink; }
      `;

      // Append
      shadow.appendChild(wrapper);
      wrapper.appendChild(style);
    }
  }
  customElements.define("wc-blink", Component); // can't use <blink> - it's still reserved
})();

export { Blink };

Putting it to use

HTML

<script>
  import { Blink } from "./blink.js";
</script>

<!-- prettier-ignore -->
<wc-blink>
  <h1 slot="content">
    Look Ma, I'm blinking!
  </h1>
</wc-blink>

I learned a bunch in this session on how the Shadow DOM is used to make custom elements and the benefits & limitations of such. I walked away with an understanding that it is possible to create a component-based site/application without a framework if need be. Though certainly the additional features of a framework may outweigh the freedom of independence, it is good to know there are options.

← Back to main JS&Friends article

JS&Friends Conf: Pros & Cons of Vue vs React - Milu Franz

Adam Romig 🇵🇭 — Sun, 18 Aug 2019 01:56:38 +0000

Pros & Cons of Vue vs React - Milu Franz

Milu Franz of Mile Two gave a great presentation comparing the advantages and drawbacks of both Vue and React. I'm novicely versed in building with Vue but I was interested in how it compares to the more popular React library.

She showed that Vue is a progressive framework which includes official packages for state management and routing, whereas React is a library concentrating on UI development but has external third party packages for state management and routing. Also she explained the differences between Vue's template syntax, where it combines the markup, logic, and styling (as separate sections) in one single file component, and React's format, where markup is included inside the JavaScript code as JSX and styling is imported from an external .css file (unless using CSS-in-JS). Note that Vue components can also be modeled in the same fashion as React ones, if desired for more intricate customization, but the template syntax is a preferable method of designing most types of components.

Milu went over building the same To Do List project in both Vue & React, going over Vue's concepts of using interpolation in the markup (to insert JavaScript) and directives such as v-model for two-way data binding of state (that really can be described as magical). This is compared to React where explicit defining of state (through the useState hook) is required. The key differences are that Vue abstracts handling state so you only need to directly update a value (versus using a function to update it) and that Vue will only re-render what changed while React might re-render everything in that component's subtree structure.

Lifecycle method differences were explained as well as React's useEffect hook. Run-time performance was also compared with both being more performant depending on the use case. Milu even went over drawbacks to each: Vue with potential over-flexibility and lack of resources; and React with its steep learning curve, lack of native libraries, and difficulty in collaborating with designers (harder to translate to markup when JSX is required).

My take from the presentation was that React is still more popular - it's been out longer and there's something that captivates developers to write it all in JavaScript, but Vue is catching up in terms of maturity, performance, and use cases. Both are fully able to help developers create engaging applications. I'm more of a Vue fan, obviously, but I can see why developers are attracted to it for their projects. For me, though, I really like the template markup as I can more easily visualize the layout without all the JavaScript around it. I also don't mind that Vue handles the state so magically for me. Abstract it away and make the process easier.

I'm sure there are plenty of other technical differences and opinions that make one better than the other but I look at it like I do with other technologies: Use what you like and what works. And keep the solution simple.

← Back to main JS&Friends article

My First Dev Conference: JavaScript & Friends

Adam Romig 🇵🇭 — Sun, 18 Aug 2019 01:56:21 +0000

Earlier this month on Friday, August 2, I attended my first developer conference. I had been looking for more learning opportunities and when I heard that there was going to be a conference somewhat local to me, I thought it would be a good experience for me to take part in. I could learn from multiple speakers on a variety of topics within a day. With only an hour for each talk, I knew I wasn't going to walk away with fully knowing a new skill or two but possibly I could take away enough to motivate me to seek out more information about some of them.

So I decided to attend the first JavaScript and Friends conference in Columbus, Ohio. JS&Friends is a not-for-profit conference that uses its proceeds to help cultivate the local (and remote) developer community in education and inclusivity. The schedule was packed with a lot of interesting talks about everything JavaScript - it was hard to choose which sessions to attend.

Starting the morning

Early Friday morning came and I was on the road to the Quest Conference Center off the far side of the loop (I-270 around Columbus). Arriving a bit early, the organizers let me know to help myself to breakfast while they get the attendee badges sorted. Great job on that, by the way! 👍️ Props to the fruit selection. I got my badge shortly after and waited for the welcome message to everyone before going to my first session. I made some notes on the session sheet they gave me for a possible plan of where to go. I still wasn't 100% sure which ones I was going to but was narrowing it down.

Below are summaries of the sessions I did attend. To trim down overall length of this post, I'll divide out the sections into their own DEV post.

JS&Friends Conf: Pros & Cons of Vue vs React - Milu Franz

Adam Romig 🇵🇭 ・ Aug 18 '19

#javascript #conference #vue #react

JS&Friends Conf: Mastering Shadow DOM - Martine Dowden

Adam Romig 🇵🇭 ・ Aug 18 '19

#javascript #conference #shadowdom #webcomponents

JS&Friends Conf: Test Them JavaScripts - Rob Tarr

Adam Romig 🇵🇭 ・ Aug 18 '19

#javascript #conference #testing #mocha

Lunch Keynote - Guy Royse

During lunch, Guy gave a short informal talk on the linguistics of code, specifically how programming is mainly in English and how code routines would look if they were in another language, such as Spanish.

Not only changing the words but the sentence structure as well. He pointed out that our function calls also follow the English structure, i.e. noun.verb(object). He then showed us in detail how we could translate our a common FizzBuzz function into Latin

It was an amazing ride. I'd still like to see a framework coded in a Yoda-based structure (object(noun).verb ??).

JS&Friends Conf: Querying NoSQL with SQL - Matthew Groves

Adam Romig 🇵🇭 ・ Aug 18 '19

#javascript #conference #nosql #couchbase

JS&Friends Conf: Creating HTML tags with Vue & Web Components - Joe Erickson

Adam Romig 🇵🇭 ・ Aug 18 '19

#javascript #conference #shadowdom #webcomponents

JS&Friends Conf: DevOps+IoT+Security - Diana Rodriguez

Adam Romig 🇵🇭 ・ Aug 18 '19

#conference #devops #iot #security

Mentoring Panel & Closing

After the last session, JS&Friends hosted a panel of speakers who gave their insights and experiences on mentoring, answering questions from the rest of us. There were great questions and answers, unfortunately I cannot remember them in detail - I just know it was a good and helpful discussion. I was so focused on listening that I didn't take any notes.

In closing, my first developer conference was a very interesting experience and I am glad I was able to attend! I was able to hear a variety of topics discussed, networked a bit, learned a few things, and most importantly - I got out of my comfort zone of introversion, at least for a little bit. I hope to be at next year's JS&Friends Conference and any others that come along near me.

C# OOP: Generics

Adam Romig 🇵🇭 — Fri, 17 May 2019 16:32:13 +0000

Jump to:

What is a Generic?
- Defining a Generic
Generic Method
Generic Class
Constraints
Collections
Benefits

What is a Generic?

Generics in OOP allow us to define a specification of a class or method that can be used with any data type. When we design a generic, the data types of the method parameters or class isn't known - not until it is called or instantiated.

Defining a Generic

A generic class or method can be defined using angle brackets < > and an identifier. The standard identifier used for generics is a capital letter T i.e. <T> but any letter can be used - even a word. If it makes sense to use an identifier other than T, feel free. It's not a rule, just a guideline that most programmers follow.

public static void Method<T>(T param1) { }

We can also use multiple generic types if needed, typically the second one is denoted as <U>.

public static void Method<T, U>(T param1, U param2) { }

Generic Method

See the below example of an overloaded method that swaps two integers or strings values via reference.

using System;

public class Maths {

  public static void Swap(ref int a, ref int b) {
    int temp = a;
    a = b;
    b = temp;
  }

  public static void Swap(ref string a, ref string b) {
    string temp = a;
    a = b;
    b = temp;
  }
}

public class Program {
  public static void Main() {
    int twenty = 20;
    int thirty = 30;
    string forty = "forty";
    string fifty = "fifty";

    Maths.Swap(ref twenty, ref thirty);
    Console.WriteLine("twenty = {0}", twenty);
    Console.WriteLine("thirty = {0}", thirty);

    Maths.Swap(ref forty, ref fifty);
    Console.WriteLine("forty = {0}", forty);
    Console.WriteLine("fifty = {0}", fifty);

  }
}

Output:

twenty = 30
thirty = 20
forty = fifty
fifty = forty

→ dotnetfiddle

Works like a charm, of course. But what if we added another overload for floats? And another for booleans. And another for class objects. This overloaded method is getting big. Now what if we needed to make a fundamental change to all of the overloads? Wouldn't it be nicer and easier to just have one method to rule them all?

using System;

public class Maths {

  public static void Swap<T>(ref T a, ref T b) {
    T temp = a;
    a = b;
    b = temp;
  }
}

public class Program {
  public static void Main() {
    int twenty = 20;
    int thirty = 30;
    string forty = "forty";
    string fifty = "fifty";

    Maths.Swap<int>(ref twenty, ref thirty);
    Console.WriteLine("twenty = {0}", twenty);
    Console.WriteLine("thirty = {0}", thirty);

    Maths.Swap<string>(ref forty, ref fifty);
    Console.WriteLine("forty = {0}", forty);
    Console.WriteLine("fifty = {0}", fifty);

  }
}

Output:

twenty = 30
thirty = 20
forty = fifty
fifty = forty

→ dotnetfiddle

Instead of two separate overloaded methods, we can trim it down to just one. The major difference is the <T> right after the method name and replacing the data type for the parameters and temp variable with T as well.

When we call the method from the Main program, we can specify the data type for T. In the first part, we're passing integers so the method is called as Swap<int>(...) instead of just Swap(...). In the second part, we do the same thing but since we're passing strings, the method is called as Swap<string>(...).

Although, we can actually omit specifying the type when calling the generic method because the compiler will infer the data type from the arguments being passed.

// This works too!
Maths.Swap(ref twenty, ref thirty);
Maths.Swap(ref forty, ref fifty);

Generic Class

Classes can be generic along the same lines of thinking. A common use for a generic class is for defining collectios of items, where adding & removing are performed in the same way regardless of data type.

One common generic class is a collection called a stack, where items are pushed (added to the top of the stack) and popped (removed from the top of the stack). This is referred to as LIFO (Last In, First Out) since the item that is removed on a pop operation is teh last one that was recently added.

LIFO Example, credit Wikipedia

While the below example is not the Stack<> class exactly (as defined in the .Net Framework), it should show what we're talking about in regards to a use of a generic class.

using System;

public class Stack<T> {
  readonly int max_size;
  int index = 0;
  public int size { get; set; }
  T[] items = null;

  public Stack() : this(100) { } // default max_size of 100

  public Stack(int size) {
    max_size = size;
    items = new T[max_size];
  }

  // Push - Adds item to the top of the stack
  public void Push(T item) {
    if (size >= max_size)
      throw new StackOverflowException();

    items[index++] = item; // adds item in next spot
    size++; // increments actual size
  }

  // Pop - returns item from top and then removes it from the stack
  public T Pop() {
    if (size <= 0)
      throw new InvalidOperationException("Stack is empty, cannot Pop");

    return items[--index]; // decrements by 1 and returns value at index
  }

  // Peek - returns the last item in the listt
  public T Peek() {
    return items[index - 1];
  }

  // Get - returns the value of the specified index
  public T Get(int idx) {
    return items[idx];
  }
}

public class Program
{
  public static void Main() {
    Stack<string> StarWars = new Stack<string>();
    StarWars.Push("The Phantom Menace");
    StarWars.Push("Attack of the Clones");
    StarWars.Push("Revenge of the Sith");
    StarWars.Push("Rogue One");
    StarWars.Push("Solo");
    StarWars.Push("A New Hope");
    StarWars.Push("The Empire Strikes Back");
    StarWars.Push("Return of the Jedi");
    StarWars.Push("The Force Awakens");
    StarWars.Push("The Last Jedi");
    StarWars.Push("The Rise of Skywalker");

    Console.WriteLine("Size of Stack: {0}", StarWars.size);
    Console.WriteLine(StarWars.Peek()); // The Rise of Skywalker
    Console.WriteLine(StarWars.Pop());  // The Rise of Skywalker
    Console.WriteLine(StarWars.Pop());  // The Last Jedi
    Console.WriteLine(StarWars.Peek()); // The Force Awakens
    Console.WriteLine(StarWars.Get(5)); // A New Hope
    Console.WriteLine("Size of Stack: {0}", StarWars.size);
  }
}

Output:

Size of Stack: 11
The Rise of Skywalker
The Rise of Skywalker
The Last Jedi
The Force Awakens
A New Hope
Size of Stack: 9

→ dotnetfiddle

Remember the Coords struct?

struct Coords {
  public int x;
  public int y;

  // constructor
  public Coords(int p1, int p2) {
    x = p1;
    y = p2;
  }
}

Use a Generic struct (yes, structs too!) instead and it's no longer limited to integers.

using System;

struct Coords<T> {
  public T X;
  public T Y;
}

public class Program
{
  public static void Main()
  {
    Coords<int> intCoords;
    intCoords.X = 1;
    intCoords.Y = 2;
    Console.WriteLine("intCoords = {0}, {1}", intCoords.X, intCoords.Y);

    Coords<float> floatCoords;
    floatCoords.X = 1.23f;
    floatCoords.Y = 4.56f;
    Console.WriteLine("floatCoords = {0}, {1}", floatCoords.X, floatCoords.Y);

    Coords<string> stringCoords;
    stringCoords.X = "Over there";
    stringCoords.Y = "A bit closer";
    Console.WriteLine("stringCoords = {0}, {1}", stringCoords.X, stringCoords.Y);
  }
}

Output:

intCoords = 1, 2
floatCoords = 1.23, 4.56
stringCoords = Over there, A bit closer

→ dotnetfiddle

Constraints

We can also place a restriction on a generic to only accept a certain type, such as a struct, class or specific class/interface.

A constraint is implemented on a generic by using the where keyword followed by the generic type variable (e.g. T), a colon, and the constraint type.

There are 6 types of constraints:


where T : struct	→	Type argument must be a value type
where T : class	→	Type argument must be a reference type
where T : new()	→	Type argument must have a public parameterless constructor
where T :	→	Type argument must inherit from class
where T :	→	Type argument must implement from interface
where T : U	→	There are two type arguments T and U. T must be inheritted from U.

Maybe the above example with the Coords struct doesn't make sense for its X & Y values to be strings. Let's add a constraint to it.

struct Coords<T> where T : struct {
  public T X;
  public T Y;
}

Neat! But why are we constraining with a struct? The table above shows that using a struct constraint will restrict the type argument to value types. Since strings are reference types, this should allow this struct to not accept a string. It will; however, accept a single character though. Unfortunately a generic cannot be constrained to individual data types but this is close enough to demonstrate a constraint.

using System;

struct Coords<T> where T : struct {
  public T X;
  public T Y;
}

public class Program
{
  public static void Main()
  {
    Coords<int> intCoords;
    intCoords.X = 1;
    intCoords.Y = 2;
    Console.WriteLine("intCoords = {0}, {1}", intCoords.X, intCoords.Y);

    Coords<float> floatCoords;
    floatCoords.X = 1.23f;
    floatCoords.Y = 4.56f;
    Console.WriteLine("floatCoords = {0}, {1}", floatCoords.X, floatCoords.Y);

    Coords<string> stringCoords;
    stringCoords.X = "Over there";
    stringCoords.Y = "A bit closer";
    Console.WriteLine("stringCoords = {0}, {1}", stringCoords.X, stringCoords.Y);
  }
}

→ dotnetfiddle

This would result in an error on the line instantiating stringCoords.

Compilation error (line 22, col 12): The type 'string' must be a non-nullable value type in order to use it as parameter 'T' in the generic type or method 'Coords<T>'

Collections

As mentioned above, there are collections of generic classes like Stack<>. Another common one is List<>.

List<>		Function
.Add()	→	Adds an item at the end of the list
.Clear()	→	Removes all items from the list
.Contains()	→	Checks for an item; returns a boolean
.Count	→	Returns the number of items in the list
.Insert()	→	Adds an item at a specified index

Below is a small example of using the List<> collection.

using System;
using System.Collections.Generic;

public class Program
{
  public static void Main()
  {
  List<string> colors = new List<string>();
  colors.Add("Red");
  colors.Add("Green");
  colors.Add("Blue");
  colors.Remove("Green");

  Console.WriteLine("# of Colors: {0}", colors.Count);
  foreach (var color in colors) {
    Console.WriteLine(color);
  }
  }
}

Output:

# of Colors: 2
Red
Blue

→ dotnetfiddle

.Net has other several built-in collection classes in the System.Collections.Generic namespace, such as Queues, LinkedLists, Dictionaries, etc. The types of collections available in this namespace is fairly diverse so if one of those will provide the functionality of your needs, use them! However if it will make sense to create your own generic collection, go right ahead.

Benefits

Reusability: A single generic type definition can be used for multiple purposes with the same code without any alterations. It's much easier to maintain one version of the method/class than multiple overloads.
Type Safety: Generic data types provide better type safety, especially when used with collections since we need to specify the type of objects that are passed to them. Type checking is done at complile time instead of run-time, allowing bugs to be caught before release.
Performance: Methods & classes utilizing generics provide better performance since they reduce the need for boxing/unboxing (conversion from value type to object and vice versa), and typecasting of the objects used. The actual code for data typed versions of a generic is done on demand instead of multiple typed versions that may not be used.

Awesome stuff!

Generics are a powerful feature of C# that allows us to create more versatile data structures and methods. Using generics can provide great abstraction and extensibility, allowing for code reuse, type-safety, and performance gains. Finding where to use them can take some practice and forethought as it may not be readily apparent. No problem though! Keep the concepts in mind for refactoring opportuntities at the least.