DEV Community: catrina

Your Own MySQLServer (From Linux VPS to Azure Deploy)

catrina — Wed, 23 Nov 2022 04:39:41 +0000

From VPS to Deployment on Azure

Last year, I posted how to include a .NET API into WordPress using a custom PHP plugin using a free MySqlServer database as a backend. It worked and works great – but admittedly, I slack on renewing my “free” credentials and the demo kept going down. This week, I finally had the time to set up my own MySql database server for roughly $15 a year. Yep, a year.

I’ve gathered the resources, from getting your own cheap Virtual Private Server and where, to the tutorials I used and the notes I took during setup, to deployment on Azure.

Getting a Cheap VPS

The holiday season is one of my favorite times to shop online for random hosting deals!! The past couple years, my fave to hunt for are “low-end vps” deals. Why? Well, it’s your own server to put any Linux distro you want on it, control and learn from, destroy, rebuild, and use it however you want. Whats not to love? Oh – right it’s cheap, and therefore a bit unstable. Some companies appear and disappear overnight, I wouldn’t consider your data absolutely not guaranteed to disappear overnight, etc. For side projects and learning purposes, though, it’s great!

I have used two now that have stayed very reliable the past couple of years:

RackNerd

RackNerd is already live with their Black Friday sales:

https://www.racknerd.com/BlackFriday/

A peek at the VPS control panel:

CloudCone

CloudCone has some competitions going on now, but also some great deals. The best so far I got with them is 2vCPU, 2GB RAM for 19.84 per year.

A peek at the VPS control panel:

Once you purchase one of their plans, the process is automated. Your account is created, server assigned and all the admin info emailed to you.

I chose the 1vCPU, 1GB RAM on RackNerd as “the default configuration is designed to permit a MySQL server to start on a virtual machine that has approximately 512MB of RAM”, but also my machine is built for side projects and fun. Nothing serious.

All setup? Choose your OS! For this, I chose Ubuntu 20.04.

Access Your New VPS

You access the console using SSH:

Open your choice of terminal/console and SSH:

ssh root@x.x.x.x -p 22

The IP will be included in the email you receive after purchase. Once you enter the SSH command up above, you’ll be asked for password (also in email).

The VPS should all be setup!

Sidenote: DNS

I got my very own domain for this (more like I have a lot that I bought and are unused…) and needed to configure how to use it.

I use Namecheap, and so I created my own custom nameservers.

Pay special attention to STEP 7. You must create your own A records after you create your own name servers. (IP of new VPS in the black out VPS area)

LAMP Stack

My very first websites used to be on a LAMP stack and the reason was easy: cheap. What is a lamp stack? Linux (OS), Apache (WebServer), MySql (Database), PhpMyAdmin (Database Management UI). If you didn’t know before, it all makes sense now, right? All the components you need for web dev!

These days, I prefer .NET but with it now being cross platform, it’s time to explore that stack again (yes, you still need to install php as it runs phpMyAdmin on this server).

I won’t create my own tutorial, there’s PLENTY of how to install a LAMP stack on your new VPS server, but here’s the one I used and my notes after I did the basic install on VPS:

https://www.digitalocean.com/community/tutorials/how-to-install-linux-apache-mysql-php-lamp-stack-on-ubuntu-20-04

Notes:

After my basic install of Ubuntu from VPS control panel, I did have to install ufw:

sudo apt install ufw
sudo ufw enable

and add don’t forget to allow SSH (you know, so you can get back in…so i heard…) :

sudo ufw allow ssh

then continue to allow “apache full” (from tutorial)

Let’s Encrypt SSL

After full install, I added SSL:

https://www.digitalocean.com/community/tutorials/how-to-secure-apache-with-let-s-encrypt-on-ubuntu-20-04

Pretty straight forward install and if you were able to view your Apache site in tutorial, it should all go well.

*Notes: *

Remember by default, Let’s Encrypt expires every 90 days, so pay special attention to email reminders and the commands in tutorial on how to renew.

phpMyAdmin

Coming to the end, oh, I have a special place in my heart for phpMyAdmin. You import/export sql files. You can run all the commands to your little hearts desire and test and try all you want – in your very own playground! This particular UI was very easy for me to get hands on with a database. If you’ve been afraid to mess with a database NOW is that time. It’s your server, your playground.

Let’s set it up.

https://www.digitalocean.com/community/tutorials/how-to-install-and-secure-phpmyadmin-on-ubuntu-20-04

Notes:

With default install (Ubuntu 20.04), I could not find: /etc/apache2/conf-available/phpmyadmin.conf in Step 3.

Fix:

https://askubuntu.com/questions/387062/how-to-solve-the-phpmyadmin-not-found-issue-after-upgrading-php-and-apache

sudo ln -s /etc/phpmyadmin/apache.conf /etc/apache2/conf-available/phpmyadmin.conf
sudo a2enconf phpmyadmin.conf
sudo systemctl restart apache2

From comments, I also did the following change in same file above:

