DEV Community: mfalconi

Earth Day Frontend Challenge: Our Little Blue Dot 🌎

mfalconi — Sun, 28 Apr 2024 16:32:44 +0000

This is a submission for Frontend Challenge v24.04.17, CSS Art: Earth Day.

Inspiration

For me, this is a whole new realm of front end development. Working as a full-stack dev I rarely have the need to utilize any type of complex CSS animations. I have been looking for new opportunities to sharpen my CSS skillset and this was the perfect opportunity. In the past year, I learned the basics of SCSS via bootstrap extension and customization. This challenge provided me the opportunity to work with more complex concepts such as SCSS functions and dynamic SCSS variable creation. It also helped enhance my understanding of the syntax and solidify my knowledge of more complex CSS animation. Looking at some of the other amazing entries I know I still have much to learn, but overall I feel like I have made great strides on my journey and I have a blast putting this all together.

Demo

Journey

Overall this was a labour of Love ❤️. The biggest challenge for me was fully developing my understanding of how CSS animations actually work; the different possible combinations of animation timing and direction and how assets can be mapped and manipulated in accordance with their size and animation requirements was interesting. Particularly utilizing element backgrounds to provide different perspectives to create the illusion of more than a 2D perspective.

One big new concept for me was using SCSS to dynamically apply style to an array of elements while also generating dynamic values like I did with the stars. This was important as it reduced so much of what I would have had to do if I had stuck with vanilla CSS. It was the implementation of the stars that led me to convert my CSS to SCSS given the sheer number of elements I wanted to have in the space.

Originally I had just started with a spinning earth, I wanted to somehow create the continents using CSS however this was one aspect I could not achieve. I ended up experimenting with mapping background images on the container, getting the repeat animation seamless was probably the biggest issue I faced in this regard. I ended up having to play with a range of px values for the final keyframe positions. Once this was done, I saw some of the other challenges posted and took inspiration from them @arndom clouds were very cool and I decided to attempt my own (single lonely cloud) . I found maintaining the shape of the cloud at larger scales was challenging, and utilized ::before ::after pseudo elements to get the shape I wanted. Playing with the border radii and box-shadows seems to have provided a solid cartoonish look which I think fits well with the rest of the design. I also saw some space backgrounds I thought were very cool like @jorgedelcampo and so I opted to also attempt to place my earth in a star filled sky. This is what led me to generating the dynamic falling stars. This was definitely the most difficult challenge. It took much research to properly develop the positioning, alignments, design and timing. And was ultimately the reason I opted for SCSS. The lack of JS was challenging as I wanted to also have the number of stars created be dynamic, however this was problematic given the fixed html elements so I was forced to use a fixed value for the star count. In a future project I would also likely opt for an html templating tool like pug or handlebars to reduce the markup I had to manually create (literally 50 star divs lol). I find that this hardcoding of the elements makes the html clunky and annoying to change.

One other issue I faced was maintaining responsiveness. I think my solution to some of the positioning could have been better, but I currently did not find a better method than a few select media queries for specific item positions. The clouds and star particularly were the issue. Their placement on smaller screens was an issue, the stars would show before their fall, and the cloud got too close to the earth. This is where I was forced to use the media queries. If anyone could suggest a better implementation I would love to hear it. Complex front end design is still somewhat new to me, so combining the different positioning styles may not have been the correct choice here, but it still accomplished what I intended.

Overall this was an awesome experience, and I took inspiration from many different sources. Looking at various tutorials and the MDN docs were critical to me getting my animations the way I wanted. Alas, my entry is not perfect, but it is 1000x better than I expected. And I am content with this.

Thank you checking it out and reading, Happy (belated) Earth Day 🌎🚀🖖 Live long and prosper

Lessons Learned Pt 2.0: To Comment XOR not to Comment that is the Question 🤔

mfalconi — Thu, 18 Apr 2024 16:41:30 +0000

