Ali Belachkar belachkar

Tailwindcss SCSS directives

Fixation of Tailwindcss Error: Unknown at rule @tailwind.

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

.vscode/settings.json:

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",

Angular interceptors

http-errors-interceptor.ts:

import {
  HttpEvent,
  HttpHandler,
  HttpInterceptor,
  HttpRequest,

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),

`::before` & `::after`

The content property

source code: codepen.io

index.html:

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

Dotenv file makeup example

.env:

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

## For PRODUCTION

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

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);

	import React from 'react';
	import moment from 'moment';
	import Image from 'next/image';
	import Link from 'next/link';

	const FeaturedPostCard = ({ post }) => (
	<div className="relative h-72">
	<div className="absolute rounded-lg bg-center bg-no-repeat bg-cover shadow-md inline-block w-full h-72" style={{ backgroundImage: `url('${post.featuredImage.url}')` }} />
	<div className="absolute rounded-lg bg-center bg-gradient-to-b opacity-50 from-gray-400 via-gray-700 to-black w-full h-72" />
	<div className="flex flex-col rounded-lg p-4 items-center justify-center absolute w-full h-full">