DEV Community: Jennifer Fadriquela

CSS Custom Properties

Jennifer Fadriquela — Sat, 29 May 2021 00:53:24 +0000

I've been working on a Razor project and was finding a way to dynamically assign style values to ::before elements. Best way to do this is via CSS Custom Properties

Here's what I came up with Razor code:

css

.wrapper::before {
  background-color: var(--label-color);
  content: var(--label-text);
}

razor

@{
  var labelText = "Some Label";
  var labelColor = "blue";
}
<div class="wrapper" style="--label-color: @labelColor; --label-text: '@labelText'">
  Hello
</div>

2020 Year-End Thoughts

Jennifer Fadriquela — Fri, 01 Jan 2021 07:39:00 +0000

Year 2020. I know this year would live in infamy for me and my generation. Memes have been comparing staying at home similar to being drafted in the military during WW2. The beginning of the year looked like a decent 10 minutes introduction for a Black Mirror episode and everyone was in the brink of paranoia. Like many others, I was stressed whenever I see Covid infections and deaths just sky-rocket everyday.

It was early March when we received the memo that we will have a work from home setup. At first, I thought that this will be just a 1 week thing. Turns out, it was for the entire year.

I took this opportunity to learn new stuff and develop my skills (while making sure I put my Netflix account to good use lol).

For starters, I continued studying mobile development. I was planning to do a mobile app for a Capstone Project for my master's. It was the 2nd quarter of the year - contact tracing and quarantine passes was all the rage. I made two mini-projects - QR Code Quarantine Pass and Bluetooth POC for contact tracing. Though I'm not sure if these apps will make the cut for my master's, I'm happy with the fact that I built something using Flutter.

Nearly the same time, I decided to put up a dev journal. I had an existing account in Medium and published a couple of articles in the past but I realized I wanted a targeted audience so I switched here in dev.to. Currently, I have a decent amount of articles here hoping that I'll be benefitting from them in the future or someone who needs dev how-to's and guides will find it useful.

At the beginning of third quarter, I was so stressed on the state of the economy and thought about getting a side hustle in case something bad happens to my day job. I began browsing Upwork and noticed there's a lot of demand for data extraction. I learned webscraping (wrote an article about it) and tried my luck in getting a side project. Fortunately, my hardwork in studying python/selenium, bidding and submitting proposals paid-off and I had three short-term projects.

Towards the end of the year, I got a potential gig that required me to learn Laravel and Vue.js. The gig never materialized but I did not regret spending time in studying these two frameworks.

As of now, I just finished an Ethereum and React course from Udemy. I'm currently building some sort of Cryptokitties clone based on ERC-1155. This tech made me realize the potentials of blockchain and I'm thinking of pursuing this as one my main skillset.

I had downtime or some sort of writer's block every now and then. There are days that I just wanted to make it through my day job and watch a movie at the end of the day. On these moments, I just let the laziness drain from my body hoping that tomorrow I will be refreshed.

2020 taught me that I can learn anything if I just put my mind into it.

Angular Prod Build Specific Bugs

Jennifer Fadriquela — Fri, 20 Nov 2020 01:55:42 +0000

I recently upgraded our project to Angular 10 from version 8. Below is a piece of code that went buggy:

@ViewChild('searchTextBox', { read: false }) searchTextBox: ElementRef;

This was working in v8 but not in v10.

The fix is to assign the expected type to 'read' property.

@ViewChild('searchTextBox', { read: ElementRef }) searchTextBox: ElementRef;

As I am debugging this in v10, I noticed that the error is not reproducible when running ng serve but will appear if you run ng serve --prod.

Lesson Learned: Always do a sanity test in prod build. Note that prod build is not debuggable and takes a while to build.

ESLint + Prettifier VSCode Lean Setup

Jennifer Fadriquela — Fri, 30 Oct 2020 05:53:00 +0000

A basic VSCode setup of ESLint + Prettifier that includes configuration for automatic linting/fixing upon filesave. I listed out steps from khalilstemmler's articles about ESLint and Prettier integration to Typescript and merged them to a compact setup.

Install lint and other lint plugins via npm cli

npm install --save-dev eslint @typescript-eslint/parser @typescript-eslint/eslint-plugin

Create .eslintrc from root directory with contents:

{
  "root": true,
  "parser": "@typescript-eslint/parser",
  "plugins": [
    "@typescript-eslint"
  ],
  "extends": [
    "eslint:recommended",
    "plugin:@typescript-eslint/eslint-recommended",
    "plugin:@typescript-eslint/recommended"
  ],
  "rules": { }
}

Create .eslintignore from root directory with contents:

node_modules
dist

(Optional) Add eslint script to package.json. This enables you to execute lint script on npm cli.

{
  "scripts": {
    ...
    "lint": "eslint . --ext .ts",
  }
}

Run in cli: npm run lint

Install prettier via npm cli

npm install --save-dev prettier

Create .prettierrc on root directory with contents:

{
  "semi": true,
  "trailingComma": "none",
  "singleQuote": true,
  "printWidth": 80
}