Good day fellow nurdz 😎

In my last post I touched on the importance of documentation and how it can be a useful tool for both developers and organizations alike. Today I want to focus on clarifying proper use cases for another important facet of any dev toolbox 🧰. Now be warned, this is a controversial stance BUT:

In this segment I want to explore the importance of an often underappreciated and frequently misunderstood and misused concept in programming.

Lesson 2.0 // Comments

This is a topic that I see often hotly debated in various developer forums. There's typically dichotomous a division in such discussions wherein one groups' premise is that code should be self documenting and obvious and therefore comments are redundant and/or unnecessary. Party two often rebuttals no, comments should be used to explain code. Now these sentiments are not reflective of the real world. Life often isn't as polarizing IRL but these perspectives do exist, and having spent some time in a variety of code bases, I'd like to offer my insight for those just starting out.

I think both arguments above make valid points, but like many binary options; the gray areas of which the real world is made from are totally ignored. Both perspectives offer important insight but this does not make them mutually exclusive.

Code should definitely be self documenting and in most cases, understandable to any competent developer familiar with the language/framework. This is a simple concept in theory but in practice it becomes more complicated. What is readable to you might not be immediately clear to me or vice versa. Example: Working with new or less commonly used language features in teams comprised of developers of varying experience might lead to instances where some people have no issue with code readability. Whereas others may look at it and be uncertain what to make of it.

Comments can help elucidate logic to unfamiliar eyes so that at least the reader can know where to start looking to begin developing their understanding.

In Most cases you really shouldn't need to explain what your code does, BUT and this is a big 🍑comments SHOULD be used to provide context around the code. Why is this class needed, how/where is it used, and often this can include business requirements for certain things. Oftentimes in long lifecycle projects, the maintainer of some code will not be the original author of it. They may have no idea why certain decisions were made, and comments can provide the context behind the code. A good example of this is GEO IP Restrictions. Take a look at this VB.NET Server code.

VB.Net Code

select case s_country
    '--------------------------------------------------------------------------------   

    'Download is not available in some countries:
    'Afghanistan, Belarus, Burma, Central African Republic, Cuba, Democratic Republic of the Congo, Ethiopia, Iran, Iraq, North Korea, Kosovo:, Lebanon, Libya, Mali, Nicaragua, Russia, Samoa, Somalia, South Sudan, Sudan, Syria, Venezuela, Yemen, Zimbabwe - strings are ISO Country Codes
    ' XK is temp code for Kosovo
    case "AF","BY","MM","CF","CU","CG","ET","IR","IQ","KP","LB","LY","ML","NI","RU","WS","SO","SS","SD","SY","VE","YE","ZW", "XK" 'ISO 3166 Country Codes

    s_msg="<html><body onload=""alert('Download not available in your region');""></body></html>"
    Response.ContentType = "text/html"
    Response.Write s_msg
    Response.end

    '--------------------------------------------------------------------------------

    'Download is available in any other countries
    case else


    if s_site="www.supercoolwebsite.com" then
        FileCheck(s_file_relative_link1)
    end if
    SendFileToResponse s_file_relative_link1, s_file_name1
    Response.end

    '--------------------------------------------------------------------------------   

end select

Now Imagine trying to make sense of that string at the top without any indication what the string represents. Sure the case is s_Country so most likely we can quickly deduce they are country codes, but perhaps you wonder why are we returning an error response for these country codes? In this case the comments make it clear. This is a business logic rule. It provides insight into why this function exists, as well as some basic explanation for how it works. It would have been better had there been some explanation for what and where the variables represent and come from respectively, but still something is always better than nothing.

Here's another example where I think having some brief explanation can do more than any self documentation coding style can. The below snippet is some code I wrote for a new product filter system my team was working on. Take a look at the first sample. No comments or anything, just code with semantic names and clear and concise implementation. How long would it take you to understand the below code and get an idea of how its used within a massive web application?

