DEV Community: Hello Dev World Blog

5 Web Development Languages to learn in 2023

Hello Dev World Blog — Tue, 10 Jan 2023 04:04:47 +0000

It's that time of year again to start thinking about what you want to learn this year!

These are my top 5 languages for web developers that I would suggest learning in 2023

JavaScript/Typescript (shocker I know)
Python
Java
Go
Kotlin

I will also put a bonus one at the end ;p

1. JavaScript/TypeScript

according to Stackoverflow (and many others), JavaScript is one of the most commonly used languages in the world. It is a fun language that can be used for both the front end and back end. It has an extensive open library system that you can contribute to (open source). This is both good and bad because there is very little quality control but it opens some interesting opportunities and allows people’s imaginations to run wild. There are packages for everything! It is always fun to see what people come up with.

TypeScript has been exploding in the past few years as well. It is a superset of JavaScript meaning it adds an extra layer on top of javascript and compiles it down to javascript. It allows you to add static typing to your projects!

There is a HUGE demand for JavaScript/TypeScript devs as well. According to this study (and a few others) it is the number 1 most in-demand language last year. No matter what study you look at its almost always in the top 3.

2. Python

Python has been around forever and you have probably already spent a little time learning Python as most colleges, high schools, and some code camps use it to teach people the basics. It is a great language and has been a steady contender for a long time. It is continuing to climb in popularity again and people who work in ML and deal with large sets of data seem to use it a lot.

it is a great language to have in your toolbelt with a high demand on the job market. No matter what study you look at it is almost always in the top 5 most in-demand languages from last year.

3. Java

Another language that has been around forever that you may know from schooling. You would be amazed how many companies still use Java and actively add new applications using Java every day.

Java has been around for a long time and there is a lot of good online support. It has been like Python which has been steady since it came out and definitely isn’t going anywhere. If you are a web developer that does not know Java it would be a great language to add to your arsenal.

it is also in high demand in the job market. No matter what study you look at it is almost always in the top 5 most in-demand languages from last year.

4. Go

oh, go…. Go is a language I was never super fond of and people seem to either love it or hate it. BUT the fact of the matter is it’s very popular and the popularity is growing. It is a fast language that people are finding new uses for all the time. It used to be more barebones than it is now (as designed they wanted it to be light and fast) but they have since added a bit more built-in functionality. There is also more and more online support for it every day. It is definitely an interesting one to check out and see if you like it!

also to mention it is in the top 10 of most on-demand languages for multiple studies.

5. Kotlin

Kotlin isn’t on any of the top in-demand lists but a language that I find very interesting. It seems to be gaining a bit of momentum and everyone that I know that uses it loves it. It is relatively new and there isn’t as much support online but there is still some out there. I don’t foresee it going anywhere anytime soon and just think it is an interesting language for someone to look into/learn that could become more popular in the upcoming years

BONUS! - Rust

if you want to start going a little past web development or a language that can go with web development definitely check out Rust. It is relatively new and is gaining momentum. It is a really cool fun lower-level language that people are finding new uses for all the time. It is more fun than C and is super fast and powerful. If you have extra time and you want to start playing around with lower-level languages definitely give Rust a try!

There are many more and I didn't list a lot of still very popular languages such as C#, Ruby, and PHP definitely comment down below what languages you would suggest people learn! there are so many options!

Best Laptops for Software Development in 2023

Hello Dev World Blog — Sun, 08 Jan 2023 04:43:16 +0000

This post contains affiliate links. If you use these links to buy something I may earn a commission. Thanks.

So I often get asked what the best computer for doing software development is and I kind of hate that question because the answer is it depends. Are you only going to use it for software development? What else do you want to do on it? What operating system do you want? What kind of development are you going to be doing? So ya. It depends and arguably you could do development from just your phone. Nothing special needed. However, I will do my best to make a top 5 list of best laptop choices for software development (in no particular order).

MacBook Pro 16”

I went with the 16“ because I like as much screen as I can get! You can never have too much real estate when developing especially for web developers. I also got it because it came standard with the M1 Pro chip which you need if you want to natively support multiple external screens and I have 2.

if you want to natively support 2 external monitors you will need to at least go with the 14“ MacBook pro there are external devices like this one or this one you can get with the 13” MacBook Pro or 2022 MacBook Airs without the pro chip but its another external item you need to get that can be pricey.

If you are looking to do App development and want to support apple devices an iMac or MacBook Pro will be a must-have as you need them to compile your apps and release them to the store. If you are a game engineer the screens on the MacBooks are incredible and with the new M1 chips (or M2 depending on which you go with) you shouldn’t have any issue with processing power although they may run a little hot. I also get the higher RAM and storage because I would rather have more and not need it than need it but not have it.

One thing to note this year (and 2022/2023 models) is they made them significantly thicker and heavier so its something to keep in mind if that is a big deal for you

also using this link will save you at least $300 at the time of posting :)

Pros:

fast
reliable
great operating system that integrates with other apple devices
great Display

Cons

HEAVY
have to spend more for the M1 pro chip if you want to natively support multiple external screens

Acer Predator Triton 500 SE

If you are leaning more towards a pc the Acer Predator Triton 500 SE is a great choice. I love this laptop because is a beast and still portable. It is a great laptop for traveling because you can do work and gaming on the laptop. If you want a lot of power in a small laptop this is a great choice. The screen is also amazing. It also has plenty of processing power for the game developers and a great screen for them to work on. If you are doing .NET development (not core but anything other than core) you will want to opt for a PC as you won’t be able to do it on a mac. Again I opt for the higher ram and if possible get more storage. I also opt for the 3080 instead of the 3070 because I use it for gaming and would rather have the power than not. It is also usually in stock while the 3070 can be hard to find. The extra power is also a must if you are going to be doing game development or video processing.

