NodeOmega

I am currently available for new projects and employment opportunities.

I am also open to taking on workflow overflow that you may need help with, but not necessarily are looking to hire for a contract term or direct placement.

My specialties are:

• ASP.NET MVC
• C#
• HTML5
• CSS3/LESS/SCSS
• Microsoft Azure
• Angular
• AngularJS
• JavaScript
• TypeScript
• Node.JS
• jQuery
• SQL
• MySQL
• WordPress

I also have familiarity with:

• PHP (non-WordPress)
• Python
• Amazon AWS

For onsite work, I'm looking to stay in the northern Seattle area, including Eastside (Redmond/Bellevue/Kirkland), and Everett, and am also looking in the Bellingham WA area as well.

I will consider relocation to the Los Angeles CA or San Diego CA areas for the right opportunities.

I am very open to remote opportunities as well.

Contact me at my LinkedIn for details, rates, and questions. If making a connection request, please write a note or message with your details.

Something I was running into when I was programming something involving dynamic classes in the DOM using AngularJS's ngClass... The Font Awesome icon wasn't loading.

It was quite strange, as if I had the class declared on page load, it would show the icon.

As I delved deeper into this, and looked at the active page source in Chrome's developer tools, I noticed that instead of the DOM element with a class name, I was seeing SVG.

Well, guess what: In my efforts to asynchronize a few things, I had used the SVG & JS method of using their deferred script tag:

<script defer src="https://use.fontawesome.com/releases/v5.2.0/js/all.js" integrity="sha384-4oV5EgaV02iISL2ban6c/RmotsABqE4yZxZLcYMAdG7FAPsyHYAPpywE9PJo+Khy" crossorigin="anonymous"></script>

As you can see, this was not the best decision for my use-case.

Gotta use the Web Fonts/CSS method:

<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.2.0/css/all.css" integrity="sha384-hWVjflwFxL6sNzntih27bfxkr27PmbbK/iSvJ+a4+0owXq79v+lsFkW54bOGbiDQ" crossorigin="anonymous">

Note that 5.2.0 was their current version. Your mileage may vary.

So yeah, if you're going to do dynamic class adding or deletion to anything in your web project, and you want to use their CDN, best use the CSS version. Otherwise, you could wind up spending upwards of three hours wondering why the icon's not showing up and thinking AngularJS isn't rendering the class change or something.

(It was late and I was tired. Shuddup).

While doing yet another tweak to my portfolio, I decided to see if there was a native way in CSS to get a linear gradient on a border of an element. Inherently, no. Not really.

However... there is a way to mimic this effect in CSS3 for the top and bottom borders, through the magic of the ::before and ::after pseudoclasses.

For the purposes example, I'm going to put this in LESS as well, as that's how I did it. You can use pure CSS3 if you so desire, however.

In this example, we are using a <div> element with the class foo, and having it stretch across the screen with negative margins to get around the padding-left and padding-right inherent in Bootstrap's container-fluid class.

<div class="foo">
    <p>Here is some content</p>
    <p>Here is some more content.</p>
</div>

Now, let's set up the initial CSS for foo:

.foo {
    background: linear-gradient(darken(@white, 30%), darken(@white, 5%), darken(@white, 30%));
    margin-left: -15px;
    margin-right: -15px;
    padding: 0 25px;
}

But we don't have our borders... or linear-gradient top and bottom borders for that matter. Well, this is where the ::before and ::after pseudo-classes come in!

.foo::before {
    display: block;
    height: 2px;
    width: calc(~"100% + 50px");
    margin: 0 -25px 10px;
    background: linear-gradient(to left, lighten(@black, 5%), lighten(@black, 15%),lighten(@black, 60%),lighten(@black, 5%));
content: "";
}

.foo::after {
    display: block;
    height: 2px;
    width: calc(~"100% + 50px");
    margin: 10px -25px 0;
    background: linear-gradient(to left, lighten(@black, 5%), lighten(@black, 15%),lighten(@black, 60%),lighten(@black, 5%));
content:""
}

