DEV Community: Dan Vega

Lessons learned from redesigning my website

Dan Vega — Sun, 17 May 2020 20:59:43 +0000

A couple of months ago I decided it was time to update https://www.danvega.dev. I normally get this feeling every couple of years but this time it was different. I liked the look and feel but there was a list of things that I wanted to improve on.

Areas of improvement

Design
Removing CSS frameworks
Home Page Layout
Dark Mode
Responsive Design
Lighthouse Scores

Design

I am not a designer, but I like to wear this hat from time to time and pretend I am one. I have gravitated towards Adobe XD, and I have been using it for a lot of my projects lately. I find it's easy to use and it allows me to prototype my application quickly. Once I have something I like its really easy for me to grab the colors, fonts, and assets and build out the design in HTML & CSS. Below are some artboards from a couple of months ago when I decided to start redesigning the site.

Lesson Learned

It might seem like extra work upfront to sit down and come up with a design but it pays off in the long run. When I know what I need to build I spend so much less time in development. Looking at a design, I know what content is needed, so I start with my HTML structure. With my content in place with the semantic structure, I use CSS to make my look and feel match my design.

Removing CSS frameworks

The previous version of my website used a CSS framework called Bulma. I need to make something clear and say that I have absolutely nothing bad to say about Bulma. If I had to select a CSS framework not named Tailwind CSS Bulma would be my framework of choice. I didn't know Bluma when I started using it and that caused a lot of my problems. If you combine that with a lack of CSS foundational knowledge I had a pretty messy codebase.

Now that I understand layouts in CSS and how to accomplish different designs I find component-based frameworks less useful. In the past few years, my frontend skills have gotten better and I thought this was a great time to put them to use. My redesign makes use of a variety of tools that make frontend development a lot of fun

CSS Variables
Flexbox
CSS Grid
Responsive Design

Lesson Learned

Learn the foundations of HTML & CSS. I have been building websites for 20+ years and a lot has changed in the last 5 years. I am constantly hearing the same from other developers who have been doing this for a long time. Learn modern techniques like Flexbox & CSS Grid, they are both awesome and a real joy to work with.

Home Page Layout

My previous home page was really boring and I just wanted to add some style to it. I started messing around with some different designs and one thing that always stuck out to me with a total "cool factor" was layouts that had some type of wave or diagonal design. I came up with the wave on the home page and now it was time to implement it.

I attempted to figure this out on my own and failed a few times. I was trying to use an image that I exported from XD as a background image and had issues with it not being responsive and not working well in dark mode. I finally did some digging around and came across this great tutorial by Richard Zimerman.

Lessons Learned

The trick here was using an SVG and setting it to display:block. I am still pretty new to using SVG images but I am finding them really useful. In this case, I combined CSS custom properties with an SVG and now I have the header for the home page that looks nice, is responsive, and looks good in dark mode!

.wave-container {
  position: relative;
  background: var(--home-header-background);
  color: #4a4a4a;
  overflow: hidden;
}
.wave-container > svg {
  display: block;
}

Dark Mode

I have always loved the idea of having a dark mode on my website. I don't know how much my readers were asking for it but this is my website and I wanted to add it 🤷‍♂️. I have used CSS Custom Properties (variables) before but maybe not at this scale. The way this works is by setting some custom properties on the :root which will be your default light theme. For each property you create you will create a dark theme property as well.

:root {
  --background: white;
}

[data-theme="dark"] {
  --background: black;
}

Now in your CSS instead of setting the background color to white or black you refer to the custom property

body {
  margin: 0;
  padding: 0;
  background-color: var(--background);
  border-top: 8px solid var(--bright-blue);
  font-family: "Roboto Slab", serif;
}

Next, I setup some icons using Font Awesome and by default the moon is displayed. When you click on that icon you are enabling dark mode. A little custom JavaScript will set the data-theme to dark:

if (document.documentElement.getAttribute("data-theme") === null) {
  document.documentElement.setAttribute("data-theme", "dark");
}

Lessons Learned

