DEV Community: dippas

Fun way to sort users in talks/meetings

dippas — Thu, 23 Dec 2021 05:22:25 +0000

Hi there,

You know those daily meetings that almost everyone have nowadays mostly virtually due to Covid-19? It can be hard to start them, specially in large teams, because no one knows if its their turn to talk or not, maybe want to respect hierarchy or something else.

With that in mind (and a few other reasons) in the beginning of the pandemic I created just for fun and as dare from my co-workers a way to randomly sort the order in how everyone in each team would speak everyday.

As this was just for fun and in house project I created a few extra features such as:

daily quotes to boost the day
the shuffler user (the user who would shuffle the order in every day)
number of rounds the shuffle would sort, completely random also.
sound of deck cards shuffling
confetti effect when shuffle had finished sorting (with an extra audio - 20th Century Fox Intro Flute - which is an inside joke in my team)

This project was well received in the team and others also inside the company that more than a year passed it is still used everyday.

But the project was basic, being built with Vue 2 without components (file extension was .js) nor ES6 modules

Today I show you the improved version of this project, it is built with:

Vue 3
SCSS
Pug
Vite
JSON Server

It has a few new features/improvements:

CRUD application with JSON Server (with ability to upload image/avatar stored in base64, fallback to UI avatars API if no image provided)
Daily Random Background from Picsum API
New quotes API and it's author with picture from Quoteable API
Layout improvement - the shuffle sorting works in mobile

dippas / shuffler

Fun way to sort how people will start talking in meetings, with daily quotes to boost your day

Shuffler

Fun way to sort how people will start talking in meetings, with daily quotes to boost your day

Show your support

Give a ⭐️ if you enjoyed this project!

Status

Built With

Getting Started

Installation

npm i

Development

Run json-server and let it running

npm run db

Run project in another terminal at the same time

npm run dev

Build for Production

npm run build

Locally preview production build

npm run preview

Features

Shuffle Randomly Users (with random rounds between 5 and 10)
CRUD application with JSON Server (with ability to upload image/avatar stored in base64, fallback to UI avatars API if no image provided)
Randomly select daily who will shuffle
Daily Random Backgrounds from Picsum API
Daily Random Quotes and it's author with picture from Quoteable API
Sound of deck cards shuffling
Confetti effect when shuffle finished sorting (with an extra…

View on GitHub

Give a ⭐️ if in github you enjoyed this project or buy me a coffee!

Object-fit cross-browser solution

dippas — Sun, 01 Nov 2020 23:31:52 +0000

The object-fit CSS property is been very useful in websites nowadays, but there is still a caveat which is the need to support to Internet Explorer and/or EDGE (for some clients/projects at least).

So, with that in mind, there is a JavaScript snippet to make it cross-browser and which is simpler, lighter than the current polyfills out there.

First you'll need to add data-attributes in HTML & their respective CSS property:

HTML

<img data-object-fit='cover' src='//picsum.photos/1200/600' />
<img data-object-fit='contain' src='//picsum.photos/1200/600' />

CSS

[data-object-fit='cover'] {
  object-fit: cover
}

[data-object-fit='contain'] {
  object-fit: contain
}

Then with less than 10 lines of JavaScript code, you'll have a cross-browser solution.

ES6 version

if ('objectFit' in document.documentElement.style === false) {
    document.addEventListener('DOMContentLoaded', () => {
        document.querySelectorAll('img[data-object-fit]').forEach(image => {
            (image.runtimeStyle || image.style).background = `url("${image.src}") no-repeat 50%/${image.currentStyle ? image.currentStyle['object-fit'] : image.getAttribute('data-object-fit')}`
            image.src = `data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='${image.width}' height='${image.height}'%3E%3C/svg%3E`
        })
    })
}

Or if you don't use a transpiler, here's the transpiled version for ES5

if ('objectFit' in document.documentElement.style === false) {
  document.addEventListener('DOMContentLoaded', function () {
    Array.prototype.forEach.call(document.querySelectorAll('img[data-object-fit]'), function (image) {
      (image.runtimeStyle || image.style).background = "url(\"".concat(image.src, "\") no-repeat 50%/").concat(image.currentStyle ? image.currentStyle['object-fit'] : image.getAttribute('data-object-fit'));
      image.src = "data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='".concat(image.width, "' height='").concat(image.height, "'%3E%3C/svg%3E");
    });
  });
}

What does this code do?

It detects if the object-fit is not supported in the browser, if so, then replace the img for a svg

For the supported browsers it will run the CSS properties through the data-attributes

Frontend Starter-Kit

dippas — Thu, 29 Oct 2020 02:11:11 +0000

I've created this Frontend StarterKit, it allows you to have a quickly start in building your website.

It uses Gulp 4 as task runner, Pug as HTML template engine, with SCSS preprocessor and pure vanilla JavaScript (ES6+)

Has by default a Cookiebar compliant with EU rules, fully customizable.

Any feedback is welcome :)

