Skip to content

Latest commit

 

History

History
148 lines (123 loc) · 4.65 KB

tips-webdev.md

File metadata and controls

148 lines (123 loc) · 4.65 KB
HTML
<a href="tel:+1-123-456-7890">1-123-456-7890</a>
<a href="sms:+1-123-456-7890">New SMS Message</a>
<a href="mailto:[email protected]?subject=Hai">E-mail to Friend</a>
<a href="https://wa.me/?text=Hello">WhatsApp</a>
<p contenteditabl=true>This content is editable</p>
Credits: https://twitter.com/csaba_kissi/status/1493852940200726534?s=20&t=A3d-qYSHfyatT94emvHSzg

<!-- Edit content of a page -->
<body contenteditable> </body>
JavaScript
/* Detect Dark Mode Preference with JavaScript */
const isDarkMode = window.matchMedia && window.matchMedia("(prefers-color-scheme:dark)").matches

/* Edit your live website in Google Chrome while making Design Mode: ON */
document.designMode = 'on'

/* Check if the element if focused */
const searchInputEl = document.querySelector("input#top-nav-search-q.search-input-field");
const isFocused = searchInputEl === document.activeElement
searchInputEl.onfocus = (e) => { console.log('Search focused.') }
searchInputEl.onblur = (e) => { console.log('Search out of focus...') }

/* Computed Style */
const htmlEl = document.getElementsByTagName('body')[0]
const computedStyle = window.getComputedStyle(htmlEl)
console.log(computedStyle['backgroundColor']);  // rgb(13, 17, 23)
console.log(computedStyle['font-size'])         // 14px
console.log(computedStyle['font-family'])       // -apple-system, "system-ui", "Segoe UI", Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji"

/* Fast and easy way to create a unique ID in JavaScript */
export const uid = () => {
  const fromDate = Date.now().toString(36);
  const fromRnd = Math.random().toString(36).substr(2);
  return `${fromDate}${fromRnd}`
}

/* Display objects in a table view */
const items = [
  {id: 1, name: 'Apple'},
  {id: 2, name: 'Banana'},
  {id: 3, name: 'Carrot'},
]
console.table(items);

/* ---- Customize console log - start ---- */
const origLogFunc = console.log
console.log = (msg, err) => {
    origLogFunc.call(console, `${new Date().toLocaleString()} - ${msg}`, err)
}
console.log("Hello JavaScript", new Error("Test error message"));   // Thu, 10 Mar 2022 15:24:57 GMT - Hello JavaScript Error: Test error message

// Restore back the console log
console.log = origLogFunc
/* ---- Customize console log - end ---- */

/* Prevent the user pasting text in the input box */
inputEl.addEventListener('paste', function(e){
  e.preventDefault()
})

/* Array destructure */
const fruits = ['Apple', 'Banana', 'Orange', 'Mango'];
let {0: apple, 3: mango} = fruits;
console.log(`0 => ${apple} & 3 => ${mango}`);   // 0 => Apple & 3 => Mango

Google Developer tools tips:

/* Get a text value from all the <span> via Devtool console */
let controllers = $$('div.opblock-tag-section h3.opblock-tag a.nostyle span').map((node) => node.innerText)
console.log(JSON.stringify(controllers, null, 2))
Web Development

Domain: @Namecheap
Hosting: @vercel
Backend: @Firebase
Frontend Builder: @webflow
Onboarding: @intercom
Logo: @logologydesign
Design: @canva
Copywriting: @canva
Analytics: @canva
Email Marketing: @canva

Free Illustration Sites
🔹blush.design
🔹drawkit.io
🔹humaaans.com
🔹icons8.com
🔹iconscout.com
🔹illustrations.co
🔹iradesign.io
🔹isometric.online
🔹manypixels.co
🔹openpeeps.com
🔹pixeltrue.com
🔹storyset.com
🔹undraw.co

Every UX/UI designer should know these websites! by @uiuxadrian (UI Adrian)

1️⃣ pixabay.com - 2.6M+ free images
2️⃣ coolors.co - amazing and super fast color palette generator!
3️⃣ patternpad.com - generate beautiful svg patterns ✨

Using NVM
# Install the long-term support version of Node.js 16
nvm install 16 --lts

# Make the newly installed Node.js 16 as the default version
nvm alias default 16

# Switch to the newly installed Node.js 16
nvm use 16
JavaScript Animation Libraries
  • Mo.js
  • Three.js
  • Anime.js
  • Velocity.js
  • Vivus.js
Copyright Free Images
1. Unsplash
2. Pexels
3. Drawkit
4. Undraw
5. Freeimages

Credits: Rohith Thalla

Twitter Bots
  • @pikaso_me screenshot this
  • @SaveToNotion #thread | @SaveToNotion #Tweet