Pros:

fast
can be used for gaming
powerful
great option for .Net developers (not using core)
great graphic card
good amount of storage

Cons

shorter battery life than others
16” can be big for some people
heavier than others

Asus ROG Zephyrus G15

This is actually the current laptop that I have as my travel laptop. It is such a beast of a computer for a great price. It isn’t too heavy and has enough power for gaming as well as web development. If you want the best screen around this isn’t the best choice you get a lot for your money with this laptop. You get a great amount of storage and RAM in a small laptop for around $2000. I have last years’ version and since then they have unfortunately raised the prices I think due to the expense of the new graphics cards but I still think this years’ is a great choice for a great price. They do have a cheaper option with a 3060 instead of a 3070 personally I think it’s worth the extra for the better graphics card but I also play some graphics-intensive games. Again if you are doing .NET development (not core but anything other than core) you will want to opt for a PC as you won’t be able to do it on a mac.

Pros:

fast
can be used for gaming
powerful
great option for .Net developers (not using core)
good graphics card
good amount of storage
affordable (especially the 3060 option)

Cons

shorter battery life than others
heavier than others
some people complain about the backlight on the keyboard

Dell XPS 15

If you are a .Net developer or work in a PC shop you will most likely have used this before or may currently be using it. Say what you will about dell but I never had issues developing on an XPS. They are a super solid option if you are doing web development as they are plenty powerful but don’t have all the bells and whistles that you pay extra for in other computers. I don’t think they are the best option for gaming devs or people who want to also use their laptops for gaming but if you just want to use your computer for development this is a very solid option and a total powerhouse for the money.

Pros:

fast
reliable
great option for .Net developers (not using core)
lots of storage for the money
good processor for the money
can be upgraded
very portable

Cons

not great for gaming
cooling isn’t great
CPU throttles pretty quickly

Lenovo ThinkPad P15s Gen 2

This a great very portable option. They are lighter than a lot of the other computers mentioned. They aren’t a powerhouse like the previously mentioned laptops but unless you are needing a lot of processing power (game development, gaming, video editing, big data processing (I don’t know why you’d do this on a laptop)) you don’t need it. This option is more affordable and still very nice

Pros:

affordable
nothing more than you need
very light and portable
good option for .Net developers (not using core)
good storage
durable
can be upgraded
battery life

Cons

not for gaming
looks kind of old (still has the mouse in the center of the keyboard)
cooling isn’t great

I hope this helps you when deciding on your next laptop you really can’t go wrong with any of the options just keep in mind the type of development you want to do and what else you may want to do on the laptop.

You Aren’t Going to Need It (YAGNI) Principle Explained

Hello Dev World Blog — Wed, 16 Nov 2022 05:53:50 +0000

A long time ago I read this great article from Martin Fowler explaining what YAGNI was. When I brought up this principle to a couple people the other day they had never heard of it. It seems more than ever with so many people coming out with “the right way” to do things and so many different options that are becoming available to come back and remember this principle.

YAGNI - You aren’t going to need it

You may look at this principle and say “well duh” OR you may be one of those people who look at it and say well what if you do that’s why we implement things to begin with to make our future lives easier. You also may think this may be pretty straight forward. But think how many times in the last week have you implemented something because you thought you MIGHT need it or implemented something in a way that may have been more complicated but it was more open ended so if you wanted to add something to it later you could.

Premature optimization/implementation

That leads us to one of the things this principle tries to keep us away from which is premature optimization or implementation. There is no reason to implement something more complicated just so that down the road you may be able to make it more flexible. This makes the code more unmaintable and can lead to more complication by trying to make it fit too many scenarios rather than the scenario it was originally intended for. We see this a lot with API endpoints where we build these endpoints that can accept everything and do everything based off flags when really the endpoints should be very specific to the exact information you need.

This goes hand in hand with premature optimization. If you think something may be reusable don’t make it reusable until it needs to be don’t add a layer of complication and abstraction just because you think in the future it may be reusable. Make it reusable when the A/C calls for it and no sooner.

YAGNI even goes as far as to say even if you know its in the pipeline for a quarter or two down the road don’t implement it until you need to. Right now implement what you know needs to be implemented. Get the feature out. When you need to implement the next part of it update it as needed then. Don’t make it more complicated now for the potential in the future just get the feature out.

It’s a bit extreme

YAGNI as a principle I think is really great and something we should all be keeping in the back of our minds. Rather than building these crazy applications that can do a million things with ease of potential future in mind we should be trying to tackle the issues in front of us. However, YAGNI as a principle as layer out in ExtremePrinciples is just that… Extreme. It takes to to a level that you have to start outweighing the cost of those decisions (just like any other decision including going the non YAGNI route). It can be very costly both time and effort to not keep the future in mind when building out applications. The cost and effort of refactoring to allow for certain things in the future can be a huge lift with a lot of dev time.

This trade-off is something that Martin Fowler mentions at the bottom of his article as well. Sometimes it can cause an issue to be too strict and to not take the future into consideration.

So do I follow YAGNI?

Yes and no. While I think YAGNI as a principle is a great concept I lean more in the middle of the road. I think not bringing in libraries until they are needed, or not making things optimized/reusable until they need to be is something really important that we should all keep in mind while developing. While trying to account for all future possibilities is great it also comes as a cost of having to support that extra functionality that is usually more complicated just so that maybe one day it can be flexible IF you need it. I think there should be a balance just like everything else

Top 5 VS Code (Visual Studio Code) Extensions Every Developer Should Have

Hello Dev World Blog — Mon, 03 Jan 2022 15:38:57 +0000