If you are going to implement something like dark mode do it right from the start. If you notice yourself defining colors anywhere that don't use a CSS property you probably need to think about doing so. This is something I need to go back and fix up. I feel like I have too many properties defined and can probably condense this down.

Responsive Design

I know that both myself and my audience use my website on a variety of form factors so making sure my design was responsive was important. As you can tell by XD designs I didn't have a mobile-first approach and that caused me some issues along the way. It's important to always be thinking about how a layout or design element will scale up or down. I am really thankful for tools like Flexbox and CSS Grid which are really helpful in creating responsive designs.

Lessons Learned

When I design a layout in Adobe XD I need to make sure I have a plan for my responsive designs. The term mobile-first means that your layout starts out with a mobile layout and scales up. This ensures that the mobile design is not just an after thought. Take some time to look at the analytics and understand what devices your visitors are using.

Lighthouse Audits

I knew that once I finished my site I wanted to take a look at the Lighthouse Audits and try to improve scores where I could. If you aren't aware the Google Developer Tools has a tab called Audits where you can check your site for:

Performance
Accessibility
Best Practices
SEO

Right now the site is doing well on some page but still needs some work on others. My advice here is let these audits guide you to improve your site but do not obsess over them.

Lessons Learned

The first big lesson I learned here was that pulling in the entire Font Awesome library for < 10 icons was a big no no. I mean I knew this but I needed to find a way to resolve this and the audit gave me a big kick in the rear to do so. I was just going to grab the icons I needed but what happens if I want to use more in the future? There had to be a way to pull in just the icons I needed and thanks to the Gridsome documentation I came across a wonderful library from Fort Awesome for using Font Awesome in Vue.

I still have some work to do here but I am trying to take my own advice and not obsess over it. I think there are two big things that would really help me out. Right now on the home page all of the images for recent posts are pulling from GraphQL. There is a way to resize them but unlike when you use a <g-image> tag this isn't lazy loading the images and I need to figure out a way around this. The other problem is all of my ConvertKit forms are pulled in via JavaScript. I would like to just create these forms myself so I can make sure they are accessible and at the same time it would reduce some page weight.

Conclusion

I have had a lot of fun working on the redesign for my website and I hope it shows. If you have any questions about anything I did here you can check out the source code for it here. If you would like me to explain anything in more detail please leave me a comment below or reach out to me on Twitter.

Send an HTTP GET Request using Java 11 HttpClient

Dan Vega — Wed, 18 Mar 2020 02:13:33 +0000

In this tutorial, you will learn how to make an HTTP request in Java using the HttpClient class from Java 11. This class makes it really easy to send a request and in this demo, you will learn how to call a REST API. The REST API is going to return a JSON array and you will then learn how to convert each item in the array into a Java Object using Jackson.

When you have completed this tutorial you should understand:
✅ What is the HttpClient class and why would you need it
✅ Use Java HttpClient to send an HTTP GET Request
✅ Call a REST Client in Java
✅ Use Jackson Databind to parse JSON into Java Objects
✅ Use a reference method to print out each Java Object

How to create a Pull Request by Submitting your first Pull Request to Github

Dan Vega — Wed, 11 Mar 2020 01:37:31 +0000

In this tutorial, I am going to show you how to create a simple pull request by submitting your first pull request to Github. After we walk through submitting your first pull request to Github I am going to show you how to find issues that you can work on in some of your favorite open-source projects. If you want to contribute on open-source projects these days it is important to understand how to find issues that you can work on and understand the process for getting your changes into a project.

When you have completed this tutorial you should understand:
✅ How does a Github Pull Request differ from your normal daily workflow
✅ What is a Pull Request?
✅ Creating a simple Github pull request
✅ Submitting your first pull request to Github
✅ Finding issues to work on in your favorite open source projects
✅ This process would also work on Bitbucket, Gitlab or any other Git-based hosting.

Spring Boot Quick Start: Spring Boot Tutorial for Beginners

Dan Vega — Thu, 05 Mar 2020 19:45:39 +0000

In this Spring Boot quick start, you are going to learn how to create a simple Spring Framework application using Spring Boot. We will discuss different IDE & Text editor options, create the new Spring Boot application using the Spring Initializr and then import it into IntelliJ IDEA. This Spring Boot Tutorial for Beginners will follow a new quick start guide on the Spring.io website.