Note: This StarterKit doesn't support Internet Explorer

dippas / Frontend-StarterKit

Frontend StarterKit - [Gulp 4, Pug, SCSS, ES6+]

This starterkit allows you to have a quickly start in building your website.

Give some love

Status

ChangeLog

You can check the changelog here

Setup

Download Node.js from your favorite browser here
Restart your PC (just in case)

Installation

Clone this project
Open the Project with your favorite IDE
Run the Shell
In the Shell run the following commands:
- pnpm i -g pnpm gulp gulp-cli (if is your first project using npm and gulp)
- pnpm i
- gulp build to compile files to dist folder

Features

A live-reloading server with Browsersync
Automated build process that includes, but is not limited to: SCSS compilation (with Autoprefixer included) and image optimization
Ability to add 3rd party plugins easily - gulp/_config.js
Minified CSS & JS in dist folder
SourceMaps for better debugging
Core…

View on GitHub

DeleteNonio - Extension for Portuguese news websites

dippas — Thu, 11 Jun 2020 18:10:34 +0000

I'm sharing with you another open source project of mine

dippas / DeleteNonio

A forma mais simples e eficaz de remover o NONIO

Today it turns 1 year old, so happy b-day :)

It is targeted for Portuguese news websites that runs the Nonio Platform.

A platform which doesn't comply with GDPR - you can see more details about that here - nonio.pt (not the official URL as everyone would think, the people behind the platform registered nonio.net instead)

Right now, the project does its job perfectly, but any feedback is always welcome.

Web Whatsapp Native dark Mode

dippas — Mon, 08 Jun 2020 05:14:36 +0000

Hi everyone,

I've made a simple, lightweight script to turn on the native dark mode (hidden so far) from whatsapp in web version.

All it does is add a class to the body. No extra CSS required.

dippas / WebWhatsapp-Native-DarkMode

Add the native Dark Mode to Web Whatsapp

Hope you guys enjoy as much I do (I'm a big fan of dark mode).

All the feedback is welcome and appreciated :)

EDIT: - Now available as extensions:

Chrome extension

Firefox addon

Edge Chromium

DEV Community: dippas

Fun way to sort users in talks/meetings

dippas / shuffler

Fun way to sort how people will start talking in meetings, with daily quotes to boost your day

Shuffler

Show your support

Status

Built With

Getting Started

Installation

Development

Build for Production

Locally preview production build

Features

Object-fit cross-browser solution

What does this code do?

Frontend Starter-Kit

dippas / Frontend-StarterKit

Frontend StarterKit - [Gulp 4, Pug, SCSS, ES6+]

Frontend StarterKit - [Gulp 4, Pug, SCSS, ES6+]

Give some love

Table of Contents

Status

ChangeLog

Setup

Installation

Features

DeleteNonio - Extension for Portuguese news websites

dippas / DeleteNonio

A forma mais simples e eficaz de remover o NONIO

Web Whatsapp Native dark Mode

dippas / WebWhatsapp-Native-DarkMode

Add the native Dark Mode to Web Whatsapp