Throughout the years I have tried a lot of different Visual Studio Code extensions but there are a few extensions that I always download with every new computer and struggle to work without.

1. GitLens

This extension is by far the most useful extension in VS Code. Most people use it just to see inline who made the last commit for each line and what the commit message was. HOWEVER, what most people don’t know is it also lets you see each commit diff that has been made on that file and the changes that were made. This makes it really easy to see where an issue may have occurred and where you should start debugging at, what mistakes you had made, or potentially what changes you have made locally that may have caused an issue. It can also give you some insight about the progression of the file to get a better understanding of requirements and so you don’t fall into the same traps someone before you may have already fallen into.

2. ESLint/Prettier

Depending on your setup or your team’s setup you may use ESLint, Prettier, or both. This extension makes it really easy to see where your mistakes are, gives you a point and click the option to fix most of them, and auto formats for you. These are based on rules your set or the default rules that they provide for you. This helps keep your code clean and readable and can help you figure out where you may be. missing that stupid bracket since your format will start looking off once it hits that spot that is missing one.

3. Bracket Pair Colorizer

Speaking of a missing bracket… This extension colors your brackets and parens n pairs. This makes it easier to see where all your brackets are and which bracket they match up to. This makes it easier to see where you may be missing one and can help you see where your functions are efficiently.

4. React/Vue/Angular snippets

Whichever library you are working with I strongly suggest you download the snippets for them. They will help you with formatting and will give you the formats for things like imports, functions hooks, etc. by starting to type what you want and pressing “tab”. It will be a huge time saver!

5. Styled-components snippets/SCSS Intellisense

This one is another time-saver. It will show you where your errors may be, attributes that don’t exist that you may have written, and can help you again with formats. The styled-components one is very helpful because without it the code editor will not catch any errors or wrong attributes in your styled components files because the code editor doesn’t know how to check it. This will save you so much time when you accidentally spell something wrong or use the wrong casing like “alignItems” instead of “align-items“.

BONUS - Path Intellisense

This extension can save you so much time on your imports. Instead of having to track down where your files are this will bring in the path for you. This can get a little tricky/not work with scoped imports but other than that works like a charm. This is also great because you can set it to bring in the import when you try to use something that hasn’t been imported yet. Again you have to be careful with scoped imports but this extension is great.

BONUS 2!- Atom One Dark Theme and Material Icons

Let’s be real. Everyone knows the most important part of your code editor is the theme. I use the Atom One Dark theme. I just like the color palette especially for all the different languages I use the color structure just works well for me and makes it easier to read. I also download the Material icons extension because I think they just look better.

5 Tips To Improve Your JavaScript Debugging Skills and Save You Time

Hello Dev World Blog — Mon, 27 Dec 2021 19:52:33 +0000

1. Become comfortable using your browser inspector

If you are doing web developer or even some app development your web browser will be your best friend and worst enemy. But you know what they say if you can’t beat them join them. But in all seriousness learning how to take advantage of the inspector your browsers have given you will help you immensely.

If you have never used the inspector if you right-click on any webpage there will be an option at the bottom of the menu that pops up called “inspect” this will bring up a window. This window will show you the webpage’s code and allow you to interact with it. You can change CSS, there is a console to test javascript code, and you can see how your compiler is compiling your code into HTML.

Learning how to use this will allow you to quickly understand if your code isn’t rendering the way you think it should. Most importantly you can mess with your styling all you want, see it update right away, and if you really mess it up you can just refresh and it’ll be back to the code from your editor. You can also just turn certain styling off and on to test certain attributes. This makes the painstaking styling debugging so much easier and faster.

This is also where your code breaks (debugger) will show up if you set them up. The console allows you to test your Javascript code and variables at the time of where your debugger stopped. This allows you to quickly and easily test your javascript state and variables while it is running if you are having state issues and don’t want to mess with a bunch of console logs or if they aren’t helpful. It also has helpful information within the debugger for state and allows you to step through the code line by line.

If you think you are not receiving the data you are expecting or if you are not understanding what is going on with an API check out the network tab. This will show you all of your API calls and their responses. This will help you understand why a call may be failing or if the API is sending the wrong data or you aren’t handling that data properly.

You definitely need to become one with the inspector it will make you so much more productive.

2. Use console logs

Using console logs can be very helpful if you aren’t sure exactly why or where something is breaking. It can be helpful to see if you are even getting into a function that you aren’t sure is getting hit, testing out some logic that may not be acting as expected, or even state or props something is receiving that may not be working as expected.

Using console logs can get messy very quickly and can easily become hard to trace. To make it a little easier I always add a line number. For instance:

console.log(12, 'test')

12 being the line number. The number turns a different color so it makes them easier to see. It also points to what line number your log is on so they don’t get confusing. If there are multiple files it may be easier to add the file name in the console log as well. such as,

console.log(12, `nav bar file: ${codeToTest}`)

Having helpful console logs will make things much easier, faster, and less frustrating.

3. Download helpful tools for your code editor

No matter what code editor you use you should be able to download extensions or tools to help you be more efficient. Downloading the tools for the file you are using and linting tools can help you catch errors before even running your code. This can also help you trace where code is being used both in and outside your file which can help track down areas that also may be affected by your changes.

Some extensions I use are (you can read more about them in this article):

Prettier
ESLint
HTML Snippets
ES7 React/Redux/GraphQL/React-Native snippets
GitLens - allows you to quickly and easily cycle through previous commits for files - SUPER helpful
SCSS Intellisense
styled-components snippets - super helpful if you use styled-components
Remote extensions (not a debugger one just great also may need multiple to fully work) - for VS Code allows you to code off a server rather than your local computer keeps all your snippets and code in one place without having to worry about what computer you are on