When you have completed this tutorial you should understand:
✅ Understand what Spring Boot is and what it gives us
✅ Create a new project using the Spring Initializr
✅ Import the project into your IDE of choice
✅ Create a REST controller in Spring Boot
✅ Use the @GetMapping annotation from the Spring Framework
✅Running a Spring Boot Application

🔗Resources & Links mentioned in this video:

Spring Boot Quick Start: https://spring.io/quickstart
Spring Boot in Visual Studio Code: https://youtu.be/5mpHejytgFE

Vue 3: Smaller, Faster & Stronger.

Dan Vega — Thu, 05 Mar 2020 02:04:17 +0000

In this presentation, I am going to talk to you about some of the new and exciting features coming to Vue 3. I originally put this presentation together for a conference called CodeMash. I put a lot of work into this presentation and have only given it twice now so I decided to sit down and record it for a larger audience.

This presentation will cover:
✅ Vue.js release history
✅ Request for Comments (RFC) process
✅ Smaller ( Global API Change, Tree shaking, TypeScript & Fragments)
✅ Faster (Virtual DOM, Reactivity Updates)
✅ Stronger (Composition API)

Question: What are your favorite new features in Vue 3?

Spring Boot in Visual Studio Code

Dan Vega — Thu, 14 Nov 2019 14:03:57 +0000

I use Visual Studio Code for everything these days. In the past couple of months alone I have used it for HMTL, CSS, JavaScript, Java, Spring, C#, Go, Vue, Angular, and TypeScript.

A few folks were surprised when I told them that I was doing Java + Spring Boot development in VS Code so I thought I would put a video together to show it off.

In this video, I will create a new Spring Boot Project in Visual Studio Code. Then we will add a REST API controller that our front end project can talk to. Finally, we will create a simple Vue project that talks to our Spring Boot backend.

Here is the video along with the extensions you should install.

Extensions:
https://marketplace.visualstudio.com/items?itemName=Pivotal.vscode-boot-dev-pack
https://marketplace.visualstudio.com/items?itemName=vscjava.vscode-java-pack

Anyone else using Visual Studio Code for Spring Development? Are you facing any issues, got any tips?

A beginners guide to unit testing in Vue

Dan Vega — Thu, 31 Oct 2019 13:22:14 +0000

All three articles that I did on *Unit Testing in Vue for beginners that I did for Vue Mastery are now live.

In part one of the series, we really focused on identifying what to test and more importantly what NOT to test in your components. From there we wrote our first test in part two and spent some time understanding the different libraries involved. In part three we learn through repetition by writing more unit tests with a couple of components that add some new wrinkles.

I want to thank Adam and Gregg over at Vue Mastery for giving me this opportunity to write for them. I have always looked up to them for their unique style of teaching and everything they do for the Vue community. I don't think this is the last time you will see me collaborating with them and I am looking forward to what we do next.

I put a lot of hard work into this series and if you enjoyed it please let them know. I hope you're having a wonderful day and as always friends...

Happy Coding
Dan

If you found this article interesting please consider subscribing to my newsletter or following me on Twitter.

Hello, Philadelphia!

Dan Vega — Fri, 13 Sep 2019 17:55:55 +0000

This was a huge week at Tech Elevator where we announced our 6th location would be opening up in Philadelphia. If you want to read more about why we are so excited about this opportunity I would encourage you to read this article by our CEO, Anthony Hughes. As exciting as expansion is, growth without a mission isn't sustainable.

You will find a lot of coding bootcamps boasting about their numbers without any verified data to back them up. Here at Tech Elevator, we submit all of our results to CIRR, The Council on Integrity in Results Reporting. CIRR is an independent, non-profit organization whose members believe that prospective students should know a school's outcomes before deciding whether to enroll.

CIRR posted our result this week and Tech Elevator is graduating 95% of students across all our campuses and of that 94% are getting placed within 180 days of graduating. The starting salary of students entering our program is $30,000 and the average starting salary when they leave is $58,000. This means that in just 14 weeks students are leaving with double their salary and a career that they are excited about.

