vicainelli

CSS Snippets

Highlight an element on page

Blur the rest of the page and highligh some element, good to show new features/changes

vicainelli

{
  "editor.stickyScroll.enabled": true,
  "editor.scrollbar.horizontal": "hidden",
  "editor.scrollbar.vertical": "hidden",
  "security.workspace.trust.untrustedFiles": "open",
  "workbench.settings.editor": "json",
  // * Editor
  "editor.cursorSmoothCaretAnimation": "on",
  "editor.accessibilitySupport": "off",
  "editor.renderWhitespace": "boundary",

vicainelli

import { mount } from '@cypress/vue';
import Toast from '@/components/toast';
import '@/assets/css/style.css';

const toastTemplate = {
  template: `
    <div class="w-screen h-screen bg-grey-200">
      <div class="text-center pt-8">
        <button @click="$refs.toast.success({ title: 'New action, pushing the previous one', description: 'Description for the action, containing links' })">Success</button>
        <button @click="$refs.toast.error({ title: 'Action failed', description: 'Sorry, your action didn’t come through' })">Error</button>

vicainelli

TailwindCSS snippets

• loading spinner: https://play.tailwindcss.com/u2QagzrBWk?layout=horizontal

vicainelli

Sign Up Form React Typescript

Error message

TypeScript error in FormSignUp.tsx(43,19):
Argument of type '{ [x: string]: string; }' is not assignable to parameter of type 'MyState | ((prevState: Readonly<MyState>, props: Readonly<{}>) => MyState | Pick<MyState, keyof MyState> | null) | Pick<...> | null'.
  Type '{ [x: string]: string; }' is missing the following properties from type 'Pick<MyState, keyof MyState>': name, email, confirm_email  TS2345

vicainelli

const makeInitial = (name) => {
    const rgx = new RegExp(/(\p{L}{1})\p{L}+/, 'gu');

    let initials = [...name.matchAll(rgx)] || [];

    return (
        (initials.shift()?.[1] || '') + (initials.pop()?.[1] || '')
    ).toUpperCase();
}

vicainelli

function nestedLoop(obj) {
    const res = {};
    function recurse(obj, current) {
        for (const key in obj) {
            let value = obj[key];
            if(value != undefined) {
                if (value && typeof value === 'object') {
                    recurse(value, key);
                } else {
                  	// Do your stuff here to var value

vicainelli

document.querySelector('img[srcset*="fbcdn"]')
    .srcset.split(',').pop()
    .match(/\bhttps?:\/\/\S+/gi)[0]

vicainelli

Hey Developer, have you heard about the new experimental feature of Chrome DevTools?

It's called CSS Overview, and it shows you the colors, font info, unused declarations, and media queries.

To enable it in your Chrome or Brave browser

vicainelli

<template>
  <component
    :is="href ? 'a' : 'button'"
    :href="href ? (disabled ? '#' : href) : null"
    :type="href ? type : type != null ? type : 'button'"
    :class="[this.baseClass, this.variationClasses, this.blockClasses]"
    :disabled="disabled"
    :role="href === '#' ? 'button' : null"
  >
    <slot />