4. Download helpful tools for your web browser

Most browsers (especially chrome) have tools you can download for your browser to help make your life easier. If you are using React or Vue I strongly recommend you download their respective tools. These tools give you great insight into your store/state and also have built-in debuggers. These extensions will help you debug your React and Vue project much faster.

There are other tools as well for testing things like CORS, APIs (through postman), and viewing JSON. You can get JSON formatters, Postman extensions, and tools that allow you to turn CORS off and on. These all make it faster to test things all in one place, read your responses more easily, and quickly toggle settings without having to change any code or wait for a rebuild. Here are some of the extensions that I use:

JSON Formatter
CORS Toggler - adds Access-Control-Allow-Origin: * rule to the response header.
React Developer Tools
Postman Interceptor - Sends requests fired through the Postman chrome app.
Redux DevTools
Vue.js devtools
Git Patch Viewer

5. Understand how the language you are working in works

This one may sound odd but better understanding how the language you are working in works under the hood can make debugging much easier. Knowing how your language rerenders, how the loops work, how async works, all helps to understand why certain errors may be happening. It will help you understand why a loop may happen too many times, why your state isn’t quite what you expect, or why data may not be coming back when you expect. Taking the time to understand

JavaScript Beginners Guide - Array

Hello Dev World Blog — Fri, 06 Aug 2021 22:40:07 +0000

Here is a printable guide to arrays. These are commonly used simple array functions and how they work with examples.

This is the first of a new series I am doing let me know if there is a better format you would prefer!

Best Laptops for Software Development in 2021

Hello Dev World Blog — Fri, 11 Jun 2021 22:28:47 +0000

This post contains affiliate links. If you use these links to buy something I may earn a commission. Thanks.

So, I often get asked what the best computer for doing software development is and I kind of hate that question because the answer is it depends. Are you only going to use it for software development? What else do you want to do on it? What operating system do you want? What kind of development are you going to be doing? So ya. It depends and arguably you could do development from just your phone. Nothing special needed. However, I will do my best to make a top 5 list of best laptop choices for software development (in no particular order).

1. MacBook Pro 13”

Okay so this is a hot topic but I love using a MacBook for development. I’ve been using them for years and never had issues. It’s also a must-have if you are doing ruby development as you may run into issues with it on a PC. The reason I say a 13” MacBook Pro is because the 16” versions don’t have the M1 chip yet. It is on its way but not out yet. When that comes out I will be updating this for that instead. You can never have too much real estate when developing especially for web developers. If you are looking to do App development and want to support apple devices an iMac or MacBook Pro will be a must-have as you need them to compile your apps and release them to the store. If you are a game engineer the screens on the MacBooks are incredible and with the new M1 chips you shouldn’t have any issue with processing power although they may run a little hot. I also get the higher RAM and storage because I would rather have more and not need it than need it but not have it.

2. Razer Blade 15

If you are leaning more towards a pc the razer blade 15 with a RTX 3070 is a great choice. I love this laptop because is a beast and super portable. I used to have this laptop for traveling because I liked that I could do work and gaming on the laptop. If you want a lot of power in a small laptop this is a great choice. The screen is also amazing. It also has plenty of processing power for the game developers and a great screen for them to work on. If you are doing .NET development (not core but anything other than core) you will want to opt for a PC as you won’t be able to do it on a mac. Again I opt for the higher ram and if possible get more storage. I also opt for the 3070 instead of the 3060 because I use it for gaming and would rather have the power than not. The extra power is also a must if you are going to be doing game development or video processing.

3. Asus ROG Zephyrus

4. Surface Pro

I have always found surface pros really interesting. At this point, they are a great very portable option. However, they are more like tablets which bother some people. They do run the full Windows OS and can definitely handle web development. I wouldn’t choose this if you are a game developer as I don’t think it would have enough processing power. But if you are looking for a lightweight very portable option for development definitely check one of these out! One these I actually opt for the cheaper options because you won’t be using this for much more than web development or basic web browsing and I don’t think it’s worth the extra cost for the upgraded version with more RAM and storage as the lower version can handle everything you’d be doing on it. Again if you are doing .NET development (not core but anything other than core) you will want to opt for a PC as you won’t be able to do it on a mac although visual studio (the full IDE) does take a good amount of processing power usually so if you will be doing this I would consider the upgraded version of the surface

5. Dell XPS 15

*Bonus MSI Stealth

I have always been a huge MSI fan. My first laptop was an MSI and lasted over 5 years. They are a little more pricey but they have great customer service and are built really well. This MSI laptop will be able to handle anything and everything and is definitely a great investment especially if you are a game developer or would like to play games on this laptop as well. They do have cheaper versions of this laptop with similar specs. But, these are the specs I would go for especially if you are doing any gaming. If you don’t care a lot about refresh rate or playing a lot of processor-heavy games you can definitely go with the cheaper version though and they are still a great choice.

Overcoming Common Agile Software Development Struggles

Hello Dev World Blog — Mon, 19 Apr 2021 23:15:48 +0000

When it comes to software development, “agile” has been a buzzword at every company for the last couple of years. An agile methodology makes a lot of sense in theory, and tons of companies have started to implement it. Basically, agile software development is a software development methodology that relies on collaboration between cross-functional teams and the end-user or customer.

While the principles of agile are straightforward, implementing them in a way that enables your dev team(s) to rapidly build, scale, and deliver functionality to your clients or customers can be challenging.

Releasing a new or updated product often can be hard to manage, quick development can become messy and cause bugs, and getting feedback on major features of a new product without that new product being released can be hard.

So what are some things that can help alleviate some of these issues?

