Post image
Strategy

Best way to request more information from related selections…


I am developing a page that allows managers to select teams and individuals needed for a project. When selecting a team, each employee within that team is shown with their known skills. Once an individual is identified as being needed for the project, the manager should be given a way to break down the hours expected for each skill that employee possesses.

I have created a mockup of what I have developed to this point.

Post image

Right now, I just have a table at the bottom with inputs for each skill. A project can have more than one employee assigned to it so there could be more columns than what is shown.

I have two questions.

  1. Is there a better area to put this type of info? I had thought about making a panel to the right of the employee selection to display this.

  2. What is a better way to ask for data that is related to a previous selection like in this case?

I would be grateful for any suggestions.



Source link

NET Core – Cross-Platform Code
Strategy

NET Core – Cross-Platform Code


.NET Core is cross-platform, and in this short post, I will describe a simple method to detect the underlying operating system on run-time.

There are situations when we want to run a different piece of code based on the operating system. This capability could be useful in various scenarios e.g. I wanted to obtain the underlying hardware information in order to bind it to a licensing mechanism. While its true that .NET Core already supports a wide variety of operations, in this particular use case, there is no support to obtain this information cross-platform.

So, the route I took is simple in nature and doesn’t require complex programming and gets the job done. I will describe the idea and feel free to refactor it as per your use case and appetite of code cleanness.

I knew that on the windows side of things, System.Management Namespace provides access to a rich set of management information and management events about the system, devices, and applications instrumented to the Windows Management Instrumentation (WMI) infrastructure. You can check out more details on https://docs.microsoft.com/en-us/dotnet/api/system.management?view=netframework-4.8

However, System.Management namespace will not work if would you would like to use it in Linux. There is already a GitHub thread about bringing this functionality in .NET core, and you can follow it on https://github.com/dotnet/corefx/issues/22660

How can we achieve this functionality today and without complexity? The method I used is to use the existing System.Management namespace and functionality it provides to obtain hardware information on the windows side of things. For Linux, we can use the bash command to get the same results. So, we want to execute bash commands from the .NET Core application, and alone, this capability is very powerful.

Let’s break down this in high-level tasks:

  • Identify Operating System from .NET Core application
  • Execute related commands (.NET or Linux) based on OS and get results

Identify Operating System

.NET Core Console Application
Output of application on Windows OS

For testing this piece of code on Linux, I used Docker Linux – Ubuntu and Linux-armv7 debian image due to simple usage, but the result should be the same if you manually deploy the published application to these OS.

Find below the screenshots of running the same application on Linux. To keep things simple, a Docker and how to publish .NET Core application discussion is outside the scope of this post.

Application Running on Linux Container

Getting Hardware Information

Regardless of the title of this section, this part will also demo how to execute the bash command on Linux via .NET Core. Here is a slightly modified code from the previous example. Note I left out the part for MAC, as the concept is the same, and you can implement it following the same pattern.

Modified code to execute platform-specific functionality

The modified program, in general, is again simple; we wrap the platform-specific functionality in separate classes and then simply use those in the corresponding block. Here is the output when executed both on Windows and Linux. (Note I am reading slightly different data from both platform, again it can be anything).

on Windows
on Docker Linux Image

The composition itself is very simple; you execute whatever logic you want to based on the platform. Check below the corresponding code CPUInformationChecker (windows and Linux parts)

Windows Specific Code to get CPU information
Linux bash command
Extension Method to encapsulate bash execution functionality

So, this was a very simple way to execute platform-specific code in certain situations. The above-mentioned technique can be optimized more, and you can also use conditional compilation flags if you want to.

Feel free to ask in the comments if something is not clear. Happy coding!



Source link

Indicating Scroll Position on a Page With CSS
Strategy

Indicating Scroll Position on a Page With CSS


Scrolling is something we all know and do on the web to the extent that it’s an expectation or perhaps even a habit, like brushing our teeth. That’s probably why we don’t put too much thought into designing the scrolling experience — it’s a well-known basic function. In fact, the popular “there is no fold” saying comes from the idea that people know how to scroll and there is no arbitrary line that people don’t go under.

Scroll-based features tend to involve some bespoke concoction of CSS and JavaScript. That’s because there simply aren’t that many native features available to do it. But what if we could accomplish something that only uses CSS? 