soleraeus

…

You can go a step further to avoid script attacks by changing the route to phpmyadmin in /etc/apache2/conf-available/phpmyadmin.conf Just change at the beginning of the file “Alias /phpmyadmin /usr/share/phpmyadmin” by “Alias /yourcustomroute /usr/share/phpmyadmin” Makes it even harder to find and really does not tell attackers what is behind the access point if you use a good name.

.NET

You CAN use Entity Framework and you can continue on with all the tutorials and help. But some modifications I made:

Add the following package: MySql.EntityFrameworkCore

If you are deploying into Azure Portal, your connection string should look something like this:

string connString = System.Environment.GetEnvironmentVariable(“MYSQLCONNSTR_CustomName”);

An example of it used in DbContext:

public class MyAppContext : DbContext
{
protected override void OnConfiguring(DbContextOptionsBuilder optionsBuilder)
{
optionsBuilder.UseSqlServer(System.Environment.GetEnvironmentVariable("MYSQLCONNSTR_CustomName"));
}

Azure Portal

Ok, coming to end. When I first saw Azure Portal I was like this is like WHM on Boss Level? a CPanel Plus? If you’ve ever dealt with a LAMP stack and control panels, this .NET control.. “central?”. Larger than WHM as it holds much more than just web services. But that is not our concern right now. For resources,

Create Web App Service and every “service” requires a plan, so:

Pricing Plan:

Free F1

Shared infrastructure, 1 GB memory

Within Web AppService go to:

Configuration > Connection Strings

Specify name after _ (dash) and select MySQL from drop down, entering your connection string as value.

Final result:

Hit the Save button up top and done.

Still no MySql Access:

Edit mySql config:

Default configuration in MySQL only allows it to listen to localhost. To edit that config:

sudo nano /etc/mysql/mysql.conf.d/mysqld.cnf

comment out:

bind-address = 127.0.0.1

save, restart mysql:

sudo service mysql restart

Your Own MySQLServer

It should all be set up and ready to go!

The current demo here: https://www.catrina.codes/net-api-into-wordpress-front-end/ is running on it.

Let me know if your own MySqlServer on a LowEnd VPS Running!

Making Session Variables Work in .NET Core

catrina — Tue, 09 Apr 2019 01:51:55 +0000

As noted, I work with Legacy and often have to bring in variables from the API that must be sustained across session.. (and I’m sure there might be a better way, comment and advise!). Where I am at now, is I query the API, bring in the variables but how do I keep from calling these over and over: old solution was session variables so, that’s where I am at.

When I started to do this on Core, the most helpful article was this (and it’s in my comments): https://adamstorr.azurewebsites.net/blog/are-you-registering-ihttpcontextaccessor-correctly

He leads you through the basic setup of a HttpContext helper class (that I still use today) and how to configure the startup.. and maybe I strayed, but today I came across a problem: I was able to Set session variables, but the Get was pulling null.

Why!!??

Order. Yes, you’ll see 1000 stackflow responses about order in Configure, but now in ConfigureServices (contrary to example as I am now using Core 2.2?), order again comes into play:

public void ConfigureServices(IServiceCollection services){ //this MUST be before add mvc or session returns null services.AddSingleton<IHttpContextAccessor, HttpContextAccessor>(); services.AddMvc();

How does the error present itself? Full Post: https://www.catrina.me/making-session-variables-work-in-net-core/

First Heroku App: Small API in PHP to Talk to .Net Core

catrina — Fri, 22 Feb 2019 00:59:51 +0000

I've recently been curious about switching to a time API for my time stamps and removing any dependency the app might have on the server for a timestamp. Upon Googling I found some paid services, some free and of the free ones, I noticed one was hosted on Heroku. I've heard of Heroku, but never had a reason to attempt to use it. This was the perfect chance.

How I Created a Small "GetTime" API

First, I created a free account on Heroku, nothing special. After verifying my email, I logged in to my Heroku Dashboard and up on the right hand corner, selected Create New App. I named it my company-api and out popped an app.

I decided on just plain, legacy PHP and a simple DateTime string passed thru JSON encode, just to get started. No authentication, no timezone, just a simple spit out if a request to the site came, like this:

    header('Content-type:application/json;charset=utf-8');

    $DateTime = new DateTime();
    $currentTime = $DateTime->format("Y-m-d H:i:s");
    echo json_encode($currentTime);

I created a Git repo for this brand new file and pushed it out. Then, I went back to Heroku, Dashboard, My App and Deploy. I selected Github as my deploy "resource" and selected the new repo I just made along with correpsonding branch.

I hit manual deploy and Heroku runs off to my GitHub repo, grabs the code, compiles and publishes.

It failed.

Beginner Troubles

My first problem was that Heroku could not determine what language I had chosen for my app (you'd think the <?php would give it away ...). You need either one of two things: a composer.json file or an index.php file (for legacy, like mine). I renamed my file to index.php and all I needed now was a "builder pack".

To add a builder pack, I went back to Heroku, Dashboard, My App and Settings. Under builder pack, I added one for: "php". Save settings and done.

I went back to Deploy, Manual Deploy and had a successful output. Yay! First Heroku app!

Adding Some Security

I want to make sure this API is receiving and sending JSON, so there's a few IF's I make the request go through before I hit logic on my PHP page. I also want to (lightly) secure the requests made to this API and monitor our usage of it for metrics information (and future investment). Since this itty bitty API is just relying on 1 index.php file, I figure this can be a sort of "router" for future API's. So, this is what I added to the final PHP file:

Verify the request is in JSON
Require two variables passed:
- a secret api "key"
- an api "request"
Use a switch statement to forward to needed method

The final, simple 1 page PHP Heroku API:

<?php
header('Content-type:application/json;charset=utf-8');

//Make sure that it is a POST request.
if(strcasecmp($_SERVER['REQUEST_METHOD'], 'POST') != 0){
    throw new Exception('Request method must be POST!');
}

//Make sure that the content type of the POST request has been set to application/json
$contentType = isset($_SERVER["CONTENT_TYPE"]) ? trim($_SERVER["CONTENT_TYPE"]) : '';
$contentIsJson = strpos($contentType, "application/json");

if ($contentIsJson === false){
    throw new Exception('Content type must be: application/json');
}

//Receive the RAW post data.
$content = trim(file_get_contents("php://input"));

//Attempt to decode the incoming RAW post data from JSON.
$decoded = json_decode($content, true);

$app = strtoupper($decoded['API']);
$key = $decoded['APIKEY'];

//verify user key - simple MD5 generator: http://onlinemd5.com/.  will build user management for keys if ever needed
if ( $key == "BEAF1CB722A3F7758C7A7FA43F6BF2D1" )
{   

    switch ($app) {
        case "TIME":
            $jsonString = getTime();
            $arr = array('datetime' => $jsonString);
            break;
        default:
            $arr = array('error' => "Unknown Request On API");
            break;
    }  

    echo json_encode($arr);
}


//return the current time
function getTime ()
{
    $DateTime = new DateTime();

    //by default heroku returns time in UTC - can change in dashboard, config vars, only use as needed below
    //$DateTime->modify('-6 hours');
    $currentTime = $DateTime->format("Y-m-d H:i:s");

    $jsonString = $currentTime;

    return $jsonString;
}
?>

Verifying the Response

I used Postman to send a raw JSON request to my Heroku app (used their default/free url). I wanted to make sure all my problems were resolved with this new toy, first, and then move on. Here's what the raw request and response look like on Postman:

Heroku + my PHP are responding nicely!

Handling the Request and Response in C#

So here's how I did the same request and received the response in C# (I use dotnet Core):

public async Task<string> OurHerokuAPI()
{
    string reqUrl = "https://mycompany-api.herokuapp.com";

    using (var client = new HttpClient())
    {
        client.DefaultRequestHeaders
            .Accept
            .Add(new MediaTypeWithQualityHeaderValue("application/json"));

        try
        {

            var query = new
            {
                APIKEY = "BEAF1CB722A3F7758C7A7FA43F6BF2D1",
                API = "time"
            };

            var asJson = JsonConvert.SerializeObject(query);
            HttpResponseMessage response = await client.PostAsync(reqUrl, new StringContent(asJson, Encoding.UTF8, "application/json"));

            if (response.IsSuccessStatusCode)
            {
                var definition = new { datetime = string.Empty };
                var json = JsonConvert.DeserializeAnonymousType(response.Content.ReadAsStringAsync().Result, definition);

                time = json.datetime;

                //monitors success across various "time" api's. in case this particular one fails, there can be various backups until success flag returns true.
                success = true;
            }
        }
        catch (OperationCanceledException)
        {
            //TODO: CREATE ERROR MESSAGE SEND BACK TO EMAIL/ERROR 
        }
    }
    return time;
}

If you see notes, yes, I decided to have some fun and create maybe two other functions, just like the one above, where I query some "free" time api's until that "success" flag turns true (of course, times are controlled to same format). After x tries, I reluctantly call my last function, that gets the server timestamp. As said, I wanted my timestamp to be independent of server. So, if it hits this last method, I also send myself an error email that the time API is failing.

In the future, I could use environment variables (config vars) more wisely, instead of hardcoding. There's also so much clean up to do, but this was a very fun intro into Heroku!

Why Watch Coders Stream Live

catrina — Sun, 21 Oct 2018 12:44:44 +0000

I began hearing about live code streams a year or so ago on LiveEdu.TV and saw a livestream with Jeff Fritz at DevIntersection, but I decided to become a regular on a stream called DevChatter a few months ago to really see how it could improve my own code.

Build a Community

I specifically joined the DevChatter stream because they had a Discord chat. I wasn't familiar with Discord, but I've spent time on IRC. I was expecting 3 months of ignoring, bad advice, trolling to make me go away, you know - the standard IRC vetting experience. DevChatter's Discord was actually VERY welcoming!

I like that they have a General chat but also VERY specific chats, like #azure, #dotnet, #php and.. #rants.

Regular dev's go onto that Discord chat asking for random code help, spitting ideas off each other or just ranting about the problem of the day: the bug that wouldn't go away, the pains of working with legacy, the random programming problem that won't leave your mind...

Every portion of that Discord chat lends you a bit of insight into this person. You figure out what timezone they are in, what languages and systems they work with. You start to know these users not just as chatters, but as developers, as everyday people, working and programming just like you.

It is a community working together to improve their code.

Learn Your Environment

I work in Visual Studio all day. I code in Visual Studio, research on Firefox, debug on Firefox and back to Visual Studio. On my most focused days, nothing else exists.

But, I'm still quite new to VS. I'm not completely sure what CodeRush or Resharper might offer me and I'm not even sure what I WANT in an environment. That is, until I saw someone else work in it.

If I pick up nothing else, watching a live code stream gives me the experience of seeing how quickly and efficiently a seasoned programmer works.

A live coding stream puts you face to face with an environment in real-time and makes you rethink your choice of IDE, extensions, plugins, etc. It makes you want to make your own experience as efficient as possible.

One stream, I got completely obsessed with the comment code and how a TODO comment stood out differently from a regular comment. I commented on this on livestream and I got various suggestions on how to make it happen.

There are constant comments every stream about what extensions to use, Visual Studio vs Visual Code, etc and each time, it is someone is discovering a way to improve their environment.

Conquer Your Imposter Syndrome

Some of the best streams I've attended were a struggle to just get going.

Imported library wouldn't work.
Firefox error message is vague.
Project is getting too big for the logic behind it...

Speak Up

When live coding, the community takes every chance to offer their own experience to help. It can be a simple.."err, I got that error message before.. I was missing a JS file.." or it can be a more complicated logic refactor suggestion.

When errors happen on live stream, you have this urge to just spout ideas. Your doubts about your expertise are less important - you're just trying to help solve this! Everyone understands.

Act

I saw a DevChatter stream fail with a 3rd party library, they fixed it and filed a GitHub issue. Though version control and GitHub have long been in my work process, I never got comfortable filing issues. As a sole full stack developer, seeing him do this live made me just a bit more confident to speak up.

I finally filed my own first issue on a library I work with last week: Libman

Be Confident

Everyone gets stuck and Googles, StackOverflows and sometimes narrow it down on a CodePen route. You learn you're not alone.

Live coding is a great environment to simulate the pressure of creating an app and fixing a bug live. The only difference is that the satisfaction is shared by everyone on the livestream, too!

No Pressure

What I also like about live code streaming is access to this level of a professional coding community without the pressure of always participating.

If you've attended conferences, names you know, like: JeffFritz - runs a great streaming channel. VisualStudio started their own Twitch channel not to long ago and I've also seen JamesMontemagno stream recently. I latched onto the DevChatter community.

But, I'm mostly a lurker.

I'm usually coding during the day for work and put a stream off to the 2nd or maybe half screen. I'm often not even sure how long I can stay. This doesn't mean I can't learn anything off that stream!

Maybe a couple of devs had a random fight of F# vs C# and I get some new tips on F#!
Maybe the 30 minutes I do see teaches me a new way to debug JavaScript.
Maybe we all just bag on the obscene use of var and we all get a little more strict on our typing.

Those are the reasons I keep it on and will continue to participate in live code streams.

Print PDF’s on Azure Using an API and RazorLight (Update 1)

catrina — Tue, 16 Oct 2018 14:53:57 +0000

The API mentioned in my first tutorial got taken down and so I had to do some updates. First, choose another 3rd party API. I currently am trying out HTML 2 PDF Rocket and modified my code a bit:

    [HttpGet]
    public async Task<FileStreamResult> PrintAsync(int id)
    {
        InvoiceVM invoiceVM = new InvoiceVM();
        invoiceVM = invoiceRepository.Get(id);
        var engine = new RazorLightEngineBuilder()
          .UseFilesystemProject(_hostingEnvironment.WebRootPath + "\\pdf\\")
          .UseMemoryCachingProvider()
          .Build();
        var view = await engine.CompileRenderAsync("PDF.cshtml", invoiceVM);
        string apiKey = "xxxxxxxxxxxxxxxxxxxx";
        using (var client = new WebClient())
        {
            // Build the conversion options
            NameValueCollection options = new NameValueCollection();
            options.Add("apikey", apiKey);
            options.Add("value", view);
            options.Add("MarginLeft", "10");
            options.Add("MarginRight", "10");
            options.Add("MarginTop", "10");
            options.Add("MarginBottom", "10");
            options.Add("PageSize", "Letter");
            MemoryStream ms = new MemoryStream(client.UploadValues("http://api.html2pdfrocket.com/pdf", options));
            return new FileStreamResult(ms, "application/pdf");
        }
    }

This is based directly off the HTML 2 Rocket documentation. For the rest of the code see the first tutorial.

…

Using Libman Providers to Coral Front End Libraries

catrina — Mon, 15 Oct 2018 20:59:25 +0000

The first package management system I learned to use was Bower. It was great for the short love affair we had together, but it stopped being supported and I was weary of learning to use one of its replacements. Fortunately, I haven’t had to with Libman.

Libman’s (Library Manager) simple JSON approach to bringing front end dependencies has been the easiest for me quickly implement and it has been a great addition to Visual Studio. I implemented it possibly too quickly, however, and overlooked one powerful configuration setting: provider.

Library Not On Libman!

That was my first sign of trouble, but what actually happened: I didn’t specify the right provider.

The defaultProvider I specified was cdnjs, like the many examples out there, and though it has a lot of front end libraries, cdnjs, of course, doesn’t have all libraries.

Here’s a simple example of how Libman successfully does use cdnjs to bring in jQuery:

{
  "version": "1.0",
  "defaultProvider": "cdnjs",
  "libraries": [
    {
      "library": "jquery@3.3.1",
      "destination": "wwwroot/lib/jquery",
      "files": [
        "jquery.min.js"
      ]
    }
  ]
}

Libman Provider Options

In addition to CDNJS, Libman supports two other providers. Here is the complete list:

cdnjs (default provider)
filesystem (local files)
unpkg (a CDN for everything on NPM)

This works great and if a dependency didn't resolve, I added a provider line, changing it's provider:

{
  "provider": "unpkg",
  "library": "bulma-checkradio",
  "destination": "wwwroot/lib/bulma",
  "files": []
}

UNPKG Library Could Not Be Resolved

When using unpkg as a provider, though, I couldn't get any files to list in Intellisense. I simply got no results. I also got no versions on the library.

So, I did a bit of a hack and used the 3rd option for provider: filesystem.

Using Local Files

I had 2 particular packages that would show on unpkg, but return the following errors:

The "bulma-checkradio" library could not be resolved by the "unpkg" provider
The "datatables-bulma" library could not be resolved by the "unpkg" provider
Restore operation completed with errors

So, I imported them via NPM:

{
  "name": "myproject",
  "version": "1.0.0",
  "devDependencies": {
    "bulma-checkradio": "2.1.0",
    "datatables-bulma": "^1.0.1"
  },
  "-vs-binding": {
    "BeforeBuild": [
      "update"
    ]
  }
}

But I didn't want to add my _node_modules folder to the project, making NPM packages unable to be brought into Views. So, I used Libman to copy the files from the _node_modules folder into my wwwroot/lib folder:

{
  "provider": "filesystem",
  "library": "node_modules/bulma-checkradio/dist/css/",
  "destination": "wwwroot/lib/bulma/bulma-checkradio/css",
  "files": [
    "bulma-checkradio.min.css"
  ]
},

It works, just wishing this was a bit smoother.

.Net Core – Drop Down (Select) Won’t Populate

catrina — Wed, 10 Oct 2018 16:06:27 +0000

I had a recent bug that took me much too long to solve and the root of the cause was me. I got a bit too delete happy and deleted a crucial file that allows me to use Razor Tag Helpers to bring a List into a View as a Drop Down (Select).

The Error

Here’s how the error presented itself:

SelectList won’t populate
Select or DropDown is empty
value = Microsoft.AspNetCore.Mvc.Rendering.SelectList
value = System.Linq.OrderedEnumerable2 [Microsoft.AspNetCore.Mvc.Rendering.SelectListItem,System.String]

My Code

This is how I usually bring a list into my view and the code does work once the solution is implemented.

Controller:

    ViewBag.ProductLines = productLineRepository.GetAll().Select(r => new SelectListItem {
         Text = r.Name, 
         Value = r.Id.ToString() 
    }).OrderBy(x => x.Text).ToList();

View:

    <select name="ProductLine" id="ProductLine" asp-for="ProductLine" asp-items="@ViewBag.ProductLines">
    <option value="0">Select One...</option>
    </select>

The Solution

The solution is a bit embarrasing: I deleted the _ViewImports.cshtml view which included an import that enables tag helpers. The list was not rendering because tag helpers was not enabled.

To solve this:

create a file named “_ViewImports.cshtml” directly under your Views folder
add the following into it:

@using MyNameSpace @addTagHelper \*, Microsoft.AspNetCore.Mvc.TagHelpers

save file and refresh.

Pretty simple fix!

I’m a Front-End Cheater

catrina — Wed, 08 Aug 2018 02:29:43 +0000

I am a full stack developer. I develop in Visual Studio, code in C# with .NET Core, deploy to Azure and I must admit, I'm a front-end cheater.

Comeon, the .NET Core Web App demo itself loads with Bootstrap and JQuery preinstalled. We're all cheaters at some point, but I'm trying to diversify my cheating and eliminate my dependencies.

Here's my latest strategy.

Goodbye Bootstrap, HELLO Bulma!

Anything Bootstrap can do, Bulma can do better!

Well, not exactly but let me explain why.

Bulma has NO JS file.

The only time I feel a need for JS? Maybe JQuery Datatables, but I make a specific "DataTableLayout" and only use JQuery tables if required. This coupling of Bootstrap and JQuery is itself what I was trying to move away from.

Almost everything else? Columns, tables, hero images? Bulma does it all!

I want style to be style.

I'm not a fan of my hover, form validation, etc being done by JS. HTML5 has increased it's validation options, and CSS is rich in transformation. Why am I forced to bring in JQuery and then various animation libraries just to get some simple text animation.

It's frustrating to have so much code that I'm dependent on when I can do columns, tables, cover designs, and more with ONE SINGULAR CSS file: Bulma.

I want flair!

So this works great, everything loads quickly but there's no "animation", no "flair".

What now? Do I succumb and just go ahead and import JQuery and WOW.js? I mean I could...

Or, I could pick and choose my animations with something like : Animista. It has a great UI, I can pick and choose exactly what I need and nothing else. If there's ever a problem, well, I comment out that CSS and back to plan Bulma we go!

Example

So, I wanted to do a simple mouse over. User mouses-over image and words appear. I followed the basic CSS/HTML example from W3Schools and got that to work pretty quickly (I replaced the "container" with the "flip" class to avoid Bulma conflicts).

For flair, I visited Animista for an example of a slight blur-to-focus on words and worked to combine it's animation with my mouseover. This is the result...

Here's the HTML:

<div class="flip">
    <img src="~/images/flip_images/branches.jpg" alt="Avatar" class="flip-image" style="width:100%">
    <div class="flip-middle">
        <div class="flip-text"><a href="/Home/Locations">LOCATIONS</a><br /><div class="is-size-6">Over 80 Years of Service</div></div>
    </div>
</div>

Here's the CSS (a combo of the W3 + Animista):

.flip {
    position: relative;
    padding: 0.3rem;

}

.flip-image {
    opacity: 1;
    display: block;
    width: 100%;
    height: auto;
    transition: .5s ease;
    backface-visibility: hidden;
}

.flip-middle {
    transition: .5s ease;
    opacity: 0;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    -ms-transform: translate(-50%, -50%);
    text-align: center;

}

.flip:hover .flip-image {
    opacity: 0.3;
}

.flip:hover .flip-middle {
    opacity: 1;

    /* below credit of Animista*/
    -webkit-animation: text-focus-in .5s cubic-bezier(0.550, 0.085, 0.680, 0.530) both;
    animation: text-focus-in .5s cubic-bezier(0.550, 0.085, 0.680, 0.530) both;
}

.flip-text {
    font-size: 2rem;
    font-weight: 600;
    line-height: 1.125;
    color: #565656;
}

/* ----------------------------------------------
 * Generated by Animista on 2018-8-7 13:40:21
 * w: http://animista.net, t: @cssanimista
 * ---------------------------------------------- */

/**
 * ----------------------------------------
 * animation text-focus-in
 * ----------------------------------------
 */
@-webkit-keyframes text-focus-in {
    0% {
        -webkit-filter: blur(12px);
        filter: blur(12px);
        opacity: 0;
    }

    100% {
        -webkit-filter: blur(0px);
        filter: blur(0px);
        opacity: 1;
    }
}

@keyframes text-focus-in {
    0% {
        -webkit-filter: blur(12px);
        filter: blur(12px);
        opacity: 0;
    }

    100% {
        -webkit-filter: blur(0px);
        filter: blur(0px);
        opacity: 1;
    }
}
/* ---------------------------------------------- */

The result is a simple animation: you mouse-over an image, it fades and a transparent, white overlay appears. An animated word blurs into focus at dead center so that you can click to follow the link.

Pure CSS! (Bulma + Animista mods)

So, Why So Much Trouble?

I had a site last year that was and IS crucial. It accepted payments. It required a very specific version of JQuery for its own library to work, encrypt credit card numbers and send to API (thus not storing and avoiding PCI compliance). That's fine, but with the design I had then, I had a different version of JQuery, along with a slew of libraries. The libraries did everything from cover background images, to animation, to form validation and whatnot. I stripped everything down and it did work. Somewhere in there, though, one of the libraries clashed with a new release of Edge and caused tons of complaints about invalid credit cards via API. All errors related to form dropdowns in Edge.

Chrome and Firefox handled it fine.

TLDR; Summary, Lesson Learned:

MINIMIZE YOUR DEPENDENCIES.
and that's what I've started to do.

Using Microsoft Flow to Sync BaseCamp & VSTS (To-Do to Tasks)

catrina — Thu, 28 Jun 2018 16:06:54 +0000

We've struggled for years to get various departments to adapt, and stick to, a project management system. In the past year, have finally had some success with BaseCamp, as it has proved to be user-friendly enough that more and more departments began to use it. We suddenly needed to adapt to our users. We needed to make Visual Studio Team Services work with BaseCamp.

Make BaseCamp To-Do a VSTS Task

Creating a solution for BaseCamp to VSTS actually proved to be easy enough. I setup a project in BaseCamp and then a "Main To-Do List". The only challenge in this is I needed to pass the BaseCamp To-Do Id so that when I closed my VSTS task (work item), it could link back to BaseCamp. For this, I chose to put the dynamic info in the "tags" field of my VSTS flow. Here's the setup:

Why Tasks

If you notice, the Visual Studio Team Services flow requires that you select a "work item". I chose task because it seemed neutral. I am still able to change it to another type (example: bug), and the sync will still happen as planned. This is because the flow OUT only links by "work item", "state", and "tag" (BaseCamp Id), not type of work item.

Where Does It Go?

VSTS drops the incoming To-Do as a task in Work Items. From here, I was able to create a User Story, add it to an iteration, move it along in my KanBan Board as usual. I kept all the same VSTS work process.

Closed VSTS Task Completes BaseCamp To-Do

Flow does have a Visual Studio action for when a work item (any work item: task, bug, etc) to link back to BaseCamp and close the todo. This is the route I went first.

Issues with Current Flow

Unfortunately it does not work. Here was how I set it up:

The problem was not even with the BaseCamp or the Flow idea, it was that the Flow for VSTS's "work item closed" just would not trigger! I'd do a Flow test, close a VSTS work item and the test would time out, never receiving a trigger!

Work Around

What does trigger is the flow for "work item updated". So, I replaced the above with "work item updated" and added a condition, checking status for "closed" and then doing my BaseCamp To-Do action. Here's the work around:

Flexbility

Again, notice the VSTS to BaseCamp flow doesn't require the item to be a "task". ANY work item closed will do. This leaves some freedom to continue to work/organize the way you like in VSTS.

Print PDF's on Azure Using an API and RazorLight

catrina — Mon, 11 Jun 2018 15:08:00 +0000

The Problem

I recently had an issue with printing a report to PDF using Microsoft Reporting Service and a RDLC file, etc. Something similar to this. Unfortunately, it worked great in development, but refused to work once deployed into Azure. No matter what I did, I could not duck the GDI errors I kept getting, and apparently this continues through a line of various PDF exporting extensions, all of which rely on GDI for export. Turns out, I'm not alone in facing this problem and so, I decided to find a solution.

The Solution

My general idea was to use something to render my PDF view, send that view as one long html string to this free PDF microservice by @alvercarto and get the PDF in return.

Render View as HTML

I passed an ID to my PrintAsync function, retrieved it's contents into my view model, but needed to pass that view model into a view, render it, grab it's HTML and send it to the API.

RazorLight

For rendering the model in Razor, I used @toddams RazorLight. (be sure to use 2.0-beta1 version if you are on Core 2.0)

It's as easy as declaring a hosting environment variable (used to grab the path of your view). I created a folder "pdf" under wwwroot for ease of access:

private readonly IHostingEnvironment _hostingEnvironment;

Instantiate it in the constructor:

_hostingEnvironment = hostingEnvironment;

and use that to bring in your web root path.

var engine = new RazorLightEngineBuilder()
              .UseFilesystemProject(_hostingEnvironment.WebRootPath + "\\pdf\\")
              .UseMemoryCachingProvider()
              .Build();

var view = await engine.CompileRenderAsync("PDF.cshtml", invoiceVM);

Notes on the View

Take special note on how you set up your view. No need to pass the model up top, and to make the path of my layout file easy, I just dropped it in same folder as my PDF view. Also notice how it just refers to @Model. Here's a snippet from my PDF view:

@{
    Layout = "CleanLayout.cshtml";
}
<div class="container">
    <div class="columns">
        <div class="column"><b>Invoice Date: </b>@Model.InvoiceDate</div>
        <div class="column"><b>Account #: </b>@Model.Account</div>
        <div class="column"><b>Invoice #: </b>@Model.InvoiceNumber</div>
    </div>
</div>

Pass to API and Get Bytes to PDF

Now that I had the HTML string I needed, I was easily able to create a JSON request and post to the api:

var httpWebRequest = (HttpWebRequest)WebRequest.Create("https://url-to-pdf-api.herokuapp.com/api/render");

//2cm margins with emulateScreenMedia for css
httpWebRequest.ContentType = "application/json";
httpWebRequest.Method = "POST";

            var json = new {
                html = view,
                emulateScreenMedia = false,
                pdf = new {
                    margin = new {
                        top ="2cm", 
                        left = "2cm", 
                        right = "2cm", 
                        bottom = "2cm"
                    }
                }
            };

var asJson = JsonConvert.SerializeObject(json);

using (var streamWriter = new StreamWriter(httpWebRequest.GetRequestStream()))
{
    streamWriter.Write(asJson);
    streamWriter.Flush();
    streamWriter.Close();
}

This was successful, the only problem being the httpresponse returns in bytes and needs to be saved as a PDF file. Here's that solution:

var httpResponse = (HttpWebResponse)httpWebRequest.GetResponse();

Stream objStream = httpResponse.GetResponseStream();
var response = File(objStream, "application/pdf"); 

return response;

So, I simply have a print button to call this method:

@Html.ActionLink("Print Claim", "PrintAsync", new { id = Model.Id }, new { @class = "button is-info" })

Deploying onto Azure, I got a Microsoft.Win32 error, so I had to add this to my .csproj file:

<MvcRazorExcludeRefAssembliesFromPublish>false</MvcRazorExcludeRefAssembliesFromPublish>

And done! Of course, I still gotta work on the styling, margins of PDF, but it was enough to get started.

Windows 2012 Server – Time Out of Sync

catrina — Wed, 16 May 2018 15:24:28 +0000

Our help desk guy is on vacay, Server Admin on the road and I'm last in our little team. So, there's this awkward "documentation" post.

Our “TimeClock” server (of all servers!) became 5 minutes out of sync. I used a 3rd party time server, NTP Pool Project to solve the problem. Here’s how:

Open CMD prompt as admin, and set time sync to 3rd party server using this command:

w32tm /config /syncfromflags:manual /manualpeerlist:"0.pool.ntp.org 1.pool.ntp.org 2.pool.ntp.org 3.pool.ntp.org"

Source: http://www.pool.ntp.org/en/use.html

Open Server Manager Tools Services

Select “Windows Time”

Restart

Return to CMD prompt and enter:

w32tm /query /status

All is groovy and back in sync!…

Let's Build

catrina — Mon, 14 May 2018 05:01:31 +0000

New Environment, New Approach

It's Day 1, my first Microsoft Build, and I was not prepared for the sheer numbers nor format. I tediously worked out this schedule with sessions and back up sessions (in case, I don't know… tripped on the way to the first one?). I lost my OCD mind when I realized these sessions were held open format in the MIDDLE OF THE EXPO!

I quickly realized the "sessions" were to show off their specialty. To draw you in by topic, touch on some "new" topics you hadn't heard of, and get you to come talk to them. The presentation was not so much a sales pitch as it was a "let me help you develop on our platform." Interesting...

My Problem

When I decided to learn C# and .NET a couple of years ago, there was a lot of circling the drain, BUT it gave me some ideas. One of those ideas was the creating my own API to open up the iSeries and automate our payment system. In doing that, I stopped a lot of frustration in interacting with the legacy system and freed myself to move forward.

Now, though, I've quickly realized I chose to move forward with a bleeding edge platform with a small beginner community. Either you've been on .NET framework and weary of moving to Core, or you're on Core (like me) and still working things out (or worked it out and write the docs).

When I ask for help I either meet that level's boss and immediately resurrect my "imposter syndrome", or I drown the person I am asking and they send me some link I've already seen 20 times.

This leaves me with lots of projects or goals that are missing parts or just plain "stuck".

Getting Un-Stuck

I approached Day 2 with one goal: get "unstuck". I have access to the experts… get out there, find their booth and ask!

Some of my "stuck" problems:

I can't figure out why my "print to pdf" function works in development but not on Azure
I can't figure out how I, a 1 person team, involves the end-user to create a more accurate work-flow (VSTS) without making them do weird, techy things
I do not have an accurate "feedback" system once my app is launched

Yes, I found some answers / leads:

I am not alone. I was given an expert email/contact for help (GDI problem) and also suggested it might be a 3rd party extension to solve this.
I was shown a template feature I never knew of that basically emails an employee/department a form that they fill out in Outlook. It emails me back and creates a "work item" for me.
I was shown an "Insider" program that helps me create my own set of power users (dealers) that I can launch features to and get feedback from.

I'll have to take time to learn how to do all these things, but, it's room for positive growth.

Planning for the Future

Day 3, I made it my focus to go to the booths I had been avoiding.

What does this random sponsor company do?
What part of tech in Microsoft are you?

I hate sales pitches and I was very upfront about what I do, what I work with and what I needed. If they did not meet my needs I was quick to say so, but I was also very happy with them and clear I was there to collect info.

I have to keep in mind, at one point I thought I'd never have a need for a fancy "API". Years later, that little nugget in the back of my head solved a huge problem of ours. So, this was the day I took to just listen. Let them show you something and put that in your head for later.

How I Work Isn't that Different

A jewel I really adored walking away from a conference of developers was seeing how we work.

The most popular drinks gone were my faves (Coke Zero, Sparkling water), everyone had a water bottle hanging off their bag, low carb snacks, meditation room, coloring books, animals, "quiet" charging lounge. By day three people were walking around in socks (lots and lots of walking at this). All of the above are regular habits of mine and it was refreshing to see the community is recognizing health as a high priority. Yes, I rarely take lunch. Yes, my focus often makes me forget normal tasks. I sit for too many hours in a day. Developers are not alone in this, but as a professional community, it was refreshing to see steps forward in maintaining physical health as a way toward professional growth.