You've somehow found the unofficial FN web components library. Good for you.


This is all about web components and simplicity. Where possible and extra functionality is kept to a minimum. You are encrouaged download each component individually and customise it to your specific needs as you see fit.

This means NO NPM INSTALL. Why?

When you install a library via NPM what happens? It gets thrown into the node_modules folder and you import it into your code from there. Which means your options for modifications are limited. You cannot modify what is inside node_modules because for one you usually do not publish that folder and two, what happens when that library updates? All your modified code is gone.

This encrouages developers to tell designers that they need to only include in designs what the developers chosen library can do, limiting both functional and visual design.

This library of web components is specifically designed to be modified and altered. Download each component.js file and rewrite the CSS, alter the JavaScript and HTML to do what your specific design calls for.

Repo: https://github.com/nasanu/cv

① Download


    Click the download icon at the top of each page

    OR 
    
    Download directly from the repo linked above.

② Import



    import "idk where you saved it/component.js"

③ Use


  
  <fn-component type="text" name="fName" placeholder="stuff"></fn-component>

Basically that is it. See each component for specific instructions.

What you want actual details?... K. Fine.

This is a web components library. This means that when you import a component its not like importing say a React Component. Here is the breakdown Barney style:

① Download

This is simply pulling the library from some random location on the internet and placing it in the file structure of your own codebase. Thats it.

② Import

Here the import is actaully running the JS associated with the import. In the case with fn-input this will cause the fn-input.js file to be run. The only important thing here is that this will add the "fn-input" element to the document element making it available in all of your HTML.

③ Use

Use it in HTML. This is a HTML element, just like a normal HTML tag. For example:
<fn-input>
Check the page for each component to see what props do what.

Getting data out?...

This is a library based on web components, as such getting data out is handled via Custom Events. In the following example the fn-input component is passed "fName" for its name paramater. For components that generate events, the name of the custom event you listen to is the components name paramater plus "Event", so in this case you listen to the "fNameEvent". It also needs to be noted that in Custom Events data is passed in the detail property of the event object. 


    
  
  //use it in your HTML
  <fn-input type="text" name="fName" placeholder="input stuff"></fn-input>
  
  //add an event listener to get the input, this is a custom event 
  //event name is the prop name + Event
  document.addEventListener("fNameEvent", ((e: CustomEvent) => {
      //do something with the output
      //custom events hold data in the detail property
      console.log(e.detail);
    }) as EventListener);

See each componet for more specific details
see the code
download it

Burst Effect

This component is used to produce a fireworks or confetti type of effect centering on the the click or touch event locaton. In the default configuration if you trigger the click event artificially in code then random coordinates are used for the click event.

click

In Code


    
  // import the component
  import "../lib/burst";
  
  //use it in your HTML
  <fn-burst particleCount={40} duration={0.9}></fn-burst>

How it works

see the code
download it

Input

A generic input styled for Fn. This component fires CustomEvents on input, focusin & focusout. 


  
// import the component
import {fn-input} from TBA;

//use it in your HTML
<fn-input type="text" name="fName" placeholder="input stuff"></fn-input>

//add an event listener to get the input, this is a custom event 
//event name is the prop name + Event
document.addEventListener("fNameEvent", ((e: CustomEvent) => {
    //do something with the output
    //custom events hold data in the detail property
    console.log(e.detail);
  }) as EventListener);

Playground

type
name
value
title
required
placeholder
error
footer
trigger
value

Data In (props)

type
Sets the type of the field: text | number
value
Sets the value shown in the input
name
The name of the input used primarily for the CustomEvent that is fired on input
title
The text that appears above the input
footer
The text that appears below the input
placeholder
Text that appears only when the input is empty.
required
If there is a value given to this prop then this input is considered a required field. If value is empty on either input or focus out then the sting entered here will be showen as an error
error
This prop sets the error state of the input. If this is missing or an empty string then the input has no error, otherwise the error class is added and the text in this prop is displayed in the footer.

Data Out (events)

name + Event
This event is fired on input, focusin & focusout events.
The name of the event is the value of the component's name prop + "Event". So if you use <fn-input type="text" name="fName" placeholder="input stuff"></fn-input> you will need to listen to the "fNameEvent" event: document.addEventListener("fNameEvent"...
see the code
download it

CV Test

