Category Archives: ASP.NET

Web Development

VS Code, the Ultimate Open Source Editor

Posted on by
Reply

Between work and school at the moment, my progress through the HTML5/CSS3 learning course in YouTube has been slow, but I’m making progress. While most of what I’ve learned is what I already know, there have been some new concepts I have not touched yet such as HTML Forms. However, one item I’ve been learning a lot more about has nothing to do with HTML5 or CSS3. It is Visual Studio Code.

Now, I’ve been technically using Visual Studio Code for a few years now, just never to the extent of how I’m now using to write my web code for the HTML5/CSS3 course. I’ve used it somewhat for helping write SQL queries and saving a local copy of a C# class/method I’m working on. However, this is the first time I’ve really started using it with extensions beyond the language support. A few great extensions that I’m using for web design, but I’ve started using for my C#, are Bracket Pair Colorizer 2 and indent-rainbow. I can’t say how often I’ve spent more time trying to match brackets and fix mismatch indents then actually writing code. For web design, I’m also using Highlight Matching Tag, Live Server, and Prettier – Code formatter. Live Server is honestly extremely simple, but a heck of a time saver when making page edits and not having to constantly reload pages. Prettier isn’t exactly necessary as I do feel getting into a better formatting habit is more ideal, I’m not perfect and overlook indents from time to time. Just nice to make sure I have a more consistent format without to much fuss. Although none of these are necessary, they make coding so much nicer.

My latest fun with VS Code has to do with Microsoft finally bringing it to Raspberry Pi. I’ve been sitting on a Raspberry Pi 3 for a while now not really knowing what to do with it. With my decision to start focusing on web development, I figured why not use as a lightweight web server. Now, I can use VS Code on my Raspberry Pi to help work on site code. Set it up with SSH, VNC, VS Code, and Apache2. Not sure what kind of site I’ll try to build first, but now I’ve got a perfect lightweight Linux testing environment to play around with. If I don’t want to VNC into the Pi, I just found out that I can use VS Code on my desktop to remote into my Pi’s file system to also edit files over SSH with the Remote Development extension. Granted, I don’t think you need the entire Remote Development extension as you can get the individual components, but I figured why not. Just need to play around with it more, but I’ve already setup a connection and it really nice. Side note, I kept getting this error when trying to connect initially: Resolver error: The process tried to write to a nonexistent pipe. Found a nice fix on Stack Overflow that worked perfect for me.

In all, I really feel that Visual Studio Code really is the ultimate open source editor. It’s free and has one heck of an extension library. Also, you can get it across Windows, OSX, and Linux. If you are looking for a good editor that you can also use for code development, I strongly recommend giving Visual Studio Code a shot.

2021 New Years Resolution

Posted on by
Reply

I’m a little late on this, but better late than never. For 2021, my goal is make sure I’m practicing my programming skills. Either by taking some training courses or just fiddling with personal projects. Noticed with 2020, I was dealing with depression which was really impacting my motivation. Still dealing with depression, but wasting my time isn’t doing me any favors. As another personal project, I finally started to learn how to play the guitar. Nothing to do with development, but I realized how much learning how to play the guitar was helping me feel more motivated.

Taking that same idea, I remember seeing a 100 Days of Code challenge on Twitter last year. Not going to necessarily commit to 100 days of coding specifically; but I’m going to work on fitting in some coding each week whenever I find myself just wasting time (which is quite a bit of time at the moment still). Something I did happen to catch while reading some of the posts was a link to Learn HTML5 and CSS3 From Scratch – Full Course YouTube training course shared via freeCodeCamp.org. I know I said I’m going to focus on C#; but considering I want to do web development, I need to also make sure I have a solid grasp of HTML and CSS for that front-end development. Won’t do me any good if I’m proficient in the back-end development if I don’t actually have a site to showcase anything.

The video is 11 hours and 30 minutes, so not going to blow through in one sitting. Just going to break it up into smaller sessions. Fortunately, the video itself is from a course that was originally broken up into small parts, and the the first pinned comment breaks up the timestamp for each section start. Will most of this is all a refresher so far, never hurts to re-review the basics to make sure I have them down. Made it through the first 15 parts today so far. I might watch more tonight; but if not, there is tomorrow. Just as long as I’m working on them consistently.

Fall 2020 School Update

Posted on by
Reply

So, finally wrapped up my final course for the year. Only one more year to go and I’ll finally have my bachelor’s degree. I have to say, my original focus heading into my bachelor’s program at DeVry wasn’t Web Development and Administration, but I’m happy that it is now. The primary reason I switched was because my original degree program went away while working on it. It was a degree program more focused on business application programming and was the closest to a pure programming course DeVry offered. When they updated all their IT degrees, they dropped that one and replaced it with something that would have resulted in pushing my progress back. The only course program at that time that wouldn’t result in delaying my progress was Web Development and Administration. A blessing in disguise to be honest.

With only four classes remaining, I have to say that I’m extremely comfortable with ASP.NET/C# website design. Chances are, there are still elements of ASP.NET that I haven’t been exposed to, but I can guarantee it won’t take me long to figure them out at this point. Just need an appropriate use case for me to play around with them. I learn so much better writing out code then just reading about it.

Next up, .NET Core MVC website design. A change from using Forms but looks interesting. That, and I’d rather get more familiar with architecture less platform dependent. The fact that .NET Core works across Windows, OSX, and Linux is far more appealing to me then limiting myself to just the .NET Framework and Windows. Not to say that knowledge is wasted; but I prefer the flexibility.

HTML and Centering Block Elements

Posted on by
Reply

Someday, I’ll eventually figure out how to properly position elements on a web page. Always seems like when I think I know what I’m doing, and then I get something that I just can’t seem to display where I want it to on a page.

Case in point, I was trying to center a <section> element that contained three images side-by-side horizontally. Had no issues getting the images to display how I wanted them in the element; but didn’t seem to matter what I did, I couldn’t get the <section> to center. Did some digging and found the most common answer I came across was to use this CSS style for the block elements like sections:

margin:auto;

So, I added this to the style for my <section> element containing the photos, and nothing. After looking at a few other examples, it finally clicked. Technically, my <section> element was “centered”. It just happened to be the full width of the page with the images left justified. Without defining a set width for the block element, it defaults to the full width of the page, not what is in it.

Sure, I could have tried to center the images within the block element, but still figured centering the block element would be easier. So, I set a defined a width for my <section>, just enough so the images remained side-by-side, and bingo. All three images are now centered in the page.

section.imgcenter {
    width:775px;
    margin:auto;
}

Granted, I then came across https://www.w3.org/Style/Examples/007/center.en.html, and thinking I could have just used left and margin-right styles set to 50% and -50% respectively to get the same effect. This just points out I have to keep in mind the default behavior of each element.