Take this ingenious horizontal scrollbar with CSS, for instance. I want to do something similar, but to indicate scrolled sections rather than capture continuous scrolling. In other words, rather than increasing the length of the indicator during scroll, I only want to increase the length when a certain section of the page has been reached.

Like this:

Here’s my plan: Each section carries an indicator that’s undetectable until it reaches the top of the screen. That’s where it becomes visible by changing color and sticks to the top of the viewport.

The exact opposite should happen in reverse: the indicator will follow along when scrolling back up the screen, camouflaging itself back to being undetected to the naked eye.

There are two key parts to this. The first is for the indicator to change color when it’s near the top of the screen. The second is for the indicator to stay put at the top of the screen and come down only when its section is scrolled down to.

The second one is easy to do: we use position: sticky; on our elements. When a page is scrolled, a sticky element sticks to a given position on the screen within its parent container.

That brings us to changing colors. Since the background of an HTML document is white by default, I’m keeping white as the base color for the demo. This means the indicator should look white when it’s over the base color and turn to some other color when it’s over the indicator bar at the top of the screen.

The dashed indicator is currently invisible, but becomes visible when it sticks to the top and blends with the background color of the indicator container.

This is where CSS blend modes come into play. They give us so many options to create a variety of color amalgams. I’m going to go with the overlay value. This one is quite dynamic in nature. I won’t explain the blend in depth (because the CSS-Tricks Alamanac already does a good job of that) but taking this demo into account, I’ll say this: when the background color is white the resulting foreground color is white; and when the background is some other color, the resulting color is darker or lighter, depending on the color it’s mixed with.

The indicator stops in the demo are black. But, because of the blend, we see them as white because they are on a white background. And when they are over the indicator container element, which is a lovely shade of violet, we see a dark violet indicator stop, because we’re mixing the indicator stop’s black with the indicator container’s violet.

Starting with the HTML:

<div id="passageWrapper">
  <strong>Sections Scrolled ↴</strong>
  <!-- Indicator container -->
  <div id="passage"></div>
</div>


<!-- Indicator stop -->
<div class=passageStops></div>


<!-- First Section -->
<div class="sections">
  <!-- Content -->
</div>


<!-- Another indicator stop -->
<div class="passageStops"></div>


<!-- Second Section -->
<div class="sections">
  <!-- Content -->
</div>


<!-- Another indicator stop -->
<div class="passageStops"></div>


<!-- Third Section -->
<div class="sections">
  <!-- Content -->
</div>

Pretty straightforward, right? There’s a sticky container at the very top that holds the indicators when they reach the top.  From there, we have three sections of content, each one topped with an indicator that will stick to the top with the indicator and blend with it.

Here’s the CSS:

.passageStops {
  background-color: black; /* Each indicator stop is black */
  mix-blend-mode: overlay; /* This makes it appear white on a white background */
  width: 33.3%; /* Three sections total, so each section is one-third */
  top: calc(1em + 3px);
}


#passage, 
.passageStops{
  height: 10px;
}


#passageWrapper,
.passageStops {
  position: sticky; /* The container and stops should stick to the top */
  z-index: 1; /* Make sure the indicator and stops stay at the forefront */
}


#passage {
  background: violet; /* Will blend with black to make a darker violet indicator */
  margin: 0 0 20px 0;
}


#passageWrapper{
  background-color: white; /* Make sure we're working with white to hide indicator stops */
  height: 40px;
  top: 0px;
}


/* Each stop will shift one-third the width of the indicator container to cover the whole thing when the last section is reached. */
.passageStops:nth-child(4){ margin-left: 33.3%; }
.passageStops:nth-child(6){ margin-left: 66.6%; }


/* More styling, blah blah. */

The indicators (.passageStops) are black. But the overlay blend mode makes them appear white when it blends with the white background under it. Since there are three sections, each indicator is of one-third width.

The indicators have position: sticky; with a top distance value. This means the indicators will stick once they reach the calculated position from the top of the screen. When that happens, the black indicators that appeared white blend with the violet indicator container, which makes them appear to be a dark violet, representing the new scroll position on the page.

The reverse is also true. When an indicator loses its sticky position, it will move from the violet background of the indicator bar to the white background of the page, hiding it once again… like it was never there!

Here’s the demo again:

That’s it. You can perhaps further experiment with this by having a non-white background with another blend mode, or a gradient for the indicator bar or stops.



Source link