It comes down to creating an agile software development methodology that works for your software engineering team, your company, and your end-users. So we’ve laid out some quick tips on how to go about creating agile processes that work.

CREATE A RELIABLE RELEASE PROCESS

One of the major benefits of agile is the ability to rapidly iterate on an idea and quickly collect feedback from your users. However, if you don’t have a stable release process, you’ll quickly find yourself with a buggy system, unhappy customers, and a burnt-out development team. Yikes!

Each team will have their own set of nuances and constraints that will shape their release process, but here are 4 things we believe make up any successful agile release process:

Solid branching strategy/workflow
Automated CI/CD pipelines
Ephemeral environments
Application monitoring

BRANCHING STRATEGY/WORKFLOW

When your team is well-organized and knows how to quickly and safely release their code, the team can be a lot more productive and confident about their releases. Having a proper branching strategy is vital for a team to be sure they know what code is going out, where their code is in the pipeline, and how to properly and safely merge their code into the codebase. A workflow a lot of agile teams use and have found effective is Gitflow by Atlassian.

AUTOMATED CI/CD PIPELINES

Adding your automated tests to your pipelines will help ensure that the code that is about to be merged will not break the existing functionality. It will bring ease of mind that the changes will not have unintended consequences and is safe to merge.

At my current job, we don’t allow code to be merged until it has passed its unit tests and coverage, and then we run automated end-to-end tests later in the pipeline.

EPHEMERAL ENVIRONMENTS

Here’s how Ephemeral testing environments work: they are brand new environments that would be spun up every time a new feature is ready to be tested before merging it into the codebase. Once the feature is tested and merged into the code base, the environment would then be spun back down and no longer used.

These environments allow developers to test their specific feature in what already exists in production without affecting any other developer, being affected by messy data, or affecting any other developers that may be working on another feature.

APPLICATION MONITORING

Having monitoring in all your environments not only makes debugging easy and quick but also ensures that if something does go wrong, your developers are notified right away.

Most monitoring tools have integrations with messaging tools like Slack, that way your developers can not only get an email when something is broken but also a Slack message. We’ve found that when messages are sent through a messaging service, they’re more likely to be seen and handled faster.

Some additional monitoring tools we use at my current job are Splunk and Sentry—they’ve been invaluable!

IMPLEMENT FEATURE FLAGGING

Feature flagging is like a light switch—it allows developers to turn features off and on quickly, and it can even restrict or enable certain features for a particular subset of users. This allows features to get in front of users for testing without having to completely release the feature if the team wants to get feedback before rolling out to everyone.

Feature flagging also allows features to go out, and if they’re causing issues, they can quickly be turned off. This allows teams to push out features without worrying about breaking what’s already working and allows users to provide quick feedback.

Consider LaunchDarkly, which is our preferred product for feature flagging, but there are many other products that do this, too.

USE IFRAMES AND/OR PACKAGES

You may see this and think I’m crazy, but hear me out! If you’re replacing an old application with a new one, you might want to consider using iframes or packages. Here’s why.

By breaking out your new application into major features and iframing the new features or making your features into a package that can be brought into the old application, you can start getting pieces of the new application in front of users. The biggest benefit to this approach is that it allows the team to get feedback on features as they’re building (rather than at the end). That’s a huge efficiency!

Iframing also allows users to get used to the new features, and it allows iterative releases rather than a full application release all at once.

I hope this helps you on your agile development journey!

MongoDB Aggregation Pipeline Challenge 1 Solution

Hello Dev World Blog — Sun, 31 Jan 2021 20:31:15 +0000

This is an awesome challenge that my boss Justin sent me and thought it would be a fun one for you all.

Disclaimer: there are MANY ways to solve this challenge this is just Justin’s solution to this challenge

TLDR: If all you want to see is the aggregate solution it is in the franchiseeCustomerSatScoreBreakdown function

The Problem

Big Ice Cream Co is the largest ice cream franchisor in the US. Each of their 100+ franchisees has between 1 and 25 locations. Each location tracks its customer satisfaction score which can be below average, average, or above average. The CEO of Big Ice Cream Co wants to see a report that shows the customer satisfaction scores for each location grouped by franchisee.

Example:

|---------------------|---------------:|--------------|---------|--------------|----------------||

search | True | 1 | 10 | 14 | 25 ||

institutionCodes | False | 10 | 3 | 0 | 13 ||

aggregatorPartnerId | True | 0 | 3 | 0 | 3 |

This data is stored in the franchising MongoDB, there are two collections:

franchisee
locations

Franchisee schema

{
    companyName: { type: String },
    signedDate: { type: Date },
    owner: { type: String }
}

Locations schema

{
    franchiseeId: { type: ObjectId },
    address: {
        state: { type: String },
        city: { type: String },
        zip: { type: String },
        streetAddress: { type: String },
        secondaryAddress: { type: String }
    },
    customerSatisfactionScore: { type: String, enum : ['below average','average', 'above average'] }
}

The Solution

This solution is in JavaScript but there are many languages you can do this in.

First, let’s set up the basic file of everything we are going to need. getSatScoreCount and franchiseeCustomerSatScoreBreakdown are going to be helper functions and the customerSatBreakdown is going to be the main function that will set up the database and return the data. If you would like me to do a post on how to set up a JavaScript file like this let me know in the comments I would happy to do so!

This will set up the mongo client, get the data from the helper functions and create a CSV of the data we needed.

const fs = require('fs')
const { promisify } = require('util')
const { Parser } = require('json2csv')
const dotenv = require('dotenv-extended')
const { ObjectId, MongoClient } = require('mongodb')
const writeFileAsync = promisify(fs.writeFile)

const getSatScoreCount = (result, scoreName) => {}

