Open in app

Sign In

Write

Sign In

Ole Ersoy
Ole Ersoy

354 Followers

Home

Lists

About

Sep 9

Angular Boolean Coercion with the new Input Transform Feature

Scenario Our Angular hello component has a responsive boolean @Input property . When responsive is added to a component declaration, we want the responsive property to be true . Thus if we declare hello like this. <hello></hello> Then responsive will be false. But if we declare it like this it will be true . <hello responsive></hello> Approach We will use Angular CDK coerceBooleanProperty function to perform the coercion.

UX

1 min read

Angular Boolean Coercion with the new Input Transform Feature
Angular Boolean Coercion with the new Input Transform Feature
UX

1 min read


Sep 6

Napkin Learning

I spend a considerable portion of my day read technical documentation. So I’m “Experimenting” with various way of “Simulating” myself into grasping concepts so that I can retain them more effectively. And I’ve started asking myself to illustrate at least mentally what it is I’m covering on a “Mental” napkin…

Learning

5 min read

Napkin Learning
Napkin Learning
Learning

5 min read


Aug 19

Vertically and Horizontally Centering Items within a CSS Grid Container

Scenario We have two div elements within a CSS grid container and we want to vertically and horizontally center both the div elements within the container without nesting them. This is our start point markup. <div style=" display: grid; grid-template-columns: 1fr…

UX

1 min read

Vertically and Horizontally Centering Items within a CSS Grid Container
Vertically and Horizontally Centering Items within a CSS Grid Container
UX

1 min read


Aug 7

Shorthand for Adding String Encoded Numbers in Javascript

Scenario We have the following two strings and we want to add them. let s1 = '1'; let s2 = '2'; Approach Use the plus operator to convert the strings to numbers. let s3 = +s1 + +s2;// Result 3 Demo

JavaScript

1 min read

Shorthand for Adding String Encoded Numbers in Javascript
Shorthand for Adding String Encoded Numbers in Javascript
JavaScript

1 min read


Jul 18

Dynamically Styling an Angular Component’s Host Element

Scenario We want to dynamically style the background color of our components host element using a color @input property like this. <color-square color="aqua"></color-square> Approach Within the color-square component of the below Stackblitz demo dynamically bind a SafeStyle instance to the host element like this. @HostBinding('style') get style(): SafeStyle {…

Programming

1 min read

Dynamically Styling an Angular Component’s Host Element
Dynamically Styling an Angular Component’s Host Element
Programming

1 min read


Jul 14

Creating Storybook Angular Animation Stories

Scenario We are creating a Storybook story for a component that includes Angular animations we get the error, and we need a fix. Error: NG05105: Unexpected synthetic listener @slide.start found. Approach This happens because the story needs to be configured with support for Angular Animations. The approach is the same as the…

JavaScript

1 min read

Creating Storybook Angular Animation Stories
Creating Storybook Angular Animation Stories
JavaScript

1 min read


Jul 8

Creating a Typescript Javascript Array with 10 Undefined Items

Scenario We want a typescript array with 10 undefined items that we can map over. Approach const a: undefined[] = Array.from(Array(10)); console.log(a); const b: 1[] = a.map((i) => 1); console.log(b); Demo

JavaScript

1 min read

Creating a Typescript Javascript Array with 10 Undefined Items
Creating a Typescript Javascript Array with 10 Undefined Items
JavaScript

1 min read


Jun 4

Creating a Responsive Grid Without Media Queries

Scenario We have a grid definition and we want to make it responsive without using media queries. .grid { display: grid; grid-template-rows: repeat(4, 100px); grid-template-columns: repeat(4, minmax(100px, 1fr)); grid-gap: 20px; } This is the starting point demo. Reponsive CSS Grid - StackBlitz A polymer project based on @polymer/lit-element.stackblitz.com We we shrink the size of the viewport, we can see that the grid…

UX

2 min read

Creating a Responsive Grid Without Media Queries
Creating a Responsive Grid Without Media Queries
UX

2 min read


Jun 2

Creating an Angular Library Project that Packages SASS

Scenario We need to create an Angular Library project @fireflysemantics/theme that includes the file src/lib/styles/_index.scss . Approach First lets scaffold out our workspace with the library project and a playground project for testing. ng new theme-workspace --create-application=false cd theme-workspace ng g library theme mkdir projects/theme/src/lib/styles touch projects/theme/src/lib/styles/_index.scss ng g application playground

UX

2 min read

Creating an Angular Library Project that Packages SASS
Creating an Angular Library Project that Packages SASS
UX

2 min read


Jun 1

Are You Always Tired?

Two Step Approach to High Energy and Focus So there really is just one step, and that is create a baseline where you feel great and then gradually / carefully /…fireflysemantics.medium.com Sugar makes the body more Alkaline ( High Fructose Corn Syrup is especially bad). If you get too Alkaline our tissue oxygen levels will get depleted and you may even feel as if you are not getting enough oxygen with each breath.

Health

2 min read

Are You Always Tired?
Are You Always Tired?
Health

2 min read

Ole Ersoy

Ole Ersoy

354 Followers

Founder of Firefly Semantics Corporation

Following
  • Richard Warepam

    Richard Warepam

  • Farhan Tanvir

    Farhan Tanvir

  • EP McKnight, MEd

    EP McKnight, MEd

  • Dr Mehmet Yildiz

    Dr Mehmet Yildiz

  • Matt Lillywhite

    Matt Lillywhite

See all (129)

Help

Status

Writers

Blog

Careers

Privacy

Terms

About

Text to speech

Teams