Comment free snippet

public class ProductSelectorUtil
{
    private readonly ProductContext _productContext;

    Func<ProductContext, IEnumerable<Converter_options_view>> LoadConverterOptions = 
        EF.CompileQuery(LoadConverterOptionsExp);

    Func<ProductContext, IEnumerable<Converter_options_view>> LoadSwitchOptions =
        EF.CompileQuery(LoadSwitchOptionsExp);

    Func<ProductContext, IEnumerable<Supply_options_view>> LoadSupplyOptions =
        EF.CompileQuery(LoadSupplyOptionsExp);

    public ProductSelectorUtil(ProductContext productContext)
    {
        _productContext = productContext;
        _productContext.ChangeTracker.QueryTrackingBehavior = QueryTrackingBehavior.NoTracking;
    }

    public static Func<ProductContext, List<MediaConverterView>> LoadAllConverters =
        EF.CompileQuery((ProductContext context) => context.MediaConverterView.ToList());

    public static Func<ProductContext, List<SwitchView>> LoadAllSwitches =
        EF.CompileQuery((ProductContext context) => context.SwitchView.ToList());

    public static Func<ProductContext, List<PowerSupplyView>> LoadAllSupplies =
        EF.CompileQuery((ProductContext context) => context.PowerSupplyView.ToList());

    static Expression<Func<ProductContext, IQueryable<Converter_options_view>>> LoadConverterOptionsExp = context =>
        context.Converter_options_view
            .OrderBy(option => option.Id)
            .ThenBy(option => option.Columnvalue);

    static Expression<Func<ProductContext, IQueryable<Converter_options_view>>> LoadSwitchOptionsExp = context =>
        context.Converter_options_view
            .OrderBy(option => option.Id)
            .ThenBy(option => option.Columnvalue);

    static Expression<Func<ProductContext, IQueryable<Supply_options_view>>> LoadSupplyOptionsExp = context =>
        context.Supply_options_view
            .OrderBy(option => option.Id)
            .ThenBy(option => option.Columnvalue);


    public ProductSelectorViewModel InitLoadMediaConverters()
    {
        ProductSelectorViewModel viewModel = new();
        List<Converter_options_view> options = LoadConverterOptions(_productContext).ToList();
        viewModel.MediaConverters = LoadAllConverters(_productContext);
        var propertyNames = typeof(Product_Selector_Media_Converter_Tables)
            .GetProperties()
            .Select(prop => prop.Name)
            .ToList();

        foreach (var propName in propertyNames)
        {
            var distinctValues = viewModel.MediaConverters
                .Select(
                    item => item.GetType().GetProperty(propName)?.GetValue(item)?.ToString()
                )
                .Where(value => !string.IsNullOrEmpty(value))
                .Distinct()
                .ToList();
            if (
                propName != "data_order" & propName != "model"
                && propName != "image_alt_tag"
                && propName != "part_number"
                && propName != "category_id"
            )
            {
                ProductFilter filter = new();
                filter.FilterLabel = $"{propName}";
                distinctValues.ForEach(v =>
                {
                    int? order = options
                        .Where(o => o.Columntitle == propName && o.Columntext == v)
                        .Select(o => o.Columnvalue)
                        .FirstOrDefault(-1);
                    CheckBox c = new(0, propName, v, false, order);
                    filter.FilterOptions.Add(c);
                });
                filter.FilterOptions = filter.FilterOptions.OrderBy(o => o.Order).ToList();
                viewModel.ProductFilters.Add(filter);
            }
        }
        return viewModel;
    }
}

Here is the same code with some basic comments to help elucidate some context and use cases. How much quicker does the codes' usage become clear?

Commented snippet

/// <summary>
/// Injectable dependency
/// Product Selector Utility class
/// Contains all logic used to manage the data and view state not handled by controller or view model.    
/// Includes as DB access logic.
/// Implements Static Compiled Queries for common db operations
/// </summary>
public class ProductSelectorUtil
{
    private readonly ProductContext _productContext;

