teleren/devto huggingface dataset:
About !Important, the CSS Rule ...
Tags: webdev, css, beginners, html
Published: 2022-04-07 05:33:33

_"Where there is great power there is great responsibility" - Winston Churchill(1906)_

When debugging stylesheets, developers tend to misuse this (!Important value) power, which could be due to several reasons such as laziness, frustration or even deadlines and so on, forgetting about the rule of specificity. 

## The Rule of Specificity

The rule of specificity follows a hierarchy, There are four categories which define the specificity level of a selector:

1. Inline styles - Example: `<h1 style="color: pink;">`
2. IDs - Example: `#navbar`
3. Classes, pseudo-classes, attribute selectors - Example: .`test, :hover, [href]`
4. Elements and pseudo-elements - Example: `h1, :before`

## Possible uses cases of the !important rule

1.The !important rule are very useful in cases such as Custom user style sheets where users can make quick edits with the help of the browser to modify the style sheet to suit the user's needs.
2.The use of !important in Javascript syntax.

## Why you should not use !important

1.damages the code, 
2.makes debugging hard and 
3.Time exhausting especially on large projects; 

It is recommended for use only as a last resort or it should not be used at all.

## How to override !important
As curated from the mozilla developer documentation (https://developer.mozilla.org/en-US/docs/Web/CSS/Specificity) it can be overridden by: 

1.Adding another CSS rule with !important, and either give the selector a higher specificity (adding a tag, id or class to the selector), or add a CSS rule with the same selector at a later point than the existing one. This works because in a specificity tie, the last rule defined wins.
```
table td    { height: 50px !important; }
.myTable td { height: 50px !important; }
#myTable td { height: 50px !important; }
```_#myTable td gets executed due to specificity rule_

2.Refactoring the Code and removing every use of !important in the source code.

Hope this helps 😉.
Don't forget to like my post 😁💗 and If you have any feedback or questions, don't hesitate to comment below.
How to setup CodeBlocks for C for Noobs(Bangla)
Tags: programming, tutorial, c, codeblocks
Published: 2022-04-07 05:07:47



## জীবনে পিসিতে মুভি দেখা ছাড়া আর কিছু না করা পাবলিকের জন্য!


- তো আপনি ভার্সিটিতে সিএসই নিয়ে পড়ছেন বা শিখতে চান বা কপালের দোষে সেমিস্টারে সিএসই কোর্স পরে গেছে।

- ল্যাবে আছে মানধাতার আমলের পিসি।

- এই অবস্থায় স্যার বললেন নিজের ল্যাপটপে কাজ করতে!

- কিন্তু আপনি কোডিং(**Coding**) এর **"C"** ও জানেন না🙂

_তাহলে এই মুহূর্তে আপনার করণীয় কী?_

আপনার করণীয় হলো আমার পোস্ট টি পড়া!

খেয়াল করলে দেখবেন ক্লাসে স্যার বলেছেন নিজ ল্যাপটপে **CodeBlocks** নামাইতে(খেয়াল না করলে দেখবেন না)।

এখন আপনার প্রথম কাজ **Google** এ **CodeBlocks** লিখে সার্চ দেয়া।
বা আপনি সারাদিন বাসায় থাকা অলস মানুষ হলে ডাইরেক্ট [এখানে ](https://www.fosshub.com/Code-Blocks.html?dwl=codeblocks-20.03mingw-setup.exe)চাপ দিন।

ডাউনলোড শুরু হয়ে যাবে।

এরপর ল্যাপটপে অনেকগুলা মেসেজ দেখিবেন ইন্সটলের সময়, সবগুলায় হ্যাঁ চাপুন।
অতঃপর **CodeBlocks** চালু হয়ে যাবে।

_**Grepper**_
এবার Google এ [**Grepper Extension**](https://chrome.google.com/webstore/detail/grepper/amaaokahonnfjjemodnpmeenfpnnbkco?hl=en) লিখে সার্চ দিন।
প্রথম লিংকে গিয়ে **"Add to Chrome"** বাটনে চাপ দিয়ে এক্সটেনশান টি গুগলে এড করুন, এর ফলে কোনো কোড সার্চ দিলে সরাসরি কোডের ফলাফল গুগলে সবার উপরে আসবে।

এরপরে জাস্ট গুগলে _"hello world in C"_ লিখে সার্চ দিন, দেখবেন একটা কালো কোড বক্সে উত্তর আছে।
অতঃপর কপি পেস্ট করে ফেলুন কোডটি।

```
#include <stdio.h>

int main() {
   printf("Hello, world!");
   return 0;
}
```
তারপরে **CodeBlocks** এর মেনু ট্যাবের উপরের দিকে **"Build & Run"** বাটনে ক্লিক করলেই দেখবেন আরেকটা কালো বাক্সে(এটাকে বলে কন্সোল) **"Hello World"** লিখা আসবে।
এই **Hello World** জিনিসটাকে বলে **_String_**, সহজ বাংলায় যেকোনো শব্দ বা ওয়ার্ড কে কোডিং এর ভাষায় বলে **_String_**
এখন যে কোডিং পারে না তার সামনে গিয়ে পার্ট নেন একটু।
টা টা!
80 % of freshers fail to answers these javascript snippets 🔥
Tags: javascript, beginners, programming, tutorial
Published: 2022-04-07 04:16:05

**Q1. Guess the output:**

var truth = true;
let havingFunction = function()
{
if (truth)
{
var name = “vineet”
let lastName= “mishra”
}
console.log(name)
console.log(lastName)
}
havingFunction()

**Take a break don’t jump into output, think hard**

Output:

vineet
ReferenceError: lastName is not defined

**Reason**: This happens due to the variable scope where name variable has function and lastName is having local scope

**Q2. Guess the output:**

console.log(3 > 2 > 1);
console.log(1 < 2 < 3);

**take a break don’t jump into output, think hard**

Output:

false
true

**Reason**: In the first section of the snippet where 3>2>1 is false because when programs run it go for 3>2 which is true and then it goes for the other part which becomes “true >1" where the value of true is 1 then equation becomes 1>1 which going to false, vice versa happens for another snippet which is 1<2< 3

**Read more**

[Remix vs. Next.js: A Detailed Comparison
](https://dev.to/braincuber_technologies/remix-vs-nextjs-a-detailed-comparison-2ogg)

[Top JavaScript VSCode Extensions for Faster Development 🔥
](https://dev.to/braincuber_technologies/top-javascript-vscode-extensions-for-faster-development-597k)
Hitchhiker's guide to Node-Red
Tags: nodered, lowcode, api, automation
Published: 2022-04-07 04:10:41

Let’s use Node-RED components to create a simple “Hello, World” program. 
Our application will make a simple API GET request and it will send its output to the debug window. 
_Let me know in comments which Node-Red project are you working on?_

Read the complete guide here -> [Getting to “Hello, World” with the Low-Code Platform, Node-RED](https://blogs.cisco.com/developer/helloworldlowcodenodered01)
5 Ways to Overcome Writer’s Block as a Technical Writer
Tags: programming, writing, sidehustle
Published: 2022-04-07 04:08:25

## Simple ways to find topics for your stories
To be a successful technical writer or any kind of writer, you just need consistency. And to be consistent you need to generate new ideas for your articles.
When I started penning down my first blog about a year ago, I took a lot of time to write it. I had the topic but the writing was not easy. After this piece, I had no topics to write on.
I have come a long way from there, I have overcome Writer’s block. I have abundant topics to write on.
In this article, I am going to share a few ways to overcome Writer’s block —

## Keep a note of new things you learn at work
At work, we face new challenges every day. And we find solutions to these challenges.
Has it ever occurred to you, there are others who might be facing the same problem as you? Oh yes, for sure. This could be a topic for a technical blog you can write.
I keep a note of all the things I learn at work. These could be the choices you make in terms of language, framework, design, architecture, or process. If you pen down these ideas you will have enough topics to write on.

## Workplace dynamics
Post pandemic many of us are working from home, but the dynamics of our workplace still affect us. Affects could be positive or negative. You or others might be taking measures to make things better.
These are great things to write about. It could be about **_how different teams communicate effectively, how you have reduced the burden of meetings, how you managed a late project, why your workplace is healthy_**, etc.

## Explain basic concepts
As a programmer, you might be under the impression that everyone knows the basic concepts. These are some great topics to write about. I see a lot of successful writers still write about the basics of Python.
There are always people learning basic concepts. We might consider these topics trivial, but they are valuable to a lot of people.

## Listicles
Listicles are easy ones to write. You can compile others' work into a listicle.
I would not recommend writing only listicles, but writing a listicle once in a while is a great idea.

## Opinions & Advice
Writing my thoughts and opinion on a topic has worked well for me. I have received a few nasty comments but a few of these articles went viral.
Readers like to read others’ perspectives on a certain technology or a problem. This helps them look at technology, process, or a problem from different vantage points.

## Final Words
I am not an expert when it comes to writing. I am a newbie, but these kinds of articles have helped me to grow my audience and get some ghostwriting assignments as well.
GoogleAppsScript with ESBuild
Tags: typescript, googleappsscript
Published: 2022-04-07 03:28:26

日本語の記事は[こちら](https://qiita.com/mahaker/items/7beb8aaf357fb3c32144)

---

Google Apps Script does not allow import/export.
Also, generated code by the module bundler cannot be executed (in most cases).
The same was true for esbuild.

So, I created [esbuild-gas-plugin](https://www.npmjs.com/package/esbuild-gas-plugin).

This plugin provides code generation using [gas-entry-generator](https://github.com/fossamagna/gas-entry-generator).

The generated code is executable and import/export can be used!

Sample project is [here](https://github.com/mahaker/esbuild-tutorial).

Enjoy!!
🦾 Dependency management automation with Dependabot
Tags: github, security, maintenance, java
Published: 2022-04-07 03:17:39

## ❔ Intro

We (Java programmers) recently had to face 3 majors issues :

- Two on [Log4J](https://www.dynatrace.com/news/blog/what-is-log4shell/)
- One on [Spring](https://spring.io/blog/2022/03/31/spring-framework-rce-early-announcement).

In the mean time teams have an ever growing set of projects to manage.

⚠️ While you **often rely on public dependencies**, you also **can rely on your own private ones... which can themsleves depend on public ones and then present security flaws.**

👆 **In both cases, dependency management has to be performed at scale on your pipeline from build to deployment... as fast as possible... and on all your code.**

Sometimes, you just need to be aware that some of your dependencies are not up-to-date, for example to get new features.

In both cases : 

> _You don't have time to spend to monitor your favorite dependencies for each of your projects : you'd rather see someone else do the job._

Yet, when it's about security...

> _The job has to be done as fast as possible at scale... and without breaking existing software so the fix can be deployed as fast as possible._


This is what this post is about.

It will show how we achieve this as part of the CI with [Dependabot](https://github.blog/2020-06-01-keep-all-your-packages-up-to-date-with-dependabot/) :

{% youtube NHJSdEYDqRw %}
Coding course for absolute beginners (video)
Tags: javascript, codenewbie, beginners, youtube
Published: 2022-04-07 02:25:28

Hello community,

I want to share with you my new coding course for absolute beginners.

It is on my youtube channel. 

![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/3c5twsngvvq7f1j0woas.png)

Channel:
https://www.youtube.com/c/CodingAdventures

Coding lessons playlist:
https://www.youtube.com/playlist?list=PLZld0zbNGbZRfjut6JI7ZLx8ZbTDa5zn-

Feedback welcomed!
A Quick Universe Snippet
Tags: database, javascript
Published: 2022-04-07 02:16:42

This is about the multivalue database, Universe and a node library that I wrote to talk to it. I have an article about installing Universe if anyone wants to try using a more esoteric and weird database than the usual SQL ones :)

A quick snippet to select a file and read in every record. I'm using this to generate a file of ids and their descriptions. Doing this in BASIC would be quite easy as well, it would actually be identical for the most part but I can't catch the output as easily as just running the script with stout pointed to a file.

```
const mv = require("pick-mv");
const Universe = require("pick-universe");
const uv = new Universe("localhost", "username", "password", "/path/to/account");

uv.StartSession();

const INV = uv.Open("INVENTORY-FILE");
uv.Select(INV);

while (true) {
    let id = uv.ReadNext();
    if (id === null) break;
    let record = mv.MVMatrix(uv.Read(id, INV));
    console.log(id, record[[1]]);
}

uv.EndAllSessions();
```

The core code in BASIC, line wise, they end up very similar but performance wise, huge difference. I had to run the javascript version for 2 minutes versus the BASIC version that ran in a few seconds.

```
OPEN "INVENTORY-FILE" TO INV ELSE STOP

SELECT INV

LOOP
    READNEXT ID ELSE ID = ''
WHILE ID # '' DO
    READ RECORD FROM INV, ID ELSE RECORD = ''
REPEAT
```

It would be worth generating a vim snippet to automatically get hints for the functions. I also need to profile if it's worth doing this readnext in javascript or if its better to do it in C and then do the MVMatrix in javascript land.
Meet Oilly your friendly telegram bot that will save your car
Tags: productivity, node, firebase
Published: 2022-04-07 01:37:42

Hey dear fellow developers,

I have a problem remember changing my car oil, I almost every time drive 2000 km more or completely forget the fact that It's been a year since last change.

I needed it someone to remind me, someone who I can relay on...

Meet [@OillyBot](https://t.me/OillyBot) your friendly Telegram bot that will always notify you to change your oil on the right time!

See a gif demo 👉 [https://imgur.com/a/rSNZohL](https://imgur.com/a/rSNZohL)

Built in 5 days using **Nodejs** as the backend, **Firebase** as the database, **Vercel** as the hosting and **EasyCron** as the cronjob server.

**%100 free to maintain.**

I teased it up and shared my development journey in 4 part series here on dev community and my website [ahmednagi.com](https://ahmednagi.com).

I would highly appreciate your feedback on it.

You can find it on telegram by username @OillyBot or by using this link [t.me/OillyBot](https://t.me/OillyBot).

Cheers
using dexie and pinia in the same time
Tags: vue, pinia, indexeddb, dexie
Published: 2022-04-07 01:36:46

---
title: using dexie and pinia in the same time
published: true
description: 
tags: vue, pinia, indexeddb, dexie
---

For my app I'm using Vue3, pinia for state management, and dexie as indexedDB wrapper.

### my app work this way:
#### on Mount : 
data is fetched from dexie and saved in a pinia state.
then in my component , data is rendered from the state directly...
#### editing data:
as I add or edit my records: my pinia action functions update data directly on dexie db, then it's refetched on the pinia state.

#### My question is: 
is this a good solution for data management or should I get rid of pinia and only use dexie ?
does the fact that I use two data sources slow my app ? 

here is an example of my pinia state:
``` javascript
import { defineStore, acceptHMRUpdate } from 'pinia'
import type { IPatient } from '~/db/model'
import db from '~/db/db'

export const usePatientStore = defineStore('patient', () => {
  const patients = ref<IPatient[]>([])

  // Getters

  const getPatients = computed(() => patients.value)

  const getPatientById = (id: string) => {
    const index = patients.value.findIndex((item: IPatient) => item._id === id)
    return patients.value[index]
  }
  const PatientsNames = () => {
    return patients.value.map((item: IPatient) => item.name)
  }

  const getPatientName = (id: string) => {
    if (id !== '')
      return patients.value.filter((item: IPatient) => item._id === id).map((i: IPatient) => i.name).toString()

    else return ''
  }

  // Actions
  async function fetchPatients() {
    patients.value = await db.table('patients').toArray().then(result => result.filter(el => el.deleted === false))
  }
  function addPatient(payload: IPatient) {
    db.table('patients').add(JSON.parse(JSON.stringify(payload)))
    patients.value.push(payload)
  }
  function editPatient(payload: IPatient) {
    payload.updatedAt = Date.now()
    db.table('patients').update(payload._id, JSON.parse(JSON.stringify(payload)))
    const index: number = patients.value.findIndex((item: IPatient) => item._id === payload._id)
    patients.value[index] = payload
  }
  function deletePatient(id: string) {
    db.table('patients').update(id, JSON.parse(JSON.stringify({ deleted: true, updatedAt: Date.now() })))
    const index: number = patients.value.findIndex((item: IPatient) => item._id === id)
    patients.value.splice(index, 1)
  }

  return {
    patients,
    getPatients,
    getPatientById,
    PatientsNames,
    getPatientName,
    fetchPatients,
    addPatient,
    editPatient,
    deletePatient,
  }
})

if (import.meta.hot)
  import.meta.hot.accept(acceptHMRUpdate(usePatientStore, import.meta.hot))

```
#41 - Split Strings Codewars Kata (6 kyu)
Tags: javascript, webdev, tutorial, 100daysofcode
Published: 2022-04-07 01:23:39

##Instructions
**Task**
Complete the solution so that it splits the string into pairs of two characters. If the string contains an odd number of characters then it should replace the missing second character of the final pair with an underscore ('_').

**Examples:**
> * 'abc' =>  ['ab', 'c_']
> * 'abcdef' => ['ab', 'cd', 'ef']


---

##My solution:


```javascript
function solution(str){
   var arr = str.split('')
   var res = []
   
   for(let i = 0; i<arr.length; i+=2){
     if(arr[i+1]) res.push(arr[i]+arr[i+1])
     else res.push(arr[i]+'_')
   }
  
  return res
}
```


---

##Explanation
First I made an array of the string, and an array to save the result
```javascript
   var arr = str.split('')
   var res = []
```

---

After that I used a loop to iterate through the array, and in every iteration I'll add two to the value of "i", so it iterates every two elements.
Inside of this loop I'll check if there is another element next to the one being iterated if it has another one It'll push the current element and the next one to the result array, if not it'll push the current element plus an underscore.

```javascript
   for(let i = 0; i<arr.length; i+=2){
     if(arr[i+1]) res.push(arr[i]+arr[i+1])
     else res.push(arr[i]+'_')
   }
```

---

At the end I just return the result array
```javascript
   return res
```


---

**What do you think about this solution? 👇🤔**

[My Github](https://github.com/Cesardlr)
[My twitter](https://twitter.com/cesar__dlr)
[Solve this Kata](https://www.codewars.com/kata/515de9ae9dcfc28eb6000001)
Understanding Data Types in Java
Tags: beginners, java, programming, codenewbie
Published: 2022-04-07 00:55:21

## Background

Data types play a very important role in all programming languages but more so when it comes on to strictly typed languages.  Some of the more well known strictly typed languages include C# and Java.  But what does strictly-typed means?.

In very simple terms, strictly-typed programming languages are languages where every variable/object when being created must be declared of some type.  The type will be determined by the kind of data that the programmer intends to store or operate on.   For example, if he/she intends to store a user's name in a variable then that variable would be declared using the following syntax:

	data-type variablename;
		
	String userName;

The type that a variable is declared with will determine the kind of operations that can be done on it.  For example, the variable created above, could be joined/concatenated to another variable or value using the "+" operator which, coincidentally is also the addition operator that is used with numerical variable/values.  Other common String operations include making it all upper or lowercase.  The main idea to be understood here is that the data types determine which operations can and cannot be executed.


## Primitive and Non-Primitive

There are essentially two (2) data types in Java, primitive and non-primitive.  A primitive data type is one that can store simple values or better yet a single value.  Examples of primitive data types include byte, int, boolean, short, long, float, char, double.  Eight (8) in total.

A non-primitive data type on the other hand is one that can store multiple or more complex values. The non-primitive data types in Java are classes, objects, Strings, Arrays, Interfaces. 

String being a non-primitive is kind of peculiar but comes down to the fact that a String is an immutable array of characters that has its own set of methods to perform operations on it such as toUpperCase().  In this way, by having its own methods would mean that String is a class, hence a non-primitive data type.

## Enforcing Data Types

So how is the data type enforced? If you try to run a Java program with an incorrect data type stored in a variable or object etc, that program would throw an error.  Even before that, as you type your code, most modern IDEs would indicate the error by either highlighting it or underlining it with red squiggles.  The error would need to be corrected before your program would run successfully.

## Closing

Having a firm understanding of this foundation concept is important if anyone is to become successful at using Java.

Thanks for the taking the time out to read my post. It is truly appreciated. If you want to know more about my journey follow me at:

https://www.ryancampbell.codes

Twitter: @coding_scorpion

Github: https://github.com/FikraDev
How to Properly Hash and Salt Passwords in Golang Using Bcrypt 🔒
Tags: go, tutorial, productivity, programming
Published: 2022-04-07 00:42:49

## Prerequisites
- Download the golang bcrypt library using `go get golang.org/x/crypto/bcrypt`.

## Hashing
```go
// Hash password using the bcrypt hashing algorithm
func hashPassword(password string) (string, error) {
  // Convert password string to byte slice
  var passwordBytes = []byte(password)

  // Hash password with bcrypt's min cost
  hashedPasswordBytes, err := bcrypt.
    GenerateFromPassword(passwordBytes, bcrypt.MinCost)

  return string(hashedPasswordBytes), err
}

func main() {
  // Hash password
  var hashedPassword, err = hashPassword("password1")

  if err != nil {
    println(fmt.Println("Error hashing password"))
    return
  }

  fmt.Println("Password Hash:", hashedPassword)
}
```

## No Need to Salt Passwords
Bcrypt uses a concept named `cost` which represents the number of hash iterations that bcrypt undertakes. Hashing time is calculated as `2 ^ cost` and the higher the cost, the longer the hashing process takes.

This deters attackers because they can't quickly brute force a password match and increasing computational power will do little to help. Bcrypt uses a variable named `bcrypt.MinCost` as a default cost and any cost lower defaults to `bcrypt.DefaultCost`.

## Password Matching
```go
package main

import (
  "fmt"
  "golang.org/x/crypto/bcrypt"
)

// Hash password
func hashPassword(password string) (string, error) {
  // Convert password string to byte slice
  var passwordBytes = []byte(password)

  // Hash password with Bcrypt's min cost
  hashedPasswordBytes, err := bcrypt.
    GenerateFromPassword(passwordBytes, bcrypt.MinCost)

  return string(hashedPasswordBytes), err
}

// Check if two passwords match using Bcrypt's CompareHashAndPassword
// which return nil on success and an error on failure.
func doPasswordsMatch(hashedPassword, currPassword string) bool {
  err := bcrypt.CompareHashAndPassword(
    []byte(hashedPassword), []byte(currPassword))
  return err == nil
}

func main() {
  // Hash password
  var hashedPassword, err = hashPassword("password1")

  if err != nil {
    println(fmt.Println("Error hashing password"))
    return
  }

  fmt.Println("Password Hash:", hashedPassword)

  // Check if passed password matches the original password
  fmt.Println("Password Match:",
    doPasswordsMatch(hashedPassword, "password1"))
}
```

```markdown
Password Hash: $2a$04$kcsOln10l5Gm0lSgQmlrhuS0T9u124J3HfrAr9tnHltr9u7.iUsJm
Password Match: true
```

Consider signing up for my <a href="https://gregorygaines.substack.com/subscribe">newsletter</a> or <a href="https://www.gregorygaines.com/support/">supporting me</a> if this was helpful. Thanks for reading!