const franchiseeCustomerSatScoreBreakdown = async ({ franchisingDb }) => {}

const customerSatBreakdown = async function () {
    try {
        // connect to db
        const db_url = process.env.DB_URL
        const dbClient = await MongoClient.connect(db_url,  { useUnifiedTopology: true })
        const franchisingDb = dbClient.db('franchising')

        const data = await franchiseeCustomerSatScoreBreakdown({ franchisingDb })

        const fields = Object.keys(data[0]).map(key => {
            return {
              label: key,
              value: key
            }
          })

        const json2csvParser = new Parser({ fields });
        const csvData = json2csvParser.parse(data);

        // write to JSON file
        await writeFileAsync('franchising-customer-sat-scores.csv', csvData, 'utf8')

        process.exit(0)
    } catch (error) {
        console.error(error.message)
        process.exit(1)
    }
}

dotenv.load({
    silent: false,
    path: '.env',
    errorOnMissing: false,
    errorOnExtra: false
})


customerSatBreakdown()

Now let’s put together the bread and butter, the aggregate. We are going to do an aggregate on the collection of the location of the database.

First, we are going to need to lookup. A lookup is a left join in mongo. If you don’t know what that is it takes the data from the left table and what is the same from the right table. Here is an image that may help understand better as well.

We are going to be doing this join on the frachisee table to get the franchisee with their location.