(Optional) Add prettier script to package.json.

{
  "scripts": {
    ...
    "prettier-format": "prettier --config .prettierrc 'src/**/*.ts' --write"
  }
}

Run in cli: npm run prettier-format

Install Prettier and Eslint from VSCode Extensions Ctrl + Shift + X.

Set the defaults via CTRL + Shift + P then select Preferences: Open Settings (JSON)

Add below configuration (if not yet existing)

// Default (format when you paste)
"editor.formatOnPaste": true,
// Default (format when you save)
"editor.formatOnSave": true,

You can now either run the scripts via cli or choose to lint every time you save changes on your code.

Audio Levels Troubleshooting

Jennifer Fadriquela — Mon, 26 Oct 2020 04:29:34 +0000

For the longest time, I thought my laptop audio jack was broken. Whenever I plug any type of earphones, the left bud is somewhat muted or not audible. I was on the verge of purchasing a USB audio adapter but thankfully did not push through with it.

The fix:

Search 'Sound' on Window Search
On 'Playback' tab, select 'Speakers/Headphones (Realtek Audio)' then click 'Properties'.
Go to 'Levels' tab and click 'Balance'
Adjust the left and right volume.

As it turns out, my left audio was in a super low volume all this time.

Lesson Learned: Explore Control Panel first before compulsively adding something to cart.

Webscraping: Beginner's Thoughts

Jennifer Fadriquela — Sat, 22 Aug 2020 01:15:19 +0000

Decided to learn webscraping this month. The first thing I did was to watch courses in Pluralsight:
Scraping Dynamic Web Pages with Python and Selenium
Scraping Your First Web Page with Python
Exploring Web Scraping with Python

Webscraping can be done by using Python libraries like BeautifulSoup and Requests. This assumes that you have all urls predetermined and will just scrape the page source.

But if you will scrape a dynamic page (ex: a div is rendered only if a specific button was clicked) then you will need a library like Selenium to emulate user interactions.

When I was confident with the basics, I took a step further and learned the Scrapy framework. This requires a steeper learning curve than native Python libraries because you have to know the flow of how objects are passed in the framework. The main advantage is you won't have to write boilerplate codes (writing data to files, handling url requests, data modelling) redundantly because those are already integrated with its pipeline.

Here are some Scrapy Pluralsight courses that helped me:
Crawling the Web with Python and Scrapy
Extracting Structured Data from the Web Using Scrapy

Escape SQL LIKE wildcard characters

Jennifer Fadriquela — Fri, 26 Jun 2020 11:38:33 +0000

In MSSQL, LIKE operator has wildcard characters that aids in pattern matching.

If you want to disable it, one way is to manually escape it. In my case, I made a string extension to transform the search text before passing it to the stored procedure via ADO.

SQL recognizes which character to escape if it was enclosed in [] with the exemption of single quote '.

