teleren/devto huggingface dataset:
Run artisan command instantly in the background using Symfony process component
Tags: laravel, php, symfony, asynchronous
Published: 2022-05-23 06:28:19

Sometimes we want to optimize an API response time but we can't optimize it because the API has operations that can't be moved to background jobs, we need to perform them in the foreground.

In this type of situation, the __Symfony process__ component can help.

When the API is called, we will perform the most important steps like creating/updating main table records, rest of the steps can be moved to an artisan command which will be run instantly in the background using the __Symfony process__ component.

__Code:__
```
function runBackgroundProcess($command, $data)
{
 $phpBinaryFinder = new PhpExecutableFinder();

 $phpBinaryPath = $phpBinaryFinder->find();

 $process = new Process ([$phpBinaryPath, base_path('artisan'), $command, $data]); // (['php', 'artisan', 'foo:bar', 'json data'])

 $process->setoptions(['create_new_console' => true]); //Run process in background 
 $process->start();
}
```
Just call the above function in your regular PHP code flow and we can achieve asynchronous kind of functionality with this approach. 

__Tip: Use a table to track process failure.__
Quick Guide: React Router V6 Changes
Published: 2022-05-23 06:26:50

React is Open Source and keep Evolving Project, that takes continuous Bug fixes, Introduces New feature and more!

React recently Updated React Router to V6 which have introduced major new Features and some changes to which we will take a look into!

Quick summery about REACT-ROUTER- **WHAT IS REACT ROUTER?:** Let's say you have a `<Nav />`  bar into your website with several `<li>` like 'shop, about, contact' etc. so react-routing help us to jump on this components with simple click on that text. that's the simple explanation to it

here are some major changes into REACT-ROUTER-V6:

- instead of `<switch>`, that introduces new tag `<Routes>` which is advance version of `<switch>`, i.e now keyword 'exact' is not longer needed as <Routes> has by-default behaviour of 'exact' keyword.
(**what is switch?** : switch tag help us to jump on target page 'Exactly' for more info refer to : https://www.youtube.com/watch?v=jVtxC6CKzYU&ab_channel=kudvenkat)

- while declaring `<Route>` path and component, now instead of component, use 'element={}' and component should be in jsx format
**`(e.g <route path='/about' element={</About /> />)`**

- Removed `<Redirect>` inside `<switch>`, now if you wanted to use `<Redirect>`, use it inside `<Route>`.

These were some major changes over V5, it's now more easier, faster, and powerful to use, comment more of the changes if you know! and That's pretty it.
Build and Deploy a React Admin Dashboard App With Theming, Tables, Charts, Calendar, Kanban and More
Tags: react, webdev, dashboard
Published: 2022-05-23 06:24:40

Every web developer needs to build a React Admin Dashboard Application. Learn how to create the best and most modern one simply by watching this course. This Admin Panel includes one Dashboard, Three Pages, Four Apps, and Seven fully functional charts! 

⭐Syncfusion Components: https://bit.ly/39pzH3R 

⭐Syncfusion React Components: https://bit.ly/3lhzpyB 

📚 Materials/References: GitHub Code (give it a star ⭐): https://github.com/adrianhajdin/proje... 

Styles & Other Code: https://gist.github.com/adrianhajdin/... 

Assets: https://minhaskamal.github.io/DownGit... 

You'll learn how to build a fully functional calendar, a kanban board, a WYSIWYG editor, and a color picker, as well as seven different charts! Alongside building this phenomenal application, in this video, you'll learn: - Advanced React Best Practices such as folder and file structure, hooks, and refs - Advanced State Management of the entire application using React Context API - And most importantly you’ll learn how to use Syncfusion - World's Best UI Component Suite for Building Powerful Web, Desktop, and Mobile Apps 
 

{% youtube jx5hdo50a2M %}
We are building an open-source no-code platform NocoBase
Tags: nocode, lowcode, node, react
Published: 2022-05-23 06:18:16

We started this idea 2 years ago. Although there are still many bugs to fix and many features to develop, we release an alpha version recently. Hope it will help you to develop internal tools.

![NocoBase Blocks](https://www.nocobase.com/images/feature/blocks.gif)

## Who is NocoBase for 🏖️🏖️🏖️

NocoBase is designed for you if you have the following needs.

- Develop an internal management system
- Meet most of your business needs with no-code development
- Meet particular needs with regular development
- The system requires frequent changes
- Private deployment with full control of code and data
- Free to use or pay for more technical support

## Why NocoBase is different 🚀🚀🚀

### 1. Separate "data structure" and "user interface"

Most form-, table-, or process-driven codeless products create data structures directly in the user interface, such as Airtable, where adding a new column to a table is adding a new field. This has the advantage of simplicity of use, but the disadvantage of limited functionality and flexibility to meet the needs of more complex scenarios.

NocoBase adopts the design idea of separating the data structure from the user interface, allowing you to create any number of blocks (data views) for the data collections, with different type, styles, content, and actions in each block. This takes into account the simplicity of codeless operation, but also the flexibility like native development.

![NocoBase is different](https://docs.nocobase.com/static/2.collection-block.7dcc928f.png)

### 2. Separate "system configuration" and "system usage"

NocoBase is used to develop relatively complex business systems. In these scenarios, we want the system developers and the system users to be different roles. The user sees a mature, well-designed system, like a product developed natively, rather than a rigid, drag-and-drop free system that can be modified at any time; while the developer can quickly develop the system using a WYSIWYG approach.

![NocoBase is different](https://docs.nocobase.com/static/2.user-root.824f5ef2.gif)

## 3. Everything is plugins

NocoBase adopts plugin architecture, all new features can be implemented by developing and installing plugins. In the future, we will build a plug-in marketplace where extending functionality is as easy as installing an APP on your phone.

![NocoBase plugins](https://www.nocobase.com/images/NocoBaseMindMapLite.png)

## Get NocoBase 🍺🍺🍺

Homepage:  

[https://www.nocobase.com/](https://www.nocobase.com/)

Demo:

[https://demo.nocobase.com/new](https://demo.nocobase.com/new)

GitHub:

[nocobase/nocobase: NocoBase is a scalability-first, open-source no-code/low-code development platform. (github.com)](https://github.com/nocobase/nocobase) 

## Feedback ❤️❤️❤️

Bug & Feature:

[Issues](https://github.com/nocobase/nocobase/issues)

Discussions：

[Discussions](https://github.com/nocobase/nocobase/discussions)
Image Recognition in Mobile App
Tags: ios, imagerecognition, swift
Published: 2022-05-23 06:21:13

The key aspect of the Goloc app is image recognition, a field which permits massive opportunities for one’s own innovative approaches. In this case study, my goal is to demonstrate my path of creating an application in this sphere that went on to gain considerable market traction.

The app was created to find information about buildings in one’s vicinity by adjusting the radius in the application. It is the world’s first app that gives clients information about buildings and places with a snapshot. Everyone can contribute with pictures and information regarding buildings and places all over the world and thus create the best travel app ever. The added locations are examined by the team before release.

## It has following key features:
- Sync with Wikipedia
- Image recognition
- Search database by image
- Geolocation
- Reviews
- Facebook & SMS share

The app can search locations nearby by image, geolocation, and name. A user can capture a building on camera and the application will recognize the image and will show object details with an accuracy of about 90%.


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

Users can see and edit all object details: name, images, address, description, and reviews. The application shows user contacts and allows one to invite any friend from the contacts list or from Facebook.

## Working process
The core feature of the app is image recognition of a captured photo and search info about found objects. Image recognition was a hard and challenging task to implement. I tested various methods, and used different approaches and libraries to find the most accurate search results.

## Scope of the project:
 Wireframes, Specification, UX/UI design, App Development, Testing, Publication.

## Step by step process:
First of all, starting the app creation with the industry investigation and exploring my potential competitors’ offers I came up with the key aspect of the Goloc app, image recognition.

Further, I went on developing a comprehensive setlist of features for Goloc and, after coming up with its UX/UI design, embarked on the actual development journey. It consisted of building the App's core and parsing Wikipedia articles to develop the function of giving the clients information about buildings and places with a snapshot. Finally, After connecting the Search database by image to the app and testing it, I released it.

## Technology stack:
 Objective C (iPhone), Swift (iPhone).

## How does the app recognize snapshots?
Image recognition, in the context of machine vision, is the ability of software to identify objects, places, people, writing and actions in images. The app uses machine vision technologies in combination with a camera and artificial intelligence software to achieve image recognition.

Image recognition in-app is used to perform image content search and find places nearby, making the app innovative and providing lots of opportunities for its implementation, both in day-to-day life and as a part of other products.
Writing meaningful HTML on the web and Why you need it?
Tags: webdev, html, tag, web
Published: 2022-05-23 06:20:28

In the world of web development, the two most commonly used tags are div tags and span tags. Although they can be used for any purpose, they may not be suitable for search engines.

HTML semantic tags are extensively used by search engines to extract the essence of a webpage. More information about SEO and how search engines work can be found [here](https://developers.google.com/search/docs/advanced/guidelines/get-started-developers).

Semantic HTML means HTML that includes meaning behind its elements. In other words, what is the structural significance of each piece of content on the page? Is it an article, or something that isn't the main focus of the page? Is it emphasised vocally? Is this an address or an abbreviation?

At the heart of accessible websites is semantic, meaningful HTML. Indeed, leveraging all that HTML has to offer, rather than limiting yourself to plenty of divs and spans, gets you a great start on an accessible website.

## Here are some HTML tags with semantic meaning:

- **article** `<article></article>`
represents a piece of content that exists independently of a document or website, such as a newspaper article or a blog entry.
- **header** `<header></header>`
represents introductory content, which typically includes a heading, a logo, and, on occasion, navigation links.
- **footer** `<footer></footer>`
typically found at the bottom of a webpage and contains information such as a disclaimer, links to privacy policies, social media, contact information, and a copyright statement.

So, do you know about any other semantic HTML tags?
INICIAR UN PROYECTO EN REACT
Published: 2022-05-23 06:08:08

Hola devs

Empezar un proyecto en React suele ser muy complicado, con tantas herramientas de compilación, el uso de muchas dependencias, archivos de configuración y otros requisitos previos para escribir lineas de código en React.

## CREATE-REACT-APP

El create-react-app es una excelente herramienta para nuestros inicios. Nos permite crear y ejecutar proyectos muy rapidos y lo mejor, que no requiere ninguna configuración manual.

Esta herramientas envuelve todas las dependencias requeridas como "webpack" y "babel".

## REQUISITOS

Debemos de considerar los siguientes dos requisitos:
1.- versión NODEJS >= 8.10
2.- versión NPM >= 5.6

## INSTALACIÓN

Aprendamos a instalar la herramienta create-react-app mediante los siguientes pasos:

1.- Instalar React usando el administrador de paquetes npm, con el siguiente comando:

```
npm install -g create-react-app
```

## CREACIÓN DE NUESTRO PRIMER PROYECTO

Una vez que la instalación haya sido exitosa, podemos crear nuestro primer proyecto en React utilizando la herramienta create-react-app mediante el siguiente comando:

```
npx create-react-app nuevo-proyecto
```

Veras que tardará unos minutos en crear el proyecto y es normal (ten paciencia).

## EJECUTAR

Finalmente para ejecutar un proyecto en React deberas escribir en la consola:

```
npm start
```
初學AI一週心得 -- 如何接觸AI、AI的學習資源推薦！
Published: 2022-05-23 06:05:43

嗨，這篇文章是我自己開始接觸AI的心得，自從接觸到「反脆弱」這本書後，就覺得AI的觀念蠻適合反脆弱的，於是開始接觸、學習AI，到現在差不多一個禮拜，在這邊跟大家分享一個完全不懂AI的人要怎麼接觸AI，以及AI的概念的學習資源。


# 如何接觸AI

要接觸AI的話，首先要先知道自己在學習AI上的定位，究竟是：

1. 覺得AI很酷，想了解看看
2. 有一些事情想做，想改善公司、工作、學習流程
3. 想快速接觸Tensorflow之類的程式，或者成為AI工程師

每個人對於AI都有不一樣的想法，我自己是2，希望可以在AI之中找到跟語言相關的內容。所以我這邊主要著重在AI的概念上，希望可以由淺至深，從概念到實做一步步地理解。下面的兩個推薦課程就包含了AI的概念與應用方式，以及AI的核心技術理論。透過學習這兩個課程，可以讓自己對AI有更好的理解，也可以為將來的各種應用做出變化。

如果你是1的話，AI for Everyone就蠻適合你的，3blue1brown的有點太細節。
如果你是3的話，說實話，我無法給太多建議，但這兩個課程都偏理論，想要直接上手的話可以直接去找Tensorflow相關的，例如 Deep Learning Specialization。

由於我自己喜歡從大局著手，下面兩個分享的都是比較廣泛的理論內容，不妨可以參考看看。除此之外，我也推薦可以從各個論壇找關鍵字，例如 AI roadmap，或是how to learn AI，都會得出不錯的結果。


# 推薦的AI學習資源

話不多說，直接介紹要怎麼學AI，關於我自己對AI的理解會放在最後面，我這邊會介紹兩個我這次接觸AI的主要學習資源。

## 關於AI的一切 - AI for Everyone

https://www.deeplearning.ai/program/ai-for-everyone/
推薦程度：★★★★★
難易度：★☆☆☆☆
先備知識：無
時間：4~6 hrs
費用：免費

這門課是國際知名AI大神 Andrew Ng 吳恩達所製作的AI入門課程，以一個宏觀的角度講解何謂AI，裡面**完全沒有**要寫程式的地方。

我自己在看這堂課的時候，有個感覺是Andrew一定是抱持著希望每個找他問AI的人都看過這部影片的心態在製作，不管你是學生、上班族、甚至是公司的經理或老闆都可以從這一系列的影片獲取AI的觀念。

裡面我覺得特別有價值的地方有兩點：

1. 一間公司或一個人要如何從零開始AI
2. AI到底是什麼，跟媒體講的有什麼不一樣

一般人只要想到AI，就會覺得AI無所不能，而Andrew算是破解了這個迷思，但同時也用很多範例說明了雖然AI並不能通天，但還是可以做到很多事情。同時也講解了我們要怎麼開始AI的幾個步驟，步驟也都在影片裡面詳細的列出來，並附加說明。

舉例來說好了，Andrew並不建議一間公司一開始找一堆人啟動一個AI的大專案，而是從小地方開始找人，並循序漸進的從小資料開始蒐集，並慢慢往AI公司的方向前進。其中也分析了AI到底是適合自己做，還是適合外包。

總的來說，這門課雖然沒有講述AI的運作機制，但卻可以讓人知道AI的能與不能，讓往後在進行AI專案的時候有個藍圖可以參考。


## 3blue1brown - Neural Networks系列

https://www.youtube.com/playlist?list=PLZHQObOWTQDNU6R1_67000Dx_ZCJB-3pi
推薦程度：★★★★☆
難易度：★★★☆☆
先備知識：無，但有矩陣的知識會比較好理解
時間：1~2 hrs
費用：免費

數學、資訊普及界的大神 3blue1brown 想必大家都不陌生，他以圖像化數學知識聞名，可以將生澀難懂的知識以youtube動畫的方式呈現出來。這個系列就是他以動畫方式呈現AI中深度學習的一環 -- 神經網路 Neural Network。

對於不知道什麼是神經網路的同學，這邊簡單講解就是，在AI的"超能力"中，有一個能力，也是最廣泛被使用的能力就是，可以讓電腦接觸一大堆正確資料，而AI會從那些資料學習出一套方法，讓不知道答案資料透過AI也可以得出結果。其中AI的學習方法中，神經網路是最廣泛使用的概念。

也就是說，神經網路可以說是AI中最重要的一項概念。

在這一系列的影片中，3b1b將神經網路以多角度、圖像化的方式呈現，從神經網路的構成，到機器是如何從一次又一次的循環之中"學習"出方法來的，裡面都有做詳細的說明。雖然裡面沒有教你要怎麼一步步地把AI寫出來，但知道這些AI的運作模式後，想必未來在進行專案時能夠更清楚知道軟體的運作模式，而不是純粹地照本宣科。


# 結語

看完這兩門課程，我確實對AI有了更好的理解，如果我是公司的高層的話，我看完這些課程之後我就可以開始想公司如何能夠運用AI，並了解如何與AI工程師溝通。假如你沒有要自己寫程式的話，這樣的AI知識其實就已經足夠應付很多場合了。

話雖如此，我還會繼續往後走，我的下一步是進行 Andrew Ng 在 deeplearning.ai 上開設的 Deep Learning Specilization。這門課程是2017年開的，今年六月會迎來一波大更新，我打算在六月時再上這門課。屆時再跟大家分享這門課的心得感想。
04 - Cloud Solution Architect – Learn and Unlearn
Tags: cloud, architecture, career
Published: 2022-05-23 05:45:56

Technology will come and go. Learning and learning will be a part of life for a CSA. 
https://youtu.be/KKBdqzPbXSY
{% youtube KKBdqzPbXSY %}
For more please subscribe 
https://www.youtube.com/c/TechTalksWriju?sub_confirmation=1
03 - Cloud Solution Architect – Build your network
Tags: cloud, career
Published: 2022-05-23 05:34:25

Build your network. Talk to people. Make friends.  

https://www.youtube.com/watch?v=JsXM6dCoCmk

{% youtube JsXM6dCoCmk %}

For more please subscribe 
https://www.youtube.com/c/TechTalksWriju?sub_confirmation=1
JupyterHub addons for microk8s
Tags: kubernetes, datascience, machinelearning
Published: 2022-05-23 04:58:16

I find [microk8s](https://microk8s.io/) is pretty to use for dev and light-usage environment like a small lab or team of data scientists. 

I wrote an addon for it to quickly let people to install jupyterhub to a microk8s cluster with one command.

{% embed https://github.com/yuhuishi-convect/jhub-addon %}
How to Setup and run Cypress Test cases In Azure DevOps Pipeline
Published: 2022-05-23 04:50:16


![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/uy2r56t24npvz9rfjfp6.jpg)

How to Setup and run Cypress Test cases In Azure DevOps Pipeline

https://qaautomationlabs.com/how-to-setup-and-run-cypress-test-cases-in-azure-devops-pipeline/
HTML
Tags: html, webdev, beginners
Published: 2022-05-23 04:45:54

## HTML Introduction

HTML is a formatting system of our documents over the internet. It is a short form of _Hyper Text Markup Language_. **Mainly it gives the structure of Web Pages**. 

British scientist Sir **Tim Berners-Lee** first introduced with it at the CERN nuclear physics laboratory in Switzerland during the 1980s. 

HTML markup tags specify document elements such as **headings, paragraphs, and tables**. They mark up a document for display by a computer program known as a **Web browser**. The browser interprets the tags, displaying the headings, paragraphs, and tables in a layout that is adapted to the screen size and fonts available to it. Although it also contain _anchors_ which helps to hyperlink another web page. 

So, **a marked-up document contains two types of text:** 
1. text to be displayed and 
2. markup language on how to display it.
What is a component in react?
Published: 2022-05-23 04:13:24

Components are the building blocks of any React app and a typical React app will have many of these. Simply put, a component is a JavaScript class or function that optionally accepts inputs i.e. properties(props) and returns a React element that describes how a section of the  User Interface should appear.

You can create your first component like this code:
const Greeting = () => <h1>Hello World today!</h1>;

Source:https://medium.com/the-andela-way/understanding-react-components37f841c1f3bb#:~:text=Components%20are%20the%20building%20blocks,(User%20Interface)%20should%20appear.
What in the Dev do I want?
Published: 2022-04-11 04:17:03


![direction arrows](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/9d47nqc5es7jir84r2xj.jpeg)

I recently attend a virtual event for a company looking to advertise themselves to potential new employees for their software engineering department. 

Like a lot of these events there was rich history great cultural representation. A current staff member of their software team to help answer Q & A. 

But unlike some of the other events I have attended this one was different, because at the end before we all signed off of our session the recruiter gave us all a some advice in this job search process. 

Don't just apply for a job... 🤔🤔🤔. He said apply for a career 🤯🤯🤯. I know that sounds like such a simple statement, but it was extremely impactful to all of us at the event. He continued to explain, We didn't just go to school or bootcamp or self study just for a job. We did it to start something more. Just cause you check the boxes doesn't mean you fit the company🤯🤯🤯.

He gave us a series of question to ask before applying for any job including the ones available at the company he was representing.

1) What kind of dev do I want to be? 
2) Why do I want to be a part of this company? 
3) Do I fit the culture? 
4) Can I be successful at this place? 

On the surface these all seem like simple question, but for the ones who are like me. Just coming out of school and looking to get our first job in tech. Running into the job market full steam ahead without and direction. It may benefit us if we take a step back and answer some of these question and move forward with a better since of direction.

I hope for the ones who are in it, going through or have been through it. These steps will help narrow it down and make it easy for us all to find our place in the tech world. 

Happy Coding 👨🏿‍💻👨🏻‍💻👩‍💻🧑🏾‍💻
HTML Node vs Element & The Difference.
Tags: html, help
Published: 2022-05-23 03:56:38

Hello! 
    Today my blog will address the difference between a Node and an Element.

##Node vs. Element

A node is generally *any object* in the Document Object Model (DOM) tree. Think of it like a family. The DOM is made up of a hierarchy of nodes where each node can have a parent, child nodes, a nextSibling and previousSibling. Elements or html elements like body tag, div, and span, are a specific type of node. Nodes are the generic version of HTML elements and are made up of the many different components that create a webpage, where on the other hand elements are specified as one particular type of node, addressed with a HTML tag. Some important nodes to consider: 

- __Element Node__
- __Text Node__
- __Comment Node__
- __Document Node__
- __Document Type Node__

The nodetype property of a node interface differentiates the nodes as document nodes, text nodes, comment nodes, and elements. 
***

Everything shown in this example below taken from [](https://www.webmound.com/node-vs-element-in-javascript-dom/)  is a node.
```html
 <!DOCTYPE html>
 <html lang="en">

 <head>
    <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
   <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Node VS Element in JavaScript DOM</title> </head>

 <body>
    <!-- This is comment node -->
    <h2>This is heading</h2>
    <p>This is paragraph</p>
 </body>

 </html>
```
***
A key thing to remember while traversing the DOM is that an HTMLCollection return elements while a NodeList return nodes. Both of them may be manipulated like arrays but unlike arrays they lack the ability to be used by Higher Order Functions (HOF).

I hope my blog was able to clear up the difference between a node and an element. Thank you for taking the time to read it!

-Christopher Nance
How to react to @nuxt-i18n locale changes inside the setup function
Tags: nuxt, nuxti18n, compositionapi, hacks
Published: 2022-05-23 03:45:27

If you are using Nuxt v2, nuxt-i18n and you want to react to i18n object changes inside the `setup` function, let's say, a language change, this blog will teach you how. 

I also cover how to use localized messages inside the setup function in this other [article](https://dev.to/d4g0/how-to-access-localized-messages-of-nuxt-i18n-inside-the-setup-function-53o1).

Let's say for instance, you want to craft a special url to point to other site, but you want to keep the current language of your user in the link:

```js
setup(props, ctx) {

// all the stuff is in the root
const { root } = ctx;

const mapedURL = ref("");
const baseUrl = "https://my.other-site.com";

function setUrl() {
    const isInSpanish = ctx.root.$i18n.localeProperties.code == "es";
    if (isInSpanish) {
        mapedURL.value = baseUrl;
    } else {
        mapedURL.value = baseUrl + "/en/";
    }
}



function triggerWatch() {
    // keep traking on language changes when page loads
    // hint: this dosen't work in edge properties like *.localeProperties.code
    watch(ctx.root.$i18n.localeProperties, (newV, oldV) => {
        setUrl();
    });
}

// init when page loads
onMounted(() => {

    // this watch will brake in the server so ignore there
    if (!process.client) {
        return;
    }

    setUrl();
    triggerWatch();
});

  return {
    mapedURL
  }
}

```

Tested in Nuxt v2 and nuxt-i18n v7. That's it folks.