const franchiseeCustomerSatScoreBreakdown = async ({ franchisingDb }) => {
    const locationsCollection = franchisingDb.collection('locations')
    const results = await locationsCollection.aggregate([ 
      {
        $lookup:
        {
          from: "franchisee",
          localField: "franchiseeId",
          foreignField: "_id",
          as: "franchiseeInfo"
        }
    }
])

We then want to “unwind” the franchiseeInfo. This will destructure the franchisee info object. If we don’t have this when you get the data the franchiseeInfo will look something like this: franchiseeInfo: [ [Object] ]. When we add unwind it will look something like this:

franchiseeInfo: {
      _id: 6015a1f19ab3e80b64d50508,
      companyName: 'Waelchi Inc',
      signedDate: 2020-12-29T19:26:18.097Z,
      owner: 'Catherine Kozey'
    }

our aggregate will now look like this:

const franchiseeCustomerSatScoreBreakdown = async ({ franchisingDb }) => {
    const locationsCollection = franchisingDb.collection('locations')
    const results = await locationsCollection.aggregate([ 
        {
            $lookup:
              {
                from: "franchisee",
                localField: "franchiseeId",
                foreignField: "_id",
                as: "franchiseeInfo"
              }
        },
        { $unwind: "$franchiseeInfo" }
      ])

We are going to have 2 groups. The first group is going to be grouping all the locations with their customer satisfaction scores. This grouping will get the name of the franchisee company name, customer satisfaction score, franchisee id, and the count of the locations with that satisfaction score.

        { $group:{ 
            _id:{ franchiseeId:'$franchiseeId', satScore: '$customerSatisfactionScore', franchiseeName: '$franchiseeInfo.companyName' }, 
            locationsCount: { $sum: 1 } 
        }},

The second group is going to group each of the scores with the franchisee along with a total number of locations. This will make it from multiple records broken up for each franchisee to all of the sums of the scores for the franchisees and the total count all in the same record.

        { $group: {
            _id: { franchiseeId: "$_id.franchiseeId", franchiseeName: '$_id.franchiseeName' },
            scores: { 
                $push: { 
                    satScore: "$_id.satScore",
                    count: "$locationsCount"
                },
            },
            count: { $sum: "$locationsCount" }
        }}

Then we are going to throw that in an array. If you don’t do this your return type will just be an aggregate cursor (cursor to the document) and it won’t make any sense or be the data you want. By adding a toArray() you are pushing all that data into an array that you can actually use.

const franchiseeCustomerSatScoreBreakdown = async ({ franchisingDb }) => {
    const locationsCollection = franchisingDb.collection('locations')

    const results = await locationsCollection.aggregate([ 
        {
            $lookup:
              {
                from: "franchisee",
                localField: "franchiseeId",
                foreignField: "_id",
                as: "franchiseeInfo"
              }
        },
        { $unwind: "$franchiseeInfo" },
        { $group:{ 
            _id:{ franchiseeId:'$franchiseeId', satScore: '$customerSatisfactionScore', franchiseeName: '$franchiseeInfo.companyName' }, 
            locationsCount: { $sum: 1 } 
        }},
        { $group: {
            _id: { franchiseeId: "$_id.franchiseeId", franchiseeName: '$_id.franchiseeName' },
            scores: { 
                $push: { 
                    satScore: "$_id.satScore",
                    count: "$locationsCount"
                },
            },
            count: { $sum: "$locationsCount" }
        }}
    ]).toArray()

The rest of this is going to be how we are making the data able to be returned in aa csv with JavaScript.

Before we are going to return the data we want to get the scores from the scores group destructured. For this we are going to map over data get structure it how we want for the csv. For this we are going to use a helper function to pull the score out for each type of score.

const getSatScoreCount = (result, scoreName) => {
    const targetIndex = result.scores.findIndex(s => s.satScore === scoreName)
    return targetIndex !== -1 ? result.scores[targetIndex].count : 0
}

this is what our map is going to looks like as well.

    return results.map(result => {
    return {
        franchiseeId: result._id.franchiseeId,
        franchiseeName: result._id.franchiseeName,
        belowAverage: getSatScoreCount(result, 'below average'),
        average: getSatScoreCount(result, 'average'),
        aboveAverage: getSatScoreCount(result, 'above average'),
        totalLocations: result.count
    }
})

and thats it! this will be the full file.

const fs = require('fs')
const { promisify } = require('util')
const { Parser } = require('json2csv')
const dotenv = require('dotenv-extended')
const { ObjectId, MongoClient } = require('mongodb')
const writeFileAsync = promisify(fs.writeFile)

const getSatScoreCount = (result, scoreName) => {
    const targetIndex = result.scores.findIndex(s => s.satScore === scoreName)
    return targetIndex !== -1 ? result.scores[targetIndex].count : 0
}

const franchiseeCustomerSatScoreBreakdown = async ({ franchisingDb }) => {
    const locationsCollection = franchisingDb.collection('locations')

    const results = await locationsCollection.aggregate([ 
        {
            $lookup:
              {
                from: "franchisee",
                localField: "franchiseeId",
                foreignField: "_id",
                as: "franchiseeInfo"
              }
        },
        { $unwind: "$franchiseeInfo" },
        { $group:{ 
            _id:{ franchiseeId:'$franchiseeId', satScore: '$customerSatisfactionScore', franchiseeName: '$franchiseeInfo.companyName' }, 
            locationsCount: { $sum: 1 } 
        }},
        { $group: {
            _id: { franchiseeId: "$_id.franchiseeId", franchiseeName: '$_id.franchiseeName' },
            scores: { 
                $push: { 
                    satScore: "$_id.satScore",
                    count: "$locationsCount"
                },
            },
            count: { $sum: "$locationsCount" }
        }}
    ]).toArray()
    console.log(results)

    return results.map(result => {
    return {
        franchiseeId: result._id.franchiseeId,
        franchiseeName: result._id.franchiseeName,
        belowAverage: getSatScoreCount(result, 'below average'),
        average: getSatScoreCount(result, 'average'),
        aboveAverage: getSatScoreCount(result, 'above average'),
        totalLocations: result.count
    }
    })
}

const customerSatBreakdown = async function () {
    try {
        // connect to db
        const db_url = process.env.DB_URL
        const dbClient = await MongoClient.connect(db_url,  { useUnifiedTopology: true })
        const franchisingDb = dbClient.db('franchising')

        const data = await franchiseeCustomerSatScoreBreakdown({ franchisingDb })

        const fields = Object.keys(data[0]).map(key => {
            return {
              label: key,
              value: key
            }
          })

        const json2csvParser = new Parser({ fields });
        const csvData = json2csvParser.parse(data);

        // write to JSON file
        await writeFileAsync('franchising-customer-sat-scores.csv', csvData, 'utf8')

        process.exit(0)
    } catch (error) {
        console.error(error.message)
        process.exit(1)
    }
}

dotenv.load({
    silent: false,
    path: '.env',
    errorOnMissing: false,
    errorOnExtra: false
})

customerSatBreakdown()

I hope you all enjoyed this one! If there was something that you would like a more in-depth article about or something you need more explanation on please let me know in the comments below! If you would like to get an email when new articles are released sign up for the newsletter here! :)

What Not to Do as a Junior Developer

Hello Dev World Blog — Sat, 30 Jan 2021 17:47:52 +0000

Congrats! You have chosen the best and most overwhelming career. There are so many great things about being a developer or software engineer but do not fall into these pitfalls junior engineers frequently fall into!

1. Be a Smart Ass

You may think this is a given but you would be surprised how many junior developers have an attitude and that they know better than everyone. Let me tell you no matter how much faster you could do your work than the others in your class you do not know more than your senior developer and you have no reason to be cocky. No one likes helping someone with a bad attitude and trust me you will need help. You will quickly learn you really don’t know much at all and your senior developers can teach you SO much if you let them. So leave your ego at home.

2. Stay Quiet

Ask questions! As a junior developer people do not expect you to know everything and that is okay! However, they don’t know what you don’t unless you ask them! You also may ask questions that make the team think about how they have implemented something in a different way or bring up something they have never thought of. A fresh pair of eyes is always a good thing.

You are also allowed to have an opinion. Feel free to voice it with an open mind. Your higher-level developers may not know some technology that you are aware of, or they may have a reason they are doing what they are instead and they will explain to you why that is the better option for that situation.

3. Try to Learn a Bunch of Languages

Becoming a software engineer or developer can be super exciting but also daunting at the same time. There are SO many languages to learn and all kinds of fun stuff you can do. Half of what your senior is talking about you won’t understand but you’ll want to! Just slow down a second! Learning the foundations of development and of the specific stack you are working in is SO important. You will find yourself getting much further in your career by focusing on principals and a couple of languages than trying to learn all the languages and stacks. It is so important to understand the nuances of the stack you are in. Take your time to understand development principals and the stack your job is requiring you to understand before moving on from there. Principals and a lot of the base knowledge will transfer to other languages. You will find picking up languages is much easier when you understand the principles and designs behind software development.

Also start thinking about what kind of development you want to do and focus on that area. Do not try to be an app developer, a web developer, a machine learning developer, and a game developer all at once. They are all SO different. It is okay to dabble to really try and understand what may interest you long term but once you know what path you want to take focus on one thing at a time. It will help you more in the long run.

4. Focus on Frameworks

I see SO many juniors trying to learn a bunch of different frameworks and skip the basics because why would you use the basics of the framework does it for you?! Well, there are a lot of reasons.

The main reason is to understand what the framework is doing. Reading docs for frameworks and APIs will be a struggle if you don’t understand what they are doing under the hood. Frameworks aren’t always the best way to go either. You need to understand what the framework is doing so that you can make an educated decision on which to use or if you should use it at all.

Frameworks are always changing but the underlying languages don’t change as much. React, Vue, and Angular are all very different but at the end of the day, they are all JavaScript. Understanding how JavaScript as a base language works will help you better understand how the frameworks function and how what they are doing affects state, performance, and other functions within your application. You will be able to catch issues before you even run into them that you wouldn’t if you didn’t understand the underlying language.

Debugging can also be a struggle. In Javascript for instance you could be implementing an async-await call and try to log out the response and get. [Promise] or you may be erroring with “unresolved promise” and you are like what’s a promise?! Then struggle on how to fix your issue or how to see what you actually wanted. In case you don’t know in JavaScript async-await is really a wrapper around promises.

Extra: Performance isn't something junior developers should worry about too much but it is important. It also happens to not always the best with frameworks either. For instance in JavaScript to flatten an array you can use .flat() but it is horribly inefficient. If you know more of the basic language you can easily write a performant loop to do the same thing. But also understanding the difference is something you should take the time to learn.

5. Burn Yourself Out

There is so much to learn and so much to do that you may feel overwhelmed. It may make you obsess over what you don’t know and everything you need to learn. This is a very deep rabbit hole that will never end. Try not to obsess over it! You will quickly burn yourself out and trust me you will need the energy and passion throughout your career. You have chosen a unique career that moves faster than any other career and that you will need to continuously learn how to do your whole career. Try not to burn out so that you can be the best developer you can be for more than a few years. It may not seem like you are burning yourself out but you will all of a sudden hit a wall and it will suck. Seriously take time off and don’t overwork yourself. You will thank yourself later!

I hoped this helped and I hope you love being a software engineer as much as I do. It’s an amazing unique career but can also be a lot! Take your time! Enjoy your time as a Junior Developer to learn and stoke your passion for it before people actually expect things from you ;p

If you want to be notified when new content comes up sign up for the newsletter! :)

MongoDB Aggregation Pipeline Challenge - Challenge 21

Hello Dev World Blog — Fri, 29 Jan 2021 23:55:42 +0000

Another Challenge!

Example:

|---------------------|---------------:|--------------|---------|--------------|----------------||

search | True | 1 | 10 | 14 | 25 ||

institutionCodes | False | 10 | 3 | 0 | 13 ||

aggregatorPartnerId | True | 0 | 3 | 0 | 3 |

This data is stored in the franchising MongoDB, there are two collections:

franchisee
locations

Franchisee schema

{
    companyName: { type: String },
    signedDate: { type: Date },
    owner: { type: String }
}

Locations Schema

{
    franchiseeId: { type: ObjectId },
    address: {
        state: { type: String },
        city: { type: String },
        zip: { type: String },
        streetAddress: { type: String },
        secondaryAddress: { type: String }
    },
    customerSatisfactionScore: { type: String, enum : ['below average','average', 'above average'] }
}

As usual, I will be posting the solution in another post! I will post this solution with an explanation tomorrow!

DEV Community: Hello Dev World Blog

5 Web Development Languages to learn in 2023

1. JavaScript/TypeScript

2. Python

3. Java

4. Go

5. Kotlin

BONUS! - Rust

Best Laptops for Software Development in 2023

MacBook Pro 16”

Acer Predator Triton 500 SE

Asus ROG Zephyrus﻿﻿ G15

Dell XPS 15

Lenovo ThinkPad P15s Gen 2

You Aren’t Going to Need It (YAGNI) Principle Explained

Premature optimization/implementation

It’s a bit extreme

So do I follow YAGNI?

Top 5 VS Code (Visual Studio Code) Extensions Every Developer Should Have

1. GitLens

2. ESLint/Prettier

3. Bracket Pair Colorizer

4. React/Vue/Angular snippets

5. Styled-components snippets/SCSS Intellisense

BONUS - Path Intellisense

BONUS 2!- Atom One Dark Theme and Material Icons

5 Tips To Improve Your JavaScript Debugging Skills and Save You Time

1. Become comfortable using your browser inspector

2. Use console logs

3. Download helpful tools for your code editor

4. Download helpful tools for your web browser

5. Understand how the language you are working in works

JavaScript Beginners Guide - Array

Top Senior Front End Engineer Interview Questions and Answers (React Focused)

1. What is your philosophy on reusable components vs simplicity and premature optimization?

2. How would you explain a useEffect to a junior engineer?

3. What are major pitfalls or common issues people face with hooks?

4. If you are getting too many API calls being made from your hooks what can you do to prevent this?

5. Explain the javascript event loop (also may get explain how promises or async await work in js these are basically all the same question/answer)

Why should we not directly update state (using DOM manipulation)?

6. What are a couple of easy to avoid front-end security pitfalls?

7. What is Virtual DOM and how does it work?

8. What is the difference between Shadow DOM and Virtual DOM?

Best Laptops for Software Development in 2021

1. MacBook Pro 13”

2. Razer Blade 15

3. Asus ROG Zephyrus﻿﻿

4. Surface Pro

5. Dell XPS 15

*Bonus MSI Stealth

Overcoming Common Agile Software Development Struggles

CREATE A RELIABLE RELEASE PROCESS

BRANCHING STRATEGY/WORKFLOW

AUTOMATED CI/CD PIPELINES

EPHEMERAL ENVIRONMENTS

APPLICATION MONITORING

IMPLEMENT FEATURE FLAGGING

USE IFRAMES AND/OR PACKAGES

MongoDB Aggregation Pipeline Challenge 1 Solution

The Problem

The Solution

What Not to Do as a Junior Developer

1. Be a Smart Ass

2. Stay Quiet

3. Try to Learn a Bunch of Languages

4. Focus on Frameworks

5. Burn Yourself Out

MongoDB Aggregation Pipeline Challenge - Challenge 21

Asus ROG Zephyrus G15

3. Asus ROG Zephyrus