    Func<ProductContext, IEnumerable<Converter_options_view>> LoadConverterOptions = 
        EF.CompileQuery(LoadConverterOptionsExp);

    Func<ProductContext, IEnumerable<Converter_options_view>> LoadSwitchOptions =
        EF.CompileQuery(LoadSwitchOptionsExp);

    Func<ProductContext, IEnumerable<Supply_options_view>> LoadSupplyOptions =
        EF.CompileQuery(LoadSupplyOptionsExp);

    public ProductSelectorUtil(ProductContext productContext)
    {
        _productContext = productContext;
        _productContext.ChangeTracker.QueryTrackingBehavior = QueryTrackingBehavior.NoTracking;
    }

    /* 
     * Compliled Queries 
     * These are optimized queries used for EF core
     */
    public static Func<ProductContext, List<MediaConverterView>> LoadAllConverters =
        EF.CompileQuery((ProductContext context) => context.MediaConverterView.ToList());

    public static Func<ProductContext, List<SwitchView>> LoadAllSwitches =
        EF.CompileQuery((ProductContext context) => context.SwitchView.ToList());

    public static Func<ProductContext, List<PowerSupplyView>> LoadAllSupplies =
        EF.CompileQuery((ProductContext context) => context.PowerSupplyView.ToList());

    static Expression<Func<ProductContext, IQueryable<Converter_options_view>>> LoadConverterOptionsExp = context =>
        context.Converter_options_view
            .OrderBy(option => option.Id)
            .ThenBy(option => option.Columnvalue);

    static Expression<Func<ProductContext, IQueryable<Converter_options_view>>> LoadSwitchOptionsExp = context =>
        context.Converter_options_view
            .OrderBy(option => option.Id)
            .ThenBy(option => option.Columnvalue);

    static Expression<Func<ProductContext, IQueryable<Supply_options_view>>> LoadSupplyOptionsExp = context =>
        context.Supply_options_view
            .OrderBy(option => option.Id)
            .ThenBy(option => option.Columnvalue);




    /// <summary>
    /// Loads all initial data for mc product selector
    /// including all filter options and product list
    /// </summary>
    /// <returns></returns>
    public ProductSelectorViewModel InitLoadMediaConverters()
    {
        ProductSelectorViewModel viewModel = new();
        List<Converter_options_view> options = LoadConverterOptions(_productContext).ToList();
        viewModel.MediaConverters = LoadAllConverters(_productContext);
        //grab all possible property filters from Model
        var propertyNames = typeof(Product_Selector_Media_Converter_Tables)
            .GetProperties()
            .Select(prop => prop.Name)
            .ToList();

        foreach (var propName in propertyNames)
        {
            //filter all distinct options -- required due to redundant / unnormalized database data
            var distinctValues = viewModel.MediaConverters
                .Select(
                    item => item.GetType().GetProperty(propName)?.GetValue(item)?.ToString()
                )
                .Where(value => !string.IsNullOrEmpty(value))
                .Distinct()
                .ToList();
            //exclude all options we wont filter by but still need to show
            if (
                propName != "data_order" & propName != "model"
                && propName != "image_alt_tag"
                && propName != "part_number"
                && propName != "category_id"
            )
            {
                ProductFilter filter = new();
                filter.FilterLabel = $"{propName}";
                distinctValues.ForEach(v =>
                {
                    int? order = options
                        .Where(o => o.Columntitle == propName && o.Columntext == v)
                        .Select(o => o.Columnvalue)
                        .FirstOrDefault(-1);
                    CheckBox c = new(0, propName, v, false, order);
                    filter.FilterOptions.Add(c);
                });
                filter.FilterOptions = filter.FilterOptions.OrderBy(o => o.Order).ToList();
                viewModel.ProductFilters.Add(filter);
            }
        }
        return viewModel;
    }
}

