teleren/devto huggingface dataset:
What is Microfrontend??
Published: 2023-01-15 16:16:31

Microfrontends is an architectural pattern that involves breaking down a monolithic frontend application into smaller, independently deployable modules or "microfrontends." Each microfrontend is responsible for a specific feature or set of features and can be developed, tested, and deployed independently of the other microfrontends.

This approach allows for more flexibility and scalability in the development process, as well as increased reusability of code. It also enables teams to work on different features in parallel and reduces the risk of conflicts and regressions.

Microfrontends can be implemented in a variety of ways, such as using iframes, web components, or server-side rendering. They can also be integrated with different technologies and frameworks, such as React, Angular, Vue, or Polymer.

The main disadvantage of this approach is that it can be complex to implement and test, and it can require a significant amount of coordination between teams. Also, the communication between microfrontends can be a bottleneck, and it can lead to issues with performance and security.
Welcome to the realm of the information age
Published: 2023-01-15 16:12:34


![Microsoft 365](https://blog.amitpuri.com/assets/img/uploads/Microsoft365-optimized.png)

The world is witnessing change daily, and so is the business model. The ever-evolving software applications automate business processes in newer and better ways with the promise of machine learning, data science, and artificial intelligence. This loosely defines digital transformation as inculcating the spirit of innovation and strengthening the value stream, thereby, in a way, improving organizational efficiencies to yield better results for your customer. According to Gartner, digital transformation efforts are making their way and speeding up with hybrid workforce models.

> This is an excerpt from my book that I am writing on Microsoft 365, Power Platform, and Microsoft Teams.

Stay tuned! Learn about Microsoft 365, Microsoft Teams, Power Platform, Development, and Cloud.

Read more here [/book excerpts](https://blog.amitpuri.com/category/citizen-development)
Laravel creates a database based Menu package
Tags: webdev, laravelframework, opensource, laravel
Published: 2023-01-18 00:47:41

---
title: Laravel creates a database based Menu package
published: true
date: 2023-01-15 15:31:48 UTC
tags: webdevelopment,laravelframework,opensource,laravel
canonical_url: https://blog.devgenius.io/laravel-creates-a-database-based-menu-package-d67706bf53ec
---

[![](https://cdn-images-1.medium.com/max/2600/0*TeDPHmg7YPJG9rGt)](https://blog.devgenius.io/laravel-creates-a-database-based-menu-package-d67706bf53ec?source=rss-17217f29618a------2)

Laravel creates an admin panel from scratch — Part 21

[Continue reading on Dev Genius »](https://blog.devgenius.io/laravel-creates-a-database-based-menu-package-d67706bf53ec?source=rss-17217f29618a------2)
"Stop stressing...there's an AI for that"... 7 super cool AI tools for creators
Tags: ai, programming, discuss
Published: 2023-01-15 15:26:59

Are you tired of using a pencil and paper to bring your ideas to life? Well, step into the future and check out these cool AI tools that will take your creations to the next level. 
These tools are so advanced, they'll make Van Gogh roll over in his grave (but don't worry, he won't mind - he's probably too busy painting with AI in the afterlife)."

1. Grammar and style checkers, which use natural language processing (NLP) to detect errors and suggest improvements in writing. Grammarly and Hemingway are two popular examples.

2. Automatic summarization tools, which use NLP to condense long pieces of text into shorter summaries. Examples include Gensim and OpenText.

3. Image and video editing software, which use computer vision and machine learning algorithms to automatically edit and enhance visual content. Adobe and Corel are popular software in this field.

4. Music composition and production software, which use AI and machine learning to assist in creating and producing music. Amper Music is one example.

5. Chatbot development tools, which enable content creators to build interactive chatbots for websites and mobile apps. Dialogflow is one such tool.

6. AI assisted speech generation and voiceover tools can be used to produce professional voiceovers and speeches. Vocalizer from Amazon, Google Cloud Text-to-Speech are some of the examples.

7. Language Translation tools: Google Translate, Microsoft Translator, DeepL and more are tools which can be used to translate text from one language to another.
Markdown tips beyond basics on dev.to
Tags: osdc
Published: 2023-01-15 15:15:44

---
series: OSDC
---
# Create a series of blog posts
To make a series out of several blog posts, add the following to the beginning of every post in that series:

```
---
series: SomeSeriesName
---
```

# Link to somebody's dev.to profile
For example:
@shulyavraham

```
@person_username
```


# Include an embedded person's card 
For example:
{% embed https://dev.to/shulyavraham %}

```
{% embed https://personBlogURL.com %}
```
ESLint + Prettier (Vue 3)
Tags: vue, vscode
Published: 2023-01-15 15:08:38

After creating a new Vue 3 application using either [create-vue](https://github.com/vuejs/create-vue) or [vite](https://vitejs.dev/guide/) do the following steps:

## 1. Install the following dev dependencies

```sh
yarn add -D @babel/eslint-parser eslint eslint-config-prettier eslint-loader eslint-plugin-prettier eslint-plugin-vue prettier
```

## 2. Add .eslintrc.js file in the project root

```javascript
module.exports = {
  root: true,
  env: {
    node: true,
    browser: true
  },
  extends: [
    "plugin:vue/recommended",
    "eslint:recommended",
    "plugin:prettier/recommended"
  ],
  rules: {
    "prettier/prettier": "error",
    "vue/component-name-in-template-casing": ["error", "PascalCase"],
    "no-console": process.env.NODE_ENV === "production" ? "error" : "off",
    "no-debugger": process.env.NODE_ENV === "production" ? "error" : "off"
  },
  globals: {
    $nuxt: true
  },
  parserOptions: {
    parser: "@babel/eslint-parser",
    requireConfigFile: false
  }
};
```

## 3. Add .prettierrc.json in the project root

```json
{
  "tabWidth": 4,
  "semi": false,
  "singleQuote": true
}
```

## 4. Optionally you can add a jsconfig.json file in the project root

```json
{
  "compilerOptions": {
    "baseUrl": ".",
    "paths": {
      "~/*": [
        "./*"
      ],
      "@/*": [
        "./*"
      ],
      "~~/*": [
        "./*"
      ],
      "@@/*": [
        "./*"
      ]
    }
  },
  "exclude": [
    "node_modules",
    ".nuxt",
    "dist"
  ]
}
```

## 5. If you have installed the Prettier extension, check settings.json if the following is configured:

```json
{
  "editor.formatOnSave": true,
  "editor.codeActionsOnSave": {
    "source.fixAll.eslint": true
  },
  "[html]": {
    "editor.defaultFormatter": "esbenp.prettier-vscode"
  },
  "[css]": {
    "editor.defaultFormatter": "esbenp.prettier-vscode"
  },
  "[scss]": {
    "editor.defaultFormatter": "esbenp.prettier-vscode"
  },
  "[javascript]": {
    "editor.defaultFormatter": "esbenp.prettier-vscode"
  },
  "[typescript]": {
    "editor.defaultFormatter": "esbenp.prettier-vscode"
  },
  "[vue]": {
    "editor.defaultFormatter": "esbenp.prettier-vscode"
  },
  "[yaml]": {
    "editor.defaultFormatter": "esbenp.prettier-vscode"
  },
  "[jsonc]": {
    "editor.defaultFormatter": "vscode.json-language-features"
  }
}
```
Looking for a IOS dev Co- Founder @ post-revenue startup that's making social media less addictive for the 🌎!
Tags: ios
Published: 2023-01-15 15:03:34

HI All!
I'm the co-founder of BeTimeful.com, a Post-revenue startup that's making Social Media Less Addictive for the 🌎!

We're looking for a savvy IOS developer to join as co-founder to benefit from the shining future that's ahead of us while being able to make a much needed difference for the world.

If this sounds interesting, please shoot me an email Daniyal@betimeful.com before someone takes it away!
[MAC] Make Windows 10 USB bootstrap With macOS
Tags: macos, windows10, win10usbinstall
Published: 2023-12-30 12:44:25

---
title: [MAC] Make Windows 10 USB bootstrap With macOS
published: true
date: 2023-01-15 15:03:02 UTC
tags: 
- macOS
- Windows10
- win10usbinstall
canonical_url: https://www.kmp.tw/post/makewindows10usbbootstrapwithmacos/
---

# Situation

### Want Make A Windows 10 USB Bootstrap

# What Does You Need Prepare

- Windows 10 ISO
- USB Disk >= 8GB, Format to `MS-DOS FAT`
- Install `wimlib`

# How To
## Step 1 Mount ISO
![macwithwin1001](https://img.kmp.tw/macwithwin1001.png)
## Step 2 Install `wimlib` Using Command
```
brew install wimlib
```


## Step 3 Sync ISO's File To USB Disk exclude `install.wim`
```
rsync -av --exclude=sources/install.wim /Volumes/CCCOMA_X64FRE_ZH-TW_DV9/ /Volumes/win10/
```

## Step 4 Split `install.wim` To USB Disk
```
wimlib-imagex split /Volumes/CCCOMA_X64FRE_ZH-TW_DV9/sources/install.wim /Volumes/Win10/sources/install.swm 3800
```
### The 3800 Mean The File Should Split 3800 MB

![macwithwin1002](https://img.kmp.tw/macwithwin1002.png)

## Done~

### [Ref](https://alexlubbock.com/bootable-windows-usb-on-mac)
Top 5 Advantages of Using ASP.NET Core
Tags: donetcore, aspdotnetcore, opensourse, crossplatform
Published: 2023-01-15 14:49:36

**1. Cross-platform compatibility** 
One of the main advantages of .NET Core is its ability to run on multiple platforms, including Windows, Linux, and macOS. This allows developers to build and deploy applications on a wide range of systems, without the need to rewrite code or use different frameworks.

**2. Open-source and community-driven** 
.NET Core is an open-source framework, which means that it is freely available and can be modified and distributed by anyone. The active community of developers working on .NET Core also means that there are many resources and libraries available to help with development.

**3. Improved performance**
.NET Core has been designed to be more lightweight and modular than the full .NET framework. This means that applications built with .NET Core will typically have better performance and a smaller footprint than those built with the full .NET framework.

**4. Cloud-ready**
.NET Core includes built-in support for cloud-based development and deployment. This makes it easy to build and deploy applications on Azure and other cloud platforms, and to take advantage of cloud-based services such as storage and databases.

**5. Containerization support** 
.NET Core has built-in support for containerization, which makes it easy to deploy and run applications in containerized environments such as Docker. This allows for faster and more efficient deployment and scaling of applications.

In summary, .NET Core is a powerful, open-source, and cross-platform development framework that provides a wide range of benefits to developers, including better performance, cloud-ready capabilities, containerization support, and community driven development. This allows for more efficient and versatile software development and deployment.
Setting css variable in VueJs
Tags: vue, css, tutorial
Published: 2023-01-15 14:35:54

---
title: Setting css variable in VueJs
published: true
description: Setting css variable  in VueJs
tags: vuejs, css, tutorial
cover_image: https://dev-to-uploads.s3.amazonaws.com/uploads/articles/zd36v12i6g4uqpaapaen.png
# Use a ratio of 100:42 for best results.
# published_at: 2023-01-08 09:28 +0000
---

Hi🤚

In this tutorial I will show you how to set css variable in VueJs application.

Sometimes we need to change color text and/or background of our elements. To make it I change value of css variable according to the condition.

[Full DEMO](https://nrl0z6.csb.app/) 
> Change window with to see result.


### CSS Variables

I created css variables: `--bg-color` and `--text-color` and using like this:
```ts
background-color: var(--bg-color)
color: var(--text-color)
```

### Computed VueJs

In VueJs I use computed field `cssColors` with this conditions:
```ts
cssColors() {
      if (this.width > 1000) {
        return {
          "--bg-color": "#212121",
          "--text-color": "#fff",
        };
      }

      if (this.width > 500 && this.width < 1000) {
        return {
          "--bg-color": "#FF00E5",
          "--text-color": "#2DFFE6",
        };
      }

      return {
        "--bg-color": "#fff",
        "--text-color": "#000",
      };
    },
```

### Method VueJs

For watching window width i using method `getWidth` and get `window.innerWidth` like this:
```ts
getWidth(e) {
  this.width = window.innerWidth;
},
```

[Source code](https://codesandbox.io/s/css-variable-vue-nrl0z6)


#### About me
I`m designer and frontend developer. My [github](https://github.com/voronovam).
What is state controlled form in React js?
Tags: webdev, javascript, react, beginners
Published: 2023-01-15 14:26:15

**In this blog we are going to discuss controlled form in React js.**

> Pre-requisites : You only need to know basics of React and it's hooks. If you don't know, I am sure you can follow along as it is beginner friendly

So, for controlled form inputs, we are going to use
- useState hook
- onChange event

**What is useState?**
It is a react **hook** (special functions) that allows you to have state variables in **functional** components. You pass the initial state to this function and it returns a variable with the current state value and a function for manipulating the state value.

**What is onChange event ?**
The **onChange** event in React detects when the value of an input element changes. It is triggered when the element loses focus.

Now, let's see the code 

```jsx
import {useState} from 'react';

export default function App() {
  const [name, setName] = useState("");

  const handleSubmit=(e)=>{
       e.preventDefault();
       // probably console log it or send to server via api
  } 

  return (
    <div className="App">
      <h1>
        React form
      </h1>
      <form onSubmit={handleSubmit}>
        <input 
        type="text"
        value={name}
        onChange={(e)=> setName(e.target.value)}
        placeholder="Enter name..."/>
        <button type="submit">Submit</button>
      </form>
    </div>
  );
}
```

Here, we have converted a normal form to a controlled form. It is because we are controlling the form data via states. The initial state is being taken `value` attribute, now whenever we change the input field, the `onChange` event will be triggered and **setName** function will be invoked to change the value of `name` to the input inside the field `e.target.value`. This way, we are letting React handle our form data in the component itself.

---
That is the end. If you have any query, drop it in the comment section below. If you think this blog has any error or wrong info, please let me know. 

I hope I could help you understand the topic 😀. If yes, please share it with your friends and others so that this could benefit them too! Till then , keep REACT-ing ❤🚀

Follow me on: 
[Github](https://github.com/Suman373)
[LinkedIn](https://www.linkedin.com/in/sumanroy369)
[Twitter](https://twitter.com/sumanroy369)
Please STOP with “fix all high and critical” CVEs
Tags: cve, cybersecurity, informationsecurity, hafizmuhammadattaullah
Published: 2023-01-15 14:25:28

Please STOP with “fix all high and critical” CVEs.
 
It's a poor way to manage security risk.
 
Here's why:
 
- Only “about 5% of [all CVEs] represent real risk right now for most firms.”
 
Per Kenna Security (https://bit.ly/3dtHGvh).
 
- “In practice, most firms…use heuristic strategies to prioritize their remediation efforts; for example, a common approach is to remediate all vulnerabilities above a certain severity score. However, many of the common heuristics used by firms have been found to be sub-optimal…and in some cases, no better than randomly choosing vulnerabilities to remediate.”
 
According to an interesting study (https://bit.ly/3p02pgo) by Jay Jacobs, Sasha Romanosky, Idris Adjerid, and Wade Baker, PhD.
 
Similarly:
 
- The “PCI-DSS [v. 3] mandate requires that vulnerabilities scoring [CVSS] 4+ be patched, which is equivalent to an efficiency of random patching,” according to the same paper.
 
Frankly, this is WORSE than random, because it takes time for teams to score and then prioritize the results…when they could have just as easily run a random number generator or used alternating days/weeks to decide which issues to fix.
 
Finally:
 
- “While some research shows that a strategy of patching by CVSS score is no better than random…our results show that a strategy of patching CVSS score 9+ performs significantly better than random," per Jacobs, Romanosky, Adjerid, and Baker.
 
Thus, if you are going to continue to use CVSS for patching/remediation, it makes more sense to use a strategy targeting issues with CVSS 9+ (e.g. “criticals”), but this is still a far cry from the optimal path.
 
What are the alternatives?

1/ Technical investigation.

This is time-consuming, but having your developers confirm whether or not any impacted classes are affected - and if so, what the impacts might be - can give you a much clearer picture of the risk posed by a CVE.
 
2/ Use the Exploit Prediction Scoring System (EPSS).

This freely-available data set rates the "all other things equal" likelihood of exploitation for a range of CVEs. While much better than “fix all highs and criticals,” the EPSS still leaves some things to be desired.
 
3/ Buy a commercial tool to prioritize vulnerabilities.

Proprietary tools may have more or more recent data available and can better help you identify risks based on your business- or network-specific context. With that said, these generally only solve for likelihood of exploitation, not impact.
 
In any case, please STOP pursuing a strategy of fixing “all highs and criticals.” You are wasting valuable resources.
 
Let me know what I got wrong in the comments.
Beginning of learning Web
Tags: webdev, beginners, ux
Published: 2023-01-15 14:20:46

Finally started learning Web Dev....

#UI/UX
These two words seem same but are actually different.
##UI:-
A UI designer is one who decides the display or the interface of a website. He / She decides where to place the button, images, texts and everything which will be experienced by the user while going through the website.
##UX:-
A UX designer is one who took the responsibility of the experience of the user after visiting the website. He / She is responsible for what the user feels after going through the website.
##Conclusion:- 
If explained by an example, a UI designer decides where should a button be placed on the website and UX designer is responsible for what should be the button color or feature to make it user friendly and make the user experience better.
#Frontend developer
He / She is one who design the user interface.
In simple words, we can say when we open a website the whatever we see on the screen the button , the images, the text etc is designed by a frontend developer.
## Differences between UI designer and frontend developer
UI designer is one whose tells where to place the components while a frontend developer writes an executable code for it.
#Backend developer:-
He / She is one who works the internal features that run on a server rather than directly on a user's device. The term backend comes from their position at the back of an application.
He / She works on testing and maintaining the server, debugging issues etc.
MyIP
Published: 2023-01-15 13:43:27

# MyIP
**DOWNLOAD** https://github.com/franafp/MyIP
**Simple programa que muestra tu IP, país, y tu código de país con la API de [myip.com](https://myip.com)**

<p><img src="https://user-images.githubusercontent.com/48841069/212543043-a08e0787-0049-4d01-bcbc-736724c45333.png" height="400px" alt="franafp myip"></p>

# Code

```python
# Importamos los modulos que usaremos
import os, requests
from pystyle import Write, Colors

iprequest = requests.get("https://api.myip.com").json() # Hacemos una peticion a la API de myip.com
ip = iprequest["ip"] # Definimos la variable ip con el valor de la IP que nos devuelve la API
country = iprequest["country"] # Definimos la variable country con el valor del pais que nos devuelve la API
cc = iprequest["cc"] # Definimos la variable cc con el valor del codigo del pais que nos devuelve la API

os.system("title franafp - MyIP") # Definimos el titulo de la consola
while True: # Creamos un bucle infinito al pulsar cualquier tecla para refrescarlo infinitamente
    os.system("cls") # Limpiamos la consola
    Write.Print(f"[MyIP] User: {os.getlogin()}\n", Colors.green_to_yellow, interval=0.02) # Mostramos el usuario del sistema operativo
    Write.Print(f"[MyIP] IP: {ip}\n", Colors.green_to_yellow, interval=0.02) # Mostramos la IP
    Write.Print(f"[MyIP] Country: {country}\n", Colors.green_to_yellow, interval=0.02) # Mostramos el pais
    Write.Print(f"[MyIP] Country Code: {cc}\n", Colors.green_to_yellow, interval=0.02) # Mostramos el codigo del pais
    os.system("pause >nul") # Una pausa para refrescar la consola
```

# Credits
<p align="center">
<a href="https://www.twitter.com/fran_afp_" target="_blank" rel="noreferrer"><img
src="https://img.shields.io/twitter/follow/fran_afp_?logo=twitter&style=for-the-badge&color=0891b2&labelColor=1c1917"
/></a><a href="https://www.github.com/franafp" target="_blank" rel="noreferrer"><img
src="https://img.shields.io/github/followers/franafp?logo=github&style=for-the-badge&color=0891b2&labelColor=1c1917" /></a>
 <a><img alt="YouTube Channel Views" src="https://img.shields.io/youtube/channel/views/UCDIMj1pa2HqUMegbemddwCw?color=0891b2&label=VIEWS&logo=youtube&logoColor=FF0000&style=for-the-badge&labelColor=1c1917"></a>
 <a><img href="https://franafp.es" src="https://img.shields.io/badge/website-franafp.es-0891b2?style=for-the-badge&logo=data:image/png;base64,aHR0cHM6Ly9mcmFuYWZwLmVzL21lZGlhL2toZWlzLnBuZw==&logoWidth=14&color=0891b2&labelColor=1c1917"></a>
</p>