Skip to content

Instantly share code, notes, and snippets.

View vxhviet's full-sized avatar

Viet Hoang vxhviet

8 followers · 0 following
View GitHub Profile
@vxhviet
vxhviet / libraryMixins.md
Last active February 20, 2019 13:11

Add mixins from Library

SOURCE

The example library is angular-mdc-web.

In order to use the custom mixins from the library add this to angular.json file in the project.architect.build.options section:

...
@vxhviet
vxhviet / firestoreBestPractices.md
Last active February 18, 2019 09:23

Firebase Firestore Best Practice

1. Correct way to structure data in Firestore:

SOURCE, SOURCE, SOURCE

2. Managing Denormalized/Duplicated Data in Cloud Firestore:

SOURCE

3. Collections, Maps, Arrays and their limitations Firestore:

SOURCE

@vxhviet
vxhviet / hoverShowHide.md
Created February 17, 2019 15:00

On hover show and hide different div's at the same time?

SOURCE

<div class="showhim">
     HOVER ME
     <div class="showme">hai</div>
     <div class="ok">ok</div>
@vxhviet
vxhviet / hoverExpand.md
Created February 17, 2019 14:58

Hover over DIV to expand width

SOURCE

<div id="growContainer">
  <div class="grow" style="background-color:#2A75A9;"></div>
  <div class="grow" style="background-color:#274257;"></div>
  <div class="grow" style="background-color:#644436;"></div>
@vxhviet
vxhviet / emulator.md
Last active February 22, 2019 15:58

Fix Firebase Function Cannot Start Emulator Error

SOURCE

# install current working directory dependencies
yarn --ignore-engines

# install firebase-tools if u didn't
yarn global add firebase-tools
@vxhviet
vxhviet / firebaseCLI.md
Created February 13, 2019 08:45

Firebase CLI Command

SOURCE

yarn run lint : lint check for error

firebase list

firebase deploy : deploy everything

@vxhviet
vxhviet / firebaseNamecheap.md
Last active February 28, 2025 03:46

Connect Firebase Hosting to Namecheap Custom Domain

SOURCE, SOURCE, SOURCE

  1. Go to Firebase's Dashboard > Develop > Hosting > Connect Domain.
  2. Enter the custom domain that you'd like to connect to your Hosting site.
  3. (Optional) Check the box to redirect of all requests on the custom domain to a second specified domain.
  4. Click Continue to initiate the validation process.
  5. Go to Namecheap's Dashboard > Domain List > Manage > Advanced DNS.
  6. Under Host Records, add a new record with:
@vxhviet
vxhviet / changePositionBackgroundColor.md
Last active January 24, 2019 07:32

How to Change Position of background-color

SOURCE, SOURCE, SOURCE

Actually you can't change the position of a background-color, instead we need to use a trick to create a background-image with solid gradient and position that instead.

Here is the example of a div that have color background fill up and leave around 100px at the bottom unfilled.




  


  




    


          
    

      

        
        

          

              @vxhviet
          

          

            
                vxhviet
                / scaleSVGonSafari.md
            
            

              Created
              January 3, 2019 08:15
            

          

        

      

        

  

      

    
Scale SVG on Safari


SOURCE,
SOURCE


Safari has trouble scaling SVG image so it will distort image if use with attribute like object-fit: cover;. To fix this add preserveAspectRatio="none" to the <svg>:


<svg width="200" height="200" viewBox="0 0 200 200" fill="none" preserveAspectRatio="none" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">




  


  




    


          
    

      

        
        

          

              @vxhviet
          

          

            
                vxhviet
                / importJStoAngular.md
            
            

              Created
              December 27, 2018 09:30
            

          

        

      

        

  

      

    
Import JavaScript library into Angular


SOURCE, SOURCE


What works in Angular 7:


The JS library trie-search doesn't have the definition .dt.ts file to be used in TypeScript file. so we need to use the following method in order to use it.


Tips: using Type Search to see if there's any pre created .d.ts for your library SOURCE.