public static string EscapeSqlChars(this string input)
{
    return input
        .Replace(@"[", @"[[]")
        .Replace(@"\", @"[\]")
        .Replace(@"'", @"''")
        .Replace(@"%", @"[%]")
        .Replace(@"_", @"[_]");
}

Base Class for Akita Entities

Jennifer Fadriquela — Sun, 14 Jun 2020 11:56:45 +0000

If you are using Akita for state management, this article might be helpful to you.

// BaseEntityService.ts
import { Observable } from 'rxjs';
import { BaseQuery } from './BaseQuery';
import { EntityStore, EntityState } from '@datorama/akita';
import { tap, delay } from 'rxjs/operators';

export abstract class BaseEntityService<TParams, TView, TResult> {

    constructor(
        protected query: BaseQuery<TView, TParams>,
        protected entityStore: EntityStore<EntityState<TView>, TView>
        ) {
    }

    protected abstract getFromApi(params: TParams): Observable<TResult>;
    protected abstract getFromStore(params: TParams): Observable<TResult>;

    protected selectFromStore(params: TParams): Observable<TView> {
        return this.query.selectData(params).pipe(
            delay(1), // if removed, ui will not update with current data
        )
    }

    get(params: TParams): Observable<TResult> {
        return this.toggleLoading(
            () => {
                if (!this.query.hasData(params))
                    return this.getFromApi(params);
                else
                    return this.getFromStore(params);
            }
        );
    }

    private toggleLoading<TResult>(o: () => Observable<TResult>) {
        this.entityStore.setLoading(true);
        return o().pipe(
            tap((x) => {
                this.entityStore.setLoading(false);
            })
        )
    }
}

BaseEntityService handles abstraction for getting data from api or store. It also implements custom setting of entity loading property via toggleLoading.

// BaseQuery.ts
import { EntityState, QueryEntity } from "@datorama/akita";
import { filter } from 'rxjs/operators';

export abstract class BaseQuery<TView, TParams> extends QueryEntity<EntityState<TView>, TView> {
    selectData(params: TParams) {
        const key = JSON.stringify(params);
        return this.selectEntity(key).pipe(
            filter(x => !!x)
        )
    }

    selectDataNullable(params: TParams) {
        const key = JSON.stringify(params);
        return this.selectEntity(key);
    }

    hasData(params: TParams) {
        const key = JSON.stringify(params);
        return this.hasEntity(key);
    }
}

BaseQuery contains custom selection of existing store data. In our app, we use stringified parameters as keys.

Internet Explorer Coding Issues

Jennifer Fadriquela — Sat, 13 Jun 2020 11:58:00 +0000

There's a special place in my heart for Internet Explorer memes but it's always a pain to deal with its quirks. Below are some of its issues:

I'll add something to this list every now and then because IE is awesome.

angular - Don't put (click) methods on <i>.
.includes() won't work.
IE caching is always on
d-flex - messed up layout if child elements aren't inside a <div>

<!-- Won't work -->
<div class="d-flex">
   <button>Button 1</button>
   <button>Button 2</button>
</div>

<!-- Will work -->
<div class="d-flex">
   <div>
      <button>Button 1</button>
   </div>
   <div>
      <button>Button 2</button>
   </div>
</div>

d-flex - d5e90f5e3995cf99442cb8b638fd910557c2526c

Generic Interface for Binary Tree

Jennifer Fadriquela — Tue, 02 Jun 2020 10:50:38 +0000

A node in a binary tree can only have left and right child nodes. This structure can go deeper. As an effort to strongly-type this kind of data, I came up with below implementation of generic interface and class.

public interface INode<T>
{
    T LeftNode { get; set; }
    T RightNode { get; set; }
    string Path { get; set; }
}

public class Node: INode<Node>
{
    public Node LeftNode { get; set; }
    public Node RightNode { get; set; }
    public string Path { get; set; }
}

Node class seems a little quirky because it passes its own type to INode.

Angular 9 Upgrade - Thoughts

Jennifer Fadriquela — Mon, 01 Jun 2020 12:56:14 +0000

I got to upgrade one of our Angular projects from v8.3.23 to latest v9. Just like my previous experience, I used Angular's update guide which will list out all details specific to the source version.

Note: Angular will not proceed to execute ng update if there are pending commits on your branch.

Before

Since the project uses lazy loaded modules, I had to update all module string import to dynamic import.
Upgraded angular cli/core from v8.3.23 to v8.3.26

During

When I encountered the error × Migration failed: Incompatible peer dependencies found., I just followed the suggestion stated on the error message and ran the ng-update with --force parameter. It should look like: ng update @angular/core @angular/cli --force

After

Removed deprecated entryComponents from modules.
Ran ng add @angular/localize since we used ngx-translate.
Removed static text on ngx-translate elements.

<!-- OLD -->
<span translate="Profile.Save">Save</span>

<!-- NEW-->
<span translate="Profile.Save"></span>

Removed { read: false } params for @ViewChild.
For dynamic components, I had to place <template> inside a div to prevent them in appending at bottom of parent div.

<!-- OLD -->
<div class="parent">
   <div>Sibling 1<div>
   <template #host></template>
   <div>Sibling 2<div>
<div>

<!-- NEW -->
<div class="parent">
   <div>Sibling 1<div>
   <div>
      <template #host></template>
   </div>
   <div>Sibling 2<div>
<div>

ngx-charts

Ran ng update @swimlane/ngx-charts. This will also update @angular/cdk
The upgrade will remove d3 folder from node-modules. All references to d3 will have an error.
Ran npm install d3 --save and npm install @types/d3 --save-dev to fix d3 references errors
Updated reference from @swimlane/ngx-charts/release to @swimlane/ngx-charts on imports.

Final Thoughts

Don't forget to ng build --prod to ensure safe build.
In summary, upgrading our project to version 9 is straightforward if you don't have conflicting packages. ng update had been helpful in updating deprecated items from older versions. My experience may not be the same with others that have larger projects or have too many package dependencies.

Angular i18n Markup Collision

Jennifer Fadriquela — Sat, 30 May 2020 22:50:23 +0000

i18n is tightly coupled with HTML markup. I had a couple of issue wherein Dev-A edited the markup then Dev-B triggered translation scripts. Dev-B was confused because there are translation items modified but don't belong to his intended changes.

Issue A - Newline formatting

Original Content

<div class="login-alert"i18n="Login Page|Validation message">Password is required.</div>

Modified Content (for some IDEs, they autoformat newlines)

<div class="login-alert"i18n="Login Page|Validation message">
   Password is required.
</div>

Notice that Password is required is now on its own line. Once we run i18n-extract, it will generate a new hash id for this item.

Issue B - Changes on text content

Taking the same item on A, let's remove the "." then run i18n-extract.

<div class="login-alert"i18n="Login Page|Validation message">Password is required</div>

It generated a new hash id for the above changes.

Workaround

I created a console application in C# that will format xlf files and ignore whitespace changes. This will execute i18n-extract and proceed on processing xlf files. Running this tool will prevent new hash id creation. Here is the source code.

Conclusion

With this in mind, we should always check our changes if affected existing translation items by running i18n-extract before pushing it.