The above examples illustrate some important points. Compiled Entity Framework Core Queries are typically only used to optimize large and repetitive database queries. This syntax and usage is not exactly common, and for some "Full Stack" developers, they may have very little exposure to dealing with database queries, but they may one day have to fix or update them. And in the first example, a new hire with no business or domain knowledge would likely have a very hard time understanding the purpose of a switch case consisting of 2 character strings. Comments are minimalistic ways to save time to your future self, and other developers. And they aren't just for future dev who replace you. They are also for you. Think on how many times you have had to review a bug in code you wrote. Can you always recall your decision making process? I know I often forget code I've written < a month ago.

A common trap for many of us (myself included) is this "developers fallacy" that when we write code we'll definitely, 💯%, without a doubt remember the reasons why we wrote this code the way we did and the context surrounding its existence.

🙄

But as I am sure all of you know in your heart of hearts nothing is further from the truth.

Comments are possibly one of the most basic efficiency tools you can utilize as a developer. Learning how to balance proper coding style with useful but minimalist comments can go a long way in enhancing you developer workflow and efficacy. And not just writing them. Learning to read and understand other people's code is such a crucial skill. Especially for new and novice developers, you will almost never be the person creating and writing new and shiny features. And You will rarely be the only person working on a piece of software. In many cases, especially at the start of your career you may often find yourself maintaining applications written by developers long gone. The developer who wrote said code may have been promoted, may have quit or just maybe vanished off the face of the earth. In any case, they can't help you now. But if they had any respect for their work, their past self (through their use of comments) can likely help guide your success.

What do you think? Would love to hear other people's opinions, leave your thoughts below. To Comment or not to comment that is the question.

The Junior Dev: Lessons Learned Pt. 1.0

mfalconi — Sat, 27 Jan 2024 05:39:59 +0000

Good day fellow programmers. This is the first in a series of musings wherein I will reflect upon the many valuable lessons I have learned as a junior developer throughout the first few years of my career.

For the fortunate young developers, some may be lucky enough to have some form of mentor. These people are there to guide them through the processes and procedures, code base as well as familiarize them with valuable domain knowledge, and essentially water the seed that is the young developer to help them flourish into a valuable asset for any team.

This however is often not the case, and for myself was certainly not. Throughout the past 2 years there is much I have learned about the ever-changing, often volatile nature of the web development landscape. If you find yourself in a similar position, fret not; oftentimes, the greatest opportunities come from difficult situations. Learning how to navigate and utilize every opportunity to your advantage will ensure you never stop learning, and never stop growing. This should be a long term goal for all developers and aspiring developers. The tech landscape currently changes faster than ever before and will likely only continue to accelerate in its growth. If you are not constantly learning new skills, new tools, new techs, you will eventually find you have fallen miles behind your peers.

Lesson 1.0 Get your hands dirty 😱

I think one of the most important things any new developer can do when first starting a new position is to dive head first into the code base. The faster you get a handle on the infrastructure, processes and actual code, the faster you can make meaningful contributions. Depending on the scope and complexity of the project this may take some time, but one of the best ways I've found is to simply spin up a local version of the project and poke around while looking at issues and potential solutions.

If your team has documentation, READ IT LIKE IT'S YOUR BIBLE because it is now. A good documentation source is a developer's best friend, (that and your rubber ducky). If your team is lacking documentation, a great way to contribute to the team, while also learning your way around the code base is to develop a working documentation spec. This not only helps you learn the inner workings of all the aspects of the project, but it will also immediately enhance the productivity and lives of your team members.

If you're looking for examples of high quality documentation, I recommend Stripe. They have amazing examples in various languages, highly descriptive AND up-to-date descriptions. Bootstrap is another great example with all the same attributes as Stripe's.

