belachkar

Tailwindcss SCSS directives

Fixation of Tailwindcss Error: Unknown at rule @tailwind.

1. Add the the following Custom Data for CSS file css_custom_data.json.
2. Declare it into the VSCode settings file.

.vscode/settings.json:

belachkar

Angular keep fils on the build

Example of copying _redirects file from the root filder to the dist root folder on build time.

angular.json:

"assets": [
  "src/favicon.ico",
 "src/assets",

belachkar

Angular interceptors

http-errors-interceptor.ts:

import {
  HttpEvent,
  HttpHandler,
  HttpInterceptor,
  HttpRequest,

belachkar

RxJS - common use case

results: Observable<RedditResult[]>;
search: FormControl = new FormControl('');

constructor(ris: RedditImageSearchService) {
  this.results = this.search.valueChanges.pipe(
    map(search => search.trim()),
 debounceTime(200),

belachkar

::before & ::after

The content property

source code: codepen.io

index.html:

<h1 class="intro">Here is some generic content</h1>

belachkar

Dotenv file makeup example

.env:

## For DEVELOPMENT
# - Rename this file to .env
# - Update the values

## For PRODUCTION

belachkar

Extract Youtube links from the text file

A small python script

• To extract all the youtube links from the text file you.list.
• Open the browser (in background) with all the videos - urllib2.urlopen(listOfVideos).
• Gets the new playlist link - response.geturl().
• Opens the web browser again to allow the user to edit the playlist properties webbrowser.open(playListURL).

Tested on Google Chrome

belachkar

Firebase Custom Hooks

hooks/useUser.js:

import { useEffect, useState } from 'react';

export const useUser = (auth) => {
  const [user, setUser] = useState(null);
  const [isLoading, setIsLoading] = useState(true);

belachkar

CSS Logo changing color animation on hover

/* Logo animation */
@keyframes color-rotate {
  from {
    filter: hue-rotate(0deg);
  }

 to {

belachkar

React - Implemanting Error Boundary

hoc/WithErrBoundary/index.tsx:

import { Component, ComponentClass, ComponentType } from 'react';

interface State {
 hasError: boolean;