This allows all of you to see what I already know, Tech Elevator is all about changing our student's lives. This makes me so happy because not only are we growing but we are doing it the right way and this is something I am incredibly proud of.

So enough bragging, what does this mean for you? First, we are hiring across many of our locations for multiple positions. If you enjoy mentoring and have a real passion for software development you might be a great fit as an instructor. If you would like to hear more about becoming an instructor or have any questions please feel free to contact me.

This also means that if you have any friends or family in the Philadelphia area that are interested in a career in software development you need to tell them about Tech Elevator. Our results speak for themselves, we give you everything you need to start a new career in software development. I truly believe in what we do here and again if you have any questions, please feel free to reach out. As always friends...

Happy Coding
Dan Vega

If you found this article interesting please consider subscribing to my newsletter or following me on Twitter.

Join my Discord Community

Dan Vega — Tue, 27 Aug 2019 15:40:22 +0000

I have decided to create a Discord community. I have been giving this a lot of thought for the last few months and I am really excited about it. In this article, I am going to give you a quick introduction to what Discord is, why I chose it as a platform and how it compares to something like Slack or Facebook Groups.

What is Discord?

If you're not familiar with Discord it is an all-in-one voice and text chat for gamers that's free, secure and works on both your desktop and phone. For a long time Discord was primarily geared towards gamers, and it still is. With that said it has been building some pretty great features on that has been attracting communities to it.

I have been a part of 5 or so communities this year on Discord and have really fallen in love with how easy it to use. I also love in the communities I am in everyone has been very helpful and nice.

People want to join communities where they are going to have helpful discussions without being ridiculed. That is why Discord has a strong focus on preventing spam as well as giving server administrators the tools they need to moderate them.

Why do I need a community?

The real question that I have been fighting with is Do I really need to start a community? I mean who am I? I am just a guy on his small corner of the internet who likes to help people learn how to code. The more and more I started thinking about it though the more it made a lot of sense to me.

Course Student Discussions

If you're new here I teach courses online and currently have over 85,000 students across multiple platforms. First It's become really hard to manage students questions across these platforms. The platforms I teach on have ways for students to ask questions but they aren't great for getting students to engage with each other.

I think by moving these students to Discord I can get a better handle on the questions being asked. Once I can get a better handle on what questions are being asked I can try and correct these problems in my courses and cut down on the number of questions I have to respond to. I also think this might turn into something where students can help other students with their questions. The reality is with a full-time job and a family I need to make the most of what little free time I have.

Not just for students

If you're not a student of mine don't worry, there is something for you here as well. I like to teach through articles and videos. If you have questions about one of these pieces of content there will be a place here for you to ask questions.

I also try and answer questions on Twitter from time to time. These might be questions that I see others asking or someone might have asked me something. While I love Twitter this isn't the greatest place to give an answer to technical or coding questions. So these are other types of discussions I would love to see started in my community.

Why not Slack?

This sounds exactly like what Slack is made for right? I use Slack for work and I actually like it a lot but it isn't great for communities. I already understood this at some level because if you aren't paying for Slack messages start to disappear which isn't great when you want to archive content.

I could go on and on about the problems with using Slack building a community but I won't. Instead, you should check out this amazing article by Zach Shallbetter titled Slack is destroying Communities.

Why not Facebook Groups?

I currently run a Facebook group for Spring Boot Developers. I have grown the group to over 11,000 people but to be honest it's become really hard to manage. Approving new members is pretty easy but I have to weed through about 50 posts a day most of which is someone trying to post their article or video.

There is nothing wrong with wanting to share something you created but with Facebook I just don't find that its a good place to do so. There are no channels on facebook so it's all one big feed and questions get lost too easy so I try and limit the group to just discussions. On top of the self promotion links I get a bunch of spam and Facebook Groups Tools aren't great for moderation.

Join my Discord

Now that you know what Discord is and why I ultimately decided I needed a community it's time for you to join. This is free to you and none of your personal information is shared with me or anyone else and you can leave at any time.