Documentation is a crucial component for long standing projects, and oftentimes, organizations lacking in on-boarding procedures will be lacking in other areas as well such as documentation or testing. Helping to implement and develop proper procedures, documentation and protocols can go a long way in projects with a long life expectancy. It also helps you get your nose into every nook and cranny of an application. Often times in legacy code you may even discover Easter egg 🐣 bugs other people were unaware existed. Documenting these issues and advocating for fixes can help protect you and your team in the event of catastrophic error.

Another great method of getting your hands dirty is to explore any testing tools used by your new team. Exploring unit and/or End-2-End tests can help you develop a thorough understanding of the most important components of an application. These cases will often be driven by business requirements and logic and thus are the foundation of the applications existence. Understanding this can help encourage more mindful decisions when fixing bugs or add new features to an existing code base.

Testing is also a great way to develop an understanding of Application logic. E2E testing should provide an in-depth view of the indented use and flow of an application. Exploring testing suites can also help you identify sources of potential errors.

Like documentation, testing, whether unit, integration or e2e should always be a part of every developer's toolkit. If no testing protocols exist, a great way to start learning the code base while providing instant benefit to the team is to begin developing a testing framework for the team to use. This will provide a longitudinal benefit and if you stick around a project long enough, you will eventually be thanking your past in the long run.

If you are interested in further reading on Automation testing I recommend checking out the Playwright Framework. It's one of the most popular tools used for e2e testing and also has numerous applications in a variety of web service use cases (html-to-pdf generation is one example). Unit testing will depend on your development framework and language, but several popular tools exist; Mocha, Jest and Cypress quickly come to mind. Regardless of what tool you choose, I highly encourage you to delve in and learn the full power these tools offer. More reading on testing here

Sidebar: Version Control

Another crucial skill every developer must know is source control. Git is currently the reigning champion in this domain but there are many other tools also in widespread use (SVN, tortoise SVN etc.) One of the first things you should familiarize yourself with (outside you IDE) is your team's source control software. Learn it. Master it. ❤️ it. Many people will have a basic working knowledge of source control tools, but if you can truly master your team's source control software, you can immediately become an invaluable member of any team. Trust me when I say; everyone loves the person who is able to revert their accidental commits, or deal with complex merge resolutions. Depending on your team, and infrastructure and career goals, learning source control can also be a path to working in DevOps. For more information on Git checkout the link above.

Closing Notes:

Self awareness is an important soft skill developers should also work to cultivate. Knowing your abilities, your strengths and your limitations is a powerful skill. Often you will get asked in interviews:
- What are your greatest strengths?
- What are your greatest weaknesses?

The actual answer itself does not matter as much as many people realize. The real reason interviewers ask these questions is to assess not your skills but to determine how self aware you are. It's crucial to know your level of ability. Be aware of how you can actually effectively contribute to teams without impeding the efficiency of others.

Caveats

All of the above advice is valid, however, it's always a good idea to investigate the reasons why behind the what or how. In some cases you might learn that business logic dictates certain practices and oftentimes this will conflict with what's been taught to you as best practices. But remember to be mindful that under all the tech and knowledge and skill, our duty and job as developers is to assist the company to function and succeed in its goals. If we forget this, we would quickly find ourselves out of a job. Professional software development work is often a series of trade-offs and compromises. Learning to walk this razor's edge as you navigate the cross sectional relationship of working as a professional developer can help you level up your career in various ways. Soft Skills are crucial for any developer and become increasingly important as team size and project size grow. The better you are able to interact with non-tech individuals, the further you will likely advance in your career. Always be aware of the potential consequences of your actions. There may not always be a safety net to catch you.

That is all I have for now.

If you have other tips you would like to share, please do so below. And if you enjoyed reading, thanks for staying. <3

Keep Coding 🤓


    
const egg = 'Thanks for reading 🦊🐺 that`s my husky nikki btw she told me to tell you "bark bark arooo" ';


    
console.log(egg);