DEV Community: tejan

css

tejan — Sun, 05 Jun 2022 13:49:44 +0000

float on top
https://stackoverflow.com/questions/30952386/how-to-make-a-navigation-bar-permanently-on-top

react firebase crud realtime database

tejan — Sat, 04 Jun 2022 02:53:32 +0000

https://firebase.google.com/docs/database/web/start?authuser=0
https://youtu.be/azdwN_4IDKA
https://create-react-app.dev/docs/adding-bootstrap/#using-a-custom-theme

terminal

npx create-react-app xxx-app-name
cd xxx-app-name
code .

vscode

npm i firebase
npm i uid

firebase

new web app
SDK setup and configuration

vscode

firebase.js

import { initializeApp } from "firebase/app";
import { getDatabase } from "firebase/database";

const firebaseConfig{
apiKey: "your api key";
authDomain: "your authDomain";
databaseURL: "your dbURL";
projectId: "your projectId";
storageBucket: "your storageBucket";
messagingSenderId: "your messagingSenderId";
appId: "your appId";
};

const app = initializeApp(firebaseConfig);
export const db = getDatabase(app);

firebase > realtime database

rules

{
  "rules": {
    ".read": true,
    ".write": true
  }
}

vscode

App.js
text input

import { db } from "./firebase" 
//firebase.js
import { uid } from "uid"

function App(){

return(
<div>
<input type="text" />
<button>submit</button>
</div>)
}

write

  const writeToDatabase = () => {
    const uuid = uid();
    set(ref(db, `/${uuid)`}, {
      todo,
      uuid,
    });
  };

ar

tejan — Fri, 27 May 2022 07:55:42 +0000

References
Spark AR Tutorial - Create Buildings
Spark AR Tutorial - Create your showroom
Building Tools Add-on

Blender

Build the Room
hotkey： N -> tool bar -> building tools

Export the Room
hotkey： N -> tool bar -> spark ar toolkit
sp

Spark AR

add plane
add new material
new material -> new animation sequence
new animation sequence -> new texture
sprite image
set row/column/sprite number

Tools
Video to GIF
GIF to sprite
Compress JPG/PNG

interactionReference

tejan — Sat, 07 May 2022 16:55:18 +0000

https://monopo.london/
https://github.com/Cuberto/mouse-follower
https://www.fundomo.com/
https://david-hckh.com/

draft

tejan — Thu, 05 May 2022 03:51:51 +0000

Reading LED ThumbReading LED Thumb
https://www.instructables.com/Reading-LED-Thumb/
Instructables, Autodesk · Jan 5, 2019Instructables, Autodesk · Jan 5, 2019
Show publication
Tutorial of making a LED page holder

Featured InstructableTutorial of making a LED page holder - Featured Instructable

Crystal Light With Piezoelectricity
https://www.instructables.com/Crystal-Light-With-Piezoelectricity-the-Precious-L/
Instructables, Autodesk · Sep 13, 2017Instructables, Autodesk · Sep 13, 2017
Show publication
Tutorial for Making Crystal LEDs with Piezoelectricity

Runner Up, GIFs Challenge, Instructables, Autodesk
Featured Instructable

react-app with sidebar - logo only

tejan — Tue, 03 May 2022 10:59:43 +0000

freecodecamp
react router ref

npx create-react-app name
cd name
code .

npm i @emailjs/browser
npm i @fortawesome/free-brands-svg-icons
npm i @fortawesome/free-solid-svg-icons
npm i @fortawesome/react-fontawesome
npm i animate.css
npm i gsap-trial
npm i loader.css
npm i react-leaflet
npm i react-loaders
npm i react-router-dom
npm i sass

sass
.scss
import .scss

prettier
.prettierrc

{
  "trailingComma": "es5",
  "tabWidth": 2,
  "semi": false,
  "singleQuote": true
}

App.scss

$primary-color: #ffd700;

@import 'animate.css';

@font-face {
  font-family: 'Helvetica Neue';
  src: url('./assets/fonts/helvetica-neu.ttf') format('ttf');
}

@font-face {
  font-family: 'La Belle Aurore';
  src: url('./assets/fonts/LaBelleAurore.woff2') format('woff2');
}

@font-face {
  font-family: 'Coolvetica';
  src: url('./assets/fonts/CoolveticaRg-Regular.woff2') format('woff2');
}

input,
textarea {
  font-family: 'Helvetica Neue';
}

index.scss

html {
  font-size: 62.5%;
}

body {
  margin: 0;
  font-family: 300 11px/1.4 'Helvetica Neue', 'sans-serif';
  color: #444;
  background: #022c43;
  overflow: hidden;
  display: block;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

index.js

import { BrowserRouter } from 'react-router-dom'

<React.StrictMode>
    <BrowserRouter>
      <App />
    </BrowserRouter>

src/components/Sidebar/index.js

import { Link } from 'react-router-dom'
import './index.scss'
import LogoS from '../../assets/images/logo-s.png'
import LogoSubtitle from '../../assets/images/logo_sub.png'

const Sidebar = () => (
  <div className="nav-bar">
    <Link className="logo" to="/">
      <img src={LogoS} alt="logo" />
      <img src={LogoSubtitle} alt="slobodan" />
    </Link>
  </div>
)

export default Sidebar

src/components/Sidebar/index.scss

.nav-bar {
  background: #181818;
  width: 60px;
  height: 100%;
  position: absolute;
  top: 0;
  z-index: 3;
  min-height: 500px;

  .logo {
    display: block;
    padding: 8px 0;

    img {
      display: block;
      margin: 8px auto;
      width: 24px;
    }
  }
}

src/components/Layout/index.js

import Sidebar from '../Sidebar'
import './index.scss'

const Layout = () => {
  return (
    <>
      <Sidebar />
    </>
  )
}

export default Layout

face-api js react

tejan — Tue, 22 Feb 2022 11:32:52 +0000

https://github.com/justadudewhohacks/face-api.js#getting-started-utility-classes
https://youtu.be/rVvYAKzaYlY
https://youtu.be/CVClHLwv-4I
https://stackoverflow.com/questions/58711940/how-to-get-the-face-position-detection-inside-video-using-face-api
https://justadudewhohacks.github.io/face-api.js/docs/classes/facelandmarks68.html#getlefteye
https://www.youtube.com/watch?v=EejpxMtDg8M

CORS Ref

tejan — Wed, 16 Feb 2022 14:09:29 +0000

https://www.pluralsight.com/guides/allow-access-control-origin-in-create-react-app

image sequence

tejan — Thu, 10 Feb 2022 00:47:41 +0000

sequence animator
https://github.com/wix-incubator/react-sequence-animator

dynamic img
https://www.storyblok.com/tp/react-dynamic-component-from-json

dynamic image link

tejan — Wed, 09 Feb 2022 07:44:28 +0000

https://stackoverflow.com/questions/62192049/how-do-i-dynamically-import-images-in-react