Below is a link to my Discord Community and look what my current chat room layout looks like. This will probably change by the time you get there but this is iteration #1.

Join my Discord Community: https://discord.gg/gx4Z8XY

Conclusion

If you want to learn how to code, help others learn to code or just love learning I think you're going to find a lot of value here. If you have any questions you can ask them in the Discord or reach out to me on Twitter. As always friends...

Happy Coding
Dan Vega

This article was first posted on my blog at https://www.danvega.dev/blog. If you found this article interesting please consider subscribing to my newsletter or following me on Twitter.

Giddy for Gridsome: Learn how to use VueJS Static Site Generator Gridsome

Dan Vega — Sat, 17 Aug 2019 18:24:03 +0000

In this live stream, we are going to be talking all about Static Site Generators. I built my new personal website using a static site generator called Gridsome and I want to show you how you can get a basic site up and running with it.

If you're interested in finding out when I will be live streaming sign up for my newsletter over at https://www.danvega.dev. If there are certain projects that you would like me to work on during these live streams please let me know.

What is your conference talk walkup song?

Dan Vega — Tue, 13 Aug 2019 19:08:14 +0000

I was at a baseball game yesterday (Go Tribe!)

and I remembered a tweet from

Ali SpittelFollow

Passionate about education, Python, JavaScript, and code art.

// Detect dark theme var iframe = document.getElementById('tweet-1159987559390482433-328'); if (document.body.className.includes('dark-theme')) { iframe.src = "https://platform.twitter.com/embed/Tweet.html?id=1159987559390482433&theme=dark" }

I think this is an amazing idea and more conferences should do this. I know that VueJS Amsterdam does this but I am not aware of any other. This got me thinking about what my walk-up song would be and while I can't narrow it down to 1 here is my shortlist.

So now the question is... What would your walkup song be?

Learn how to use CSS Grid with a FREE tool CSS Grid Generator

Dan Vega — Mon, 12 Aug 2019 13:09:19 +0000

As someone who has been developing web applications for almost 20 years now, I have seen it all. I started in FrontPage, moved to Dreamweaver, nested tables inside of tables and learned how to float and clear fix everything.

While you won't see any awards for my designs on my bookshelf I am able to create some very nice simple and clean layouts. That said I have never really enjoyed it because it has always been a huge pain in the a$$. I have always felt like I was just hacking away until my layout looked almost like what I had in mind.

This is why when tools like CSS Grid & Flexbox came along I was beyond excited about the possibilities of creating clean layouts. I think if you combine these 2 technologies along with just how far JavaScript has come it is what has really got me excited about front end development these days.

While I have a pretty good understanding of CSS Grid at this point I know it can be a little bit confusing to get started. That is why I am really excited to share with you a new tool that I came across that I really think can help you out if you're trying to understand CSS Grid.

CSS Grid Generator by Sarah Drasner

CSS Grid Generator is a free tool created by the super talented Sarah Drasner. It is a visual design tool that allows you to create a basic grid layout and then copy the code that was used to create it. When you first open the tool you will be presented with a default layout but from here you can easily customize the layout to your needs.

CSS Grid Layout Example

When I am learning something I find the best way to learn is by building something practical with my shiny new toy. In this article, you are going to take a very simple layout and then use the CSS Grid Generator to create the code needed to use in a real project. This is the finished layout with a little bit of styling just so each section is apparent.

Now that you know what we are aiming for we can start building it out the layout. Start by updating the right hand side to the following.

Columns: 4
Rows: 3
Column Gap: 20
Row Gap: 20

The gaps allow us to have some margin between our content. I could have just used column gap but I wanted some margin after the header and before the footer so that is what the row gap is doing.

Next you will want to define the different areas of your application. In the CSS Grid Generator you can click and drag to create an area. You will want the header to span the entire grid, the sidebars to take up one cell, the main content area to span 2 columns and the footer to span 4 columns. If you do everything correctly you should end up with something that looks like this.

This is starting to look more like our layout but you still need to define some sizes of different things. You will notice an input box next to each row and column that you can use to set a specific size.

Header: 100px height
Sidebars: 200px width
Footer: 50px height