What happens is, before the <div>, the ::before is creating a block-level element with a height of 2px, a width of 100% plus the 50px to ensure our border will be long enough to compensate for the 25px padding, and setting margins for no top margin, side margins of -25px (to further compensate for the main <div>'s padding), and a 10px bottom margin to emulate what would have been a top padding of 10px on the main div. (Note: in LESS, you will need a tilde and to put the 100% + 50px in quotes, otherwise the LESS compiler will interpret it as 150%, and that tends to cause horizontal scrollbars to show up, which we don't want. Pure CSS3 if using a .css file will not require that.).

IMPORTANT: The content: ""; part is VERY important. Without that line in your ::before and ::after, the pseudo-gradient border will not render!

The ::after on the <div> is similar but uses the margin of 10px for the top (to simulate 10px bottom padding on the main <div>), -25px side margins as before, and no bottom margin.

The linear-gradient on the background for the ::before and ::after is where the magic happens. You can set this gradient to be what you want. In this case, I'm lightening a LESS class of @black, or hex color code #000000 (or #000 if you want the shorthand notation).

Below is the non-LESS CSS version of the above:

.foo {
  background: linear-gradient(#b3b3b3, #f2f2f2, #b3b3b3);
  margin-left: -15px;
  margin-right: -15px;
  padding: 0 25px;
}

.foo::before {
  display: block;
  height: 2px;
  width: calc(100% + 50px);
  margin: 0 -25px 10px;
  background: linear-gradient(to left, #0d0d0d, #262626, #999999, #0d0d0d);
content: "";
}

.foo::after {
  display: block;
  height: 2px;
  width: calc(100% + 50px);
  margin: 10px -25px 0;
  background: linear-gradient(to left, #0d0d0d, #262626, #999999, #0d0d0d);
content: "";
}

Feel free to copy it into your code and try it out. You may need to adjust width if you're not using Bootstrap, or not using container-fluid in your Bootstrap code (or if you've adjusted the margins and padding on those classes).

Not much to report on. Just gave the site another slight redesign. Decided the reflective header was too large so I opted for the current logo placement.

I've also redone the Portfolio again somewhat, and experimented somewhat more with some CSS3 techniques. It's actually pretty cool. I'll be making another entry later in the day to explain how to do a pseudo-gradient border (top and bottom only) in CSS3 for elements.

After a decent bit of work, I have uploaded a small sampling of a graphics portfolio to supplement my sites portfolio. I have also added a couple more sites to the sites portfolio to further flesh out previous work.

While I am capable of some graphical work, my primary focus remains in the field of web development, both front-end and back-end.

In a pinch, I can do Photoshop/Illustrator/Fireworks, and have touched InDesign a bit. Get me behind a Visual Studio setup though, and that's where I shine much brighter.

As promised, I have reopened my portfolio portion of my page. The graphics portfolio portion is still under reconstruction, and the sites section still needs more sites added back to it, but it's there.

To view what I have so far, click the Portfolio link on the top of the page (or in the menu if you're on mobile).

Also I've added a pop-up carousel for when a site's screenshot is clicked on the Sites Portfolio. The graphics portfolio will also have this feature. It was a little interesting to get this working within a Bootstrap modal window and referencing a Knockout viewmodel, but I got it done.

Now I'm taking a much-needed break before tackling more of this as my brain's turning into clay at the moment. Also more projects and portfolio entries to come, so stay tuned.

After much consideration, I have decided to relaunch nodeomega.com. There are many reasons for this:

1. The old design I had up with just the image links on the front looked alright... but in the end sucked for SEO.
2. I decided it was time for an overhaul.
3. The old portfolio needed an update, and why just update that when I can update the entire site?
4. Finally implementing this blog.
5. New and improved tag system.

I think that pretty much covers it. It's a long way from what I originally planned for NodeOmega (which was, and will still be in the future, a webcomic/graphic novel/animation (hopefully) media company).

In the meantime, it keeps my web design and development skills up to date, and showcases more of what I can do. Plus, hey... HTML5 man! This desperately needed a facelift.

I don't have a commenting system, so you'll just have to bear with me, or if you do have my contact info, drop me a line.

Now for a (very) late dinner. Fun Saturday night fooling with code, but this is up and operational!

(Portfolio link soon to be operational again. Stay tuned).