DEV Community: Deepak Devanand

Leaflet Map - Dark Theme

Deepak Devanand — Sun, 21 May 2023 05:05:00 +0000

Leaflet.js is arguably the best client-side map-rendering library. While there's a plethora of OpenStreet Map tile providers, none of the free basemap layer have a dark-themed map (tiles).

By applying css filter property on specific leaflet classes, we can have a "hacky" dark map.

.leaflet-layer,
.leaflet-control-zoom-in,
.leaflet-control-zoom-out,
.leaflet-control-attribution {
  filter: invert(100%) hue-rotate(180deg) brightness(95%) contrast(90%);
}

invert(100%) completely inverts the color, essentially adding dark background to the map.
hue-rotate(180deg) is optional, but converts the predominant blue color (large roads) on the map to red.

Pulse —CSS Animation

Deepak Devanand — Fri, 11 Nov 2022 15:27:53 +0000

A pulsating circular element in the UI is an indicator of something real-time. Adding such an element next to charts with constantly updating data is a fine visual cue.

Box Shadow: Cast shadow around the element

  /* offset-x | offset-y | blur-radius | spread-radius | color 
  */
  box-shadow: 2px 2px 2px 1px rgba(0, 0, 0, 0.2);

Scale3d: Resize the element in 3D space

  scale3d(sx, sy, sz)

KPI Cards UI - Border-left

Deepak Devanand — Sun, 11 Sep 2022 03:23:48 +0000

The KPI (Key Performance Indicator) cards are common in dashboard UIs where summary stats are shown, for a quick glance at the overall health of the monitored process.

By including left borders on the cards, we can provide a sublime visual hook to the user, as well as keeping the UI clean and uncluttered.

CSS Box-Shadow Material

Deepak Devanand — Tue, 06 Sep 2022 15:04:59 +0000

The CSS box-shadow property is used for casting shadow around an element. Using specific offsets various depth effects can be achieved such as the famous material elements.

CSS Subtle Slideup Reveal Animation

Deepak Devanand — Sun, 04 Sep 2022 09:42:25 +0000

Within the document, there are sections that if animated just a bit, could enhance the overall visual appeal of the design. One such animation is a simple, slide-up reveal that guides the user's attention unobtrusively.

.reveal {
  animation: 1.5s revealup ease infinite;
}

@keyframes revealup {
  from {
    opacity: 0;
    transform: translatey(-15%);
  }

  to {
    opacity: 1;
    transform: translatey(-25%);
  }
}

Java Frappe: Optional

Deepak Devanand — Sun, 07 Aug 2022 14:10:18 +0000

The Optional object in Java (java.util.Optional) is a container object which may or may not have a value. Designed specifically to handle the null case in a safe and explicit way, the optionals help write more readable code.

Typical Usage

1) When returning an object that might be null

   public Optional<Employee> findEmployeeByName(String name) {
     Employee employee = repo.findEmployee(name);
     return Optional.ofNullable(employee);
   }

2) To fallback upon receiving null

Return a default object

Employee employee = findEmployeeByName("John")
                      .orElse(new Employee("Unknown", 20));

Return after a pipeline of operators

 Integer salary = findEmployeeByName("John")
                      .map(Employee::getSalary)
                      .orElse(30);

Run a callback if value exists

 findEmployeeByName("John")
            .ifPresent(employee -> {
                kafkaTemplate.send("employee-key", employee, "employee-topic");
            });

Return an exception

 try {
    value = opDouble.orElseThrow(IOException::new);
 } catch (IOException e) {
    System.out.println("Exception " + e);
 }

By default returns NoSuchElementException, if no value exists within the Optional.

Flexbox - Override 'justify-content' on Child Items

Deepak Devanand — Sat, 25 Dec 2021 13:45:45 +0000

There are times when we want to place a specific child item out of flexbox context, so we have granular control on its placement relative to its parent. justify-self doesn't seem to work, contrast to its sibling align-self.

The flexbox layout specification talks about absolutely-positioned children:

As it is out-of-flow, an absolutely-positioned child of a flex container does not participate in flex layout.

Taking this into account, we can let flex items of choice opt-out flexbox layout, and be positioned using position:absolute property.

Navbar - Underline Menu Items on Hover

Deepak Devanand — Sat, 25 Dec 2021 13:11:21 +0000

The navbar, especially horizontal navbar, guides the user help find content fast, by providing 'umbrella' links. One of the interactions on menu item hover, is the simple underline effect.

We can use the border-bottom css property to create such an effect.