Rigel772

https://stackoverflow.com/questions/44415228/list-sorting-with-html5-dragndrop-drop-above-or-below-depending-on-mouse

here is full, better (probably) solution for lists

Rigel772

https://stackoverflow.com/questions/50876234/save-changes-made-by-content-editable-on-any-website
!!! basically to make text editable you need to add contenteditable="true" attribute (firefox only)!!!
https://developer.mozilla.org/en-US/docs/Web/Guide/HTML/Editable_content

Rigel772

With a base menu tag with the type of context and id to match the context attribute for the blog it's to be used for, menu items or submenus may be created. Menu items may have label, icon, and onclick attributes to represent design and actions. Actions can have predefined functions or inline javascript code, just as any element can. Multiple parents can use the same menu, so no need to repeat the same menus.

Rigel772

 <div id="navbar">
  <a href="#home">Home</a>
  <a href="#news">News</a>
  <a href="#contact">Contact</a>
</div> 

Rigel772

https://css-tricks.com/sticky-smooth-active-nav/

<header>
  <h1>Website</h1>
</header>

<nav>
  <ul>
    <li><a href="#section-1">Section 1</a></li>
    <li><a href="#section-2">Section 2</a></li>

Rigel772

* { outline: 1px red solid !important; visibility: visible !important }

Rigel772

// This change all thing that are array-like or iterable into true array especially when working with DOM, so that you can use other array methods like reduce, map, filter and so on.

  const name = 'frugence';
  const nameArray = Array.from(name);

  console.log(name); // output: frugence
  console.log(nameArray); // output: ['f', 'r', 'u', 'g', 'e', 'n', 'c', 'e']

//working with DOM

Rigel772

//PROBLEM

//Input:
//array1 = [a, b, c, d, e]
//array2 = [b, d, f]

//Output:
//array1 = [a, c, e]
//array2 = [b, d, f]

Rigel772

<section class="about">
	<div class="about__header header-breaker">
		<p>about us</p>
	</div>
</section>



.header-breaker {
	margin: 3rem auto;

Rigel772

 // CENTER
 @mixin center($position) {
  position: absolute;
  
  @if $position == 'vertical' {
    top: 50%;
    -webkit-transform: translateY(-50%);
    -ms-transform: translateY(-50%);
    transform: translateY(-50%);
  }