This is starting to look more like the layout we were going for but you might be asking what that 1fr unit is.

Tracks can be defined using any length unit. Grid also introduces an additional length unit to help us create flexible grid tracks. The new fr unit represents a fraction of the available space in the grid container.

The 1fr in 2nd row will tell that area to take up the rest of the available space. If you set the container to 100vh you can then have content that takes up the full page and same goes for the columns.

CSS Grid Generated Code

If you look under the columns and row inputs on the right hand side you will see a button that says "Please may I have some code", click it. You should see some generated code that looks something like this. Click the copy button to copy the code and then head over to a text editor.

.parent {
  display: grid;
  grid-template-columns: 200px 1fr 1fr 200px;
  grid-template-rows: 100px 1fr 50px;
  grid-column-gap: 20px;
  grid-row-gap: 20px;
  .div1 { grid-area: 1 / 1 / 2 / 5; }
  .div2 { grid-area: 2 / 1 / 3 / 2; }
  .div3 { grid-area: 2 / 2 / 3 / 4; }
  .div4 { grid-area: 2 / 4 / 3 / 5; }
  .div5 { grid-area: 3 / 1 / 4 / 5; }
}

Create a new document simple-layout.htm and add the following code which will reset the margin and padding for the body.

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>Simple Layout</title>
  <style>
    body {
      margin: 0;
      padding: 0;
    }
  </style>
</head>
<body>

</body>
</html>

Next add in the CSS (the copied code was in SASS but you can pull the divs out)

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>Simple Layout</title>
  <style>
    body {
      margin: 0;
      padding: 0;
    }
    .parent {
      display: grid;
      grid-template-columns: 200px 1fr 1fr 200px;
      grid-template-rows: 100px 1fr 50px;
      grid-column-gap: 20px;
      grid-row-gap: 20px;
      height: 100vh;
    }

    .div1 {
      grid-area: 1 / 1 / 2 / 5;
    }

    .div2 {
      grid-area: 2 / 1 / 3 / 2;
    }

    .div3 {
      grid-area: 2 / 2 / 3 / 4;
    }

    .div4 {
      grid-area: 2 / 4 / 3 / 5;
    }

    .div5 {
      grid-area: 3 / 1 / 4 / 5;
    }
  </style>
</head>
<body>

</body>
</html>

What the tool gave you was the css needed to create this layout. You will need to add markup needed which by looking at the CSS is just a .parent with 5 .div nested. I am adding the text just so you can see each section.

<body>
  <div class="parent">
    <div class="div1">
      Header
    </div>
    <div class="div2">
      Left Sidebar
    </div>
    <div class="div3">
      Main Content
    </div>
    <div class="div4">
      Right Sidebar
    </div>
    <div class="div5">
      Footer
    </div>
  </div>

</body>

Finally add the follow CSS that will just add some padding a background color for .div1 - .div5

div:not(.parent) {
  padding: 10px;
  background-color: rgb(199, 199, 199);
}

If you were to run this you would end up with the following.

This looks pretty good but you want this to take up the entire browser window. An easy way to fix this is to add height: 100vh to the .parent class

.parent {
  display: grid;
  grid-template-columns: 200px 1fr 1fr 200px;
  grid-template-rows: 100px 1fr 50px;
  grid-column-gap: 20px;
  grid-row-gap: 20px;
  height: 100vh;
}

With that, you have the layout you were looking for!

This tool is meant to help you create a basic layout in CSS Grid really fast. From here it will be up to you to go out and learn more about CSS Grid so that you can start customizing and creating advanced layouts.

Conclusion

The user interface of CSS Grid Generator is beautiful, clean and easy to use. I love that the entire project was written in Vue and hosted on Netlify, 2 of my favorite technologies.

If you're ever curious how a project like this is built you can pop open the source code and take a look (Thanks Sarah!). There is a nice SVG animation in the upper right hand side that will take you to the Github repository. I hope you found this tool as useful as I have, as always...

Happy Coding

Dan

This article was first posted on my blog at https://www.danvega.dev/blog. If you found this article interesting please consider subscribing to my newsletter or following me on Twitter.