Favorite Colors

Color Codes #660af4 #ff668d #ca1a66 #007687 #65fbd0 #384961 #5450fd #3f31ff #fbed4d #7B61FF #placeholder document.querySelectorAll(".colors").forEach(color => color.addEventListener("click", function(e){ navigator.clipboard.writeText(e.target.innerText).then(function() { var colorcode = e.target.innerText; e.target.innerText = "Copied"; setTimeout(function(){ e.target.innerText = colorcode; }, 500) console.log('Async: Copying to clipboard was successful!',e.target.innerText); }, function(err) { console.error('Async: Could not copy text: ', err); }); }))

Linux/Bash Commands

Linux/Bash User Actions # Add user sudo adduser pgsql # Check user whoami # change user sudo su - pgsql Installed apps #List of Installed Packages sudo apt list --installed Search find / -name "filename" #find a file by name SSH # Access remote PC sudo ssh username@ip-address # Example sudo ssh root@ # Clone folders to remote via SSH scp -r /path/to/local/dir user@remotehost:/path/to/remote/dir System services # List All System Services ‌systemctl -at service # Check status of an application sudo systemctl…

UI: Hamburger Icon

<button class="ui-hamburger-05"></button> .ui-hamburger-05 { width: 30px; height: 26px; border: none; position: relative; background: linear-gradient(to bottom, #2980b9, #2980b9); background-size: 100% 20%; background-repeat: no-repeat; background-position: center center; transition: background-size 0.2s 0.25s ease; cursor: pointer; transition: background-size 0.3s 0.2s ease; } .ui-hamburger-05:before, .ui-hamburger-05:after { height: 20%; width: 100%; position: absolute; left: 0; background-color: #2980b9; content: ''; transition: transform 0.3s ease; } .ui-hamburger-05:before { top: 0; } .ui-hamburger-05:after { bottom: 0; } .ui-hamburger-05:before, .ui-hamburger-05:after { transition: 0.3s ease; } .ui-hamburger-05.is-active { background-size: 0 0; } .ui-hamburger-05.is-active:before,…

UI: Magnetic Button 

A magnetic button. <div class="ct-div-block overlay post-card"> <div class="post-card-read-box"> <a class="post-card-read-link" href="http://" target="_self" > <div class="post-card-read-text"> OKU </div> </a> </div> </div> .post-card-read-box { padding:24px; display:flex; flex-direction:row; justify-content:center; align-items: center; } .post-card-read-link { width:100%; height:100%; border-radius:100px; border:1px solid #fff; transition: all 600ms ease-out !important; } .post-card-read-text { font-size:14px; letter-spacing:3px; text-transform: uppercase; transition: all 600ms ease-out !important; } function magneticEffect(){ let card = document.querySelector('#%%ELEMENT_ID%%'); let readBox = card.querySelector(".post-card-read-box"); let readLink = card.querySelector(".post-card-read-link"); console.log("magnetic card elements: ", card, readBox, readLink); readBox.addEventListener("mousemove", function(e){ /* Read Box…

Proton VPN CLI Commands

Login protonvpn-cli login username #then enter your password Connect protonvpn-cli connect # protonvpn-cli c Choose country and server protonvpn-cli status # protonvpn-cli s Disconnect protonvpn-cli disconnect # protonvpn-cli d How to use the kill switch The ProtonVPN official Linux app includes a kill switch. The basic kill switch will block all your internet connections when the VPN app is running and the connection to one of our servers fails. To enable it, enter: protonvpn-cli ks --on The app also features an always-on…

Semantic Markup Tools: Product Ontologies

In semantic SEO, ontologies and taxonomies are essential. In other words, understanding the relations and the hierarchies between things are vital. Knowing those and using them in schema markup tells the search engine what your web page is about. This method increases the visibility of your products and services in the latest generation of search engines, recommender systems, and other novel applications. In this post, I'll share some valuable tools.

Semantic HTML Tags

Highlighted Recommendations

My notes are mostly based on the articles published on oncrawls website.   The original article was published on OnCrawl.


Introduction to Digital Marketing

Introduction to digital marketing notes. Those notes include basic definitions a various marketing concepts.