This is around 3hrs work in HTML, CSS and JS (a half finished project, content is to be added later, this is the visual framework). When we have projects with 40+ members taking half a decade.... Its not my place to cause trouble (never stopped me though) but be realistic about this. Do we really have the right people in the right places? Is it really the best practice to have people with zero experience in making apps deciding ALL decisions about how apps are made and designed (which is exactly what happens in practice)? Is it right to have the experts at the bottom and those with vastly less experience and talent above them dictating? I think its crystal clear to see that Link doesn't stand on its own and AI (Gemini) agrees "The user base of the Rakuten Link app closely mirrors the subscriber count of Rakuten Mobile, because activation and use of the app are heavily tied to the Rakuten Saikyo Plan". Exactly. Who believes that anyone would use Link if that tie was cut? And if subscribers would plumet, why? People use other apps without holding their phone plans value hostage, so why does Link need it?... Easy answer, its terrible. Users need to be forced to use it, else they would rather not.

Gemini again: "If using the Rakuten Link app had no effect on the Rakuten Saikyo Plan—meaning it no longer offered the primary benefit of free unlimited domestic calls and SMS—the app's usage numbers would likely plummet drastically." Is that what we are working for? Or should we aim for better? Right now all I ever get told is to do the minimum and make tickets go away as quickly and as dirty as possible.

View the fn-lambo full screen on a black page

In Code


    
  // import the component
  import "../lib/lambo";

  //use it in your HTML
  <fn-lambo src="./lambo-transparent.png" speed="0.2"></fn-lambo>

  //attributes
  //  src    - image url (default ./lambo-transparent.png)
  //  avatar - photo for the player profile billboard (default ./me.jpg)
  //  speed  - seconds per wheel revolution (default 0.2, smaller is faster)
  //  paused - freezes the wheels, road and billboards
  //  fill   - runs full screen in the box it is given (see the downloadable bundle's index.html)
  //
  //  The car sits parked until a key press or tap (not Tab, Shift, Escape, F keys or a held-down
  //  key), drives to a billboard, stops, and carries on to the next one at the following key press
  //  or tap. A swipe right does the same as a tap, and a swipe left drives round to the previous
  //  billboard, straight past the others. The mini billboards on the progress strip drive straight to
  //  that stop, TURBO doubles
  //  the speed, and the speaker switches the music on and off.

How it works

Each wheel is a square box with a round rim inside it. The box is rotated and squashed with rotate() and scaleX() so the circle becomes the same tilted ellipse as the wheel in the picture. Inside, a spokes and hub layer turns with a CSS keyframe animation, so it spins within the squashed shape and keeps the perspective. The road is a long flat strip turned with rotateZ() and laid back with rotateX() inside a CSS perspective, so the browser foreshortens the grid. Only its background position animates, one road block per loop, so it never ends. A pixel art billboard is added on the far side of the road each time the car sets off, and the car brakes to a stop beside it. Each is a tiny 64 x 32 canvas painted in JS and scaled up with image-rendering: pixelated, stood upright inside the same tilted 3D space as the road so it gets the same perspective, and slid along at road speed. A retrowave highway barrier runs along the far edge of the road: a tall dark indigo wall with a neon magenta top, a glowing cyan band and lamps, with a two tube neon guard rail on top. Each part is a set of CSS gradients repeated along a long upright face and scrolled by sliding its background. The sky fades from black at the top to deep purple at the horizon, with faint stars twinkling on a canvas. A big retrowave moon hangs behind the city: a CSS gradient disc with horizontal slits cut through its lower half by a mask, and a soft halo. A wireframe skyline stands in the distance on the far side of the road: plain boxes whose faces are neon outlines in the same tilted 3D space, in a pattern that repeats so it can scroll with the road forever. Now and then a shooting star crosses the sky. Once the car has set off, music plays and an analyser reads its spectrum, so the windows of the skyline light up from the ground as a graphic equaliser (without music they flip on and off at random). To keep it light, nothing is drawn while the component is scrolled out of view or paused, and a frame is only redrawn when something has moved.
see the code
download it

Language Selector

This component is allows users to change the displayed language. It works in conjunction with the translate component which is required to be setup first.

In Code


    
  // import the component
  import {fn-langselect} from TBA;
  
  //use it in your HTML
  <fn-langselect>someString</fn-langselect>

How it works

see the code
download it
its made of cheese

New Version Available!

We’re Excited to announce that a brand new version of Link is here, packed with amazing updates and improvements just for you.

What's new in Link 3.0.1
see the code
download it

Search Select

This is buggy af, needs work but I could not be fucked. You can see the heavy lifting is done, quickly supports listing and searching within a million items, with keyboard events.

In Code


    
  // import the component
  import {fn-searchSelect} from TBA;
  
  //use it in your HTML
  <fn-searchSelect items={JSON.stringify(items)}></fn-searchSelect>

How it works


see the code
download it

Supercar

An isometric Ferrari Testarossa driving along an endless city highway, with traffic, overhead signs, tower blocks, retro video game billboards and a sidewalk with a few food vendors, bus stops, parking meters and pedestrians, and a car park beside it. The whole scene is built from CSS 3D transformed elements and a little JS, no image files.

In Code


    
  // import the component
  import "../lib/supercar";

  //use it in your HTML
  <fn-supercar speed="320" color="#f2f2f6"></fn-supercar>

  //attributes
  //  speed  - how fast the road scrolls (default 320)
  //  color  - body colour (default #f2f2f6, white; #d4001a is Rosso Corsa red)
  //  paused - freezes the animation

How it works

The world is a flat plane tilted with rotateX(55deg) rotateZ(45deg) to give the isometric view. The car is built from tilted panels and cuboids placed in that 3D space. The road never moves; its surface, lane dashes and guardrail posts are repeating textures shifted by one period at a time so the loop is seamless, and the lamps, buildings, traffic, signs and billboards travel round a ring. The billboard posters are pixel art painted onto small canvases at start up.
see the code
download it

Text Wave Effect

IDK, doing shit with html out of pure despair from working with "experts" in LINK.

Well, the way they make shows is, they make one show. That show's called a pilot. Then they show that show to the people who make shows, and on the strength of that one show they decide if they're going to make more shows. Some pilots get picked and become television programs. Some don't, become nothing. She starred in one of the ones that became nothing. You think water moves fast? You should see ice. It moves like it has a mind. Like it knows it killed the world once and got a taste for murder. After the avalanche, it took us a week to climb out. Now, I don't know exactly when we turned on each other, but I know that seven of us survived the slide... and only five made it out. Now we took an oath, that I'm breaking now. We said we'd say it was the snow that killed the other two, but it wasn't. Nature is lethal but it doesn't hold a candle to man. You think water moves fast? You should see ice. It moves like it has a mind. Like it knows it killed the world once and got a taste for murder. After the avalanche, it took us a week to climb out. Now, I don't know exactly when we turned on each other, but I know that seven of us survived the slide... and only five made it out. Now we took an oath, that I'm breaking now. We said we'd say it was the snow that killed the other two, but it wasn't. Nature is lethal but it doesn't hold a candle to man. My money's in that office, right? If she start giving me some bullshit about it ain't there, and we got to go someplace else and get it, I'm gonna shoot you in the head then and there. Then I'm gonna shoot that bitch in the kneecaps, find out where my goddamn money is. She gonna tell me too. Hey, look at me when I'm talking to you, motherfucker. You listen: we go in there, and that nigga Winston or anybody else is in there, you the first motherfucker to get shot. You understand?

In Code


    
  // import the component
  
  //use it in your HTML
  <fn-textwave>someString</fn-textwave>

How it works

see the code
download it

Theme Selector

This component is configured to detect the users current light/dark mode preferance and set its default state to match. It then allows users to change their theme with their choice saved to localStorage memory. Behind the scenes it simply toggles the "color-scheme" css value on :root to be either light or dark from its detault of "light dark".

In Code


    
  // import the component
  import {fn-theme} from TBA;
  
  //use it in your HTML
  <fn-theme></fn-theme>

In CSS


    
    /* make sure the color-scheme is set globally */
    :root {
        color-scheme: light dark;
    }

    /* define the variables */
    --accent: light-dark(#000, #fff);

    /* use the variables */
    h1{color:var(--accent)}

How it works

see the code
download it

Translate

This component takes a key value set between its opening and closing tags, matches that key to a JSON language file then outputs the value to the HTML. It is used in conjunction with the language selector that allows users to change the display language.

welcome

In Code


  // import the component
  import {fn-translate} from TBA;
  
  //use it in your HTML
  <fn-translate>welcome</fn-translate>

How it works

This is a work in progress, future versions will not require manual editing or a downalod of the file This componet requires some manual setup as it can accomodate any number of languages and translations. Editing of the "translate.js" script is a requirment for this one. Follow these steps (in the translate.js file):

① Install

Download translate.js and place it in your apps filesystem, just like any other JS file.

② Import in JS where you want to use it


  import "idk where you saved it/translate.js"

③ Customise translate.js file

At the top of the file are the imports for the language JSON files 

  import english from "../../translations/en.json";
  import japanese from "../../translations/ja.json";
  import french from "../../translations/fr.json";