teleren/devto huggingface dataset:
Startups? If you want them to know you exist they need to see you! Social media and community are the most effective way.
Tags: web3, community, startup
Published: 2022-05-24 11:23:53


Looking for social media & community management ? We do it!
[click here!](https://www.linkedin.com/company/ccreatly) - Our Linkein.
il.creatly@gmail.com -our mail
Self-documentation of Hire +Plus: V1 (3)
Tags: webdev, react, beginners, writing
Published: 2022-05-24 10:16:53

## What I cover

- Updates to project
- Lint warnings for tailwindcss
- Launch page

---

## Update: 

**For CSS:** I decided to switch to Tailwind CSS, I didn't want to spend too much time on custom CSS. Besides, it looks a lot better than what I can do lol. Therefore, I followed [these instructions](https://tailwindcss.com/docs/guides/create-react-app) to add tailwind to my react project.

**For routing:** I got rid of nesting routes, it is not needed at the moment for my purposes. It's this now

![index.tsx file](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/rq2f350wib9jgxm3nu3m.png)

## Lint warning with Tailwind
When importing the base tailwind CSS files in my index.css file
![tailwind base css](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/ifxhzf0yi760yw6ata6o.png)

I came across a lint warning of "unknownAtRules".  With the help of [this link](https://github.com/tailwindlabs/tailwindcss/discussions/5258), I was able to resolve it. I just had to ignore it in my vscode settings 

**Steps:** Create a `.vscode` folder in root dir, inside create a `settings.json` file, lastly I added this 
![ignore lint warning](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/34y9db5x9d5n4gn7rm0w.png)

## Launch page makeover
I redid the launch page with Tailwind. This is how it looks now
![Launch page of hire +plus](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/sls5u4e4cbpfze5eisdl.png)

I'm currently in the process of getting the sign-in and sign-up UI for employers and employees looking good. Stay tuned!

You can [check out the code](https://github.com/AjeaSmith/hire-plus-v1) for recent changes.
Build Static Blog with several lines of HTML and MD
Tags: webdev, opensource, react, discuss
Published: 2022-05-24 11:05:17

I've been working on a frontend project recently called [Nimblog](https://github.com/imchell/nimblog). It arose from my need to fast publish Markdown docs from HTML.

![Nimblog Home](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/cmb3zxskqozyobhycwb3.png)

I took it a step further by converting Markdown links ending in '.md' and '.txt' and with the 'text/markdown' content type to blog pages, which made it a lightweight static blog generator.

![Nimblog Post](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/us7l19q3m9cy7y93eytc.png)

Writers can put all files under the same folder like

```
index.html
your_essay_1.md
your_essay_2.md
your_pic_1.jpg
...
```

and write Markdown in `index.html`.

```html
<!DOCTYPE html>
<html lang='en'>
<head>
    <link rel="stylesheet" href="https://unpkg.com/nimblog/dist/production/nimblog.css">
    <meta charset='UTF-8'>
    <title>Nimblog</title>
</head>
<body>
# [Your Blog](/)
- [your essay 1](your_essay_1.md)
- [your essay 2](your_essay_2.md)
<script type='module' src='https://unpkg.com/nimblog/dist/production/nimblog.js'></script>
</body>
</html>
```

My goal is to make it qualified for:

📌 Being hosted by static hosting platforms like GitHub Pages, so Nimblog works on frontend. (done)
📌 Customizable themes. (done)
📌 Extensions.

You can check out its demo built with Nimblog:

https://nimblog.vercel.app/

What’s your advice on this project? Any feedback and GitHub stars ⭐️ are welcome. 😉

https://github.com/imchell/nimblog
Condour - A simple way to interact with the backend from the frontend
Tags: javascript, webdev, node, api
Published: 2022-05-24 11:02:20

Many developers, many programming languages, many ideas, but **ONLY** one way out.

I know many nodejs developers struggle to give up nice packages they used on the backend, when developing the frontend for the project (This includes me).

Making API request and being vulnerable to attackers and let them access your backend data, can be dangerous, and to make things easy Condour has a easy solution...


Install `express`, `body-parser` and `cors`

This will be the backend to run the code.
```js
// server.js
// Imports
const express = require("express");
const cors = require("cors");
const bodyParser = require("body-parser");
// Extra modules
const fs = require("fs-extra");
const nanoid = require("nanoid");

const server = express();
server.use(bodyParser.json());
server.use(cors({ origin: "*" }));
server.use(express.static("public"));

server.post("/condour", async (req, res) => {
  const body = res.body.code
  res.send(await eval(`try{${body}}catch(error){error}`));
});
server.listen(3500, () => {
  console.log("Server running on http://127.0.0.1:3500");
});
```

---


This will be your frontend code.
```html
// index.html
<!DOCTYPE html>
<html>
  <head>
    <script src="https://cdn.jsdelivr.net/npm/axios@0.27.2/dist/axios.min.js" crossorigin="anonymous" type="text/javascript"></script>
    <script src="https://cdn.jsdelivr.net/npm/jquery@3.6.0/dist/jquery.min.js" crossorigin="anonymous" type="text/javascript"></script>
    <script src="https://cdn.jsdelivr.net/gh/nigelrex/condour@main/condour.js" crossorigin="anonymous" type="text/javascript"></script>
  </head>
  <body>
    <!-- The rest of your project  -->
    <script>
        condour().request("nanoid.nanoid()"); // returns "yBfuyiHb209wWnAazTT0a" from the backend
    </script>
  </body>
</html>
```
Now any use of package must be imported in the backend server file. 

This is the most simple way to communicate with your backend.

Condour Options:
```js
condour({
  host: "https://your-server/your-path-to-request", // Defaults to /condour
  disableDevTools: true // This is to disable the devtools to open and let attackers access your backend. Defaults to true
});
```
The `disableDevTools` will not allow users to open your backend code, by disabling the dev tools.

Thanks for following up. Enjoy your dev time.

Have questions or want to report a bug or want to suggest??

Discord: https://discord.com/invite/ATrvrZtSqZ
Github: https://github.com/r-rajaneesh/condour
I made a Sorting Visualizer!
Tags: cpp, programming, opensource, showdev
Published: 2022-05-24 10:56:11

I always liked the Sorting Visualizer videos that YouTube recommended me like this one:

{% embed https://www.youtube.com/watch?v=kPRA0W1kECg %}

So, I decided to create my own Sorting Visualizer from scratch! I always liked this type of projects, so after thinking a little bit I decided to use C++ and SFML, and after a bit of tinkering and learning SFML, I did this:

![visualizer](https://camo.githubusercontent.com/a467a20bd0489640d65cd1d1cfb256083bffc79f3f5e8b275d90bf6e7d80b8ae/68747470733a2f2f692e696d6775722e636f6d2f54735777756d672e676966)

A few days ago I received my first two contributions, so I put more effort into the compatibility and improved everything about the project!

Here is the repository with all the info, I documented everything well and made a small wiki: https://github.com/alesbe/sorting-visualizer

Any suggestions are appreciated!

Thanks for reading! 🙌
How WebSockets actually work
Published: 2022-05-24 10:40:34

---
title: How WebSockets actually work
published: true
description: Looking into WebSockets and how to set up a simple server to send messages back and forth. I'm using a simple chat server example and sends messages from javascript and PHP.
tags:
cover_image: https://i.ytimg.com/vi/B9NjbxeQWUc/maxresdefault.jpg
---

{% youtube B9NjbxeQWUc %}

Looking into WebSockets and how to set up a simple server to send messages back and forth. I'm using a simple chat server example and sends messages from javascript and PHP.
How to use async/await inside for loop in JavaScript
Tags: javascript, webdev, tutorial, programming
Published: 2022-05-24 10:36:00

There will be a time when you would want to run async operations inside **for loops** (`ex. API calls`).

In this article, we will discuss the possible approach to combine async/await and iterative logic. Let’s take a look at how we can implement it in practice.

We are going to use - [for await...of](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Statements/for-await...of)

Below is the code which shows how the API calls inside a for loop can be performed. 

```javascript
let urls = [
"https://jsonplaceholder.typicode.com/todos/1",
"https://jsonplaceholder.typicode.com/todos/2"
]

async function makeAPICalls() {
    for await(const url of urls){
        console.log("Api call started for - ");

        let result = await fetch(url).then(res=> res.json());
        console.log("Result = ", result);

        console.log("Api call ended for - ");
    }
}

makeAPICalls();
```

### Output
```javascript
VM294:1 Api call started for - 
VM294:2 Promise {<pending>}
VM294:5 Result =  {userId: 1, id: 1, title: 'delectus aut autem', completed: false}
VM294:7 Api call ended for - 

VM294:3 Api call started for - 
VM294:5 Result =  {userId: 1, id: 2, title: 'quis ut nam facilis et officia qui', completed: false}
VM294:7 Api call ended for - 
```
&nbsp;
> There are many better ways, this is just another example you may want to use.
Help! Project design tips - nextjs mongodb
Published: 2022-05-24 10:35:23

I'm learning nextjs to build a web application. The data resides in a mongodb database. I have limited experience in nextjs so far, but as I understand it there are several methods to fetch and work with data.

**What I want to achieve:
- The user should be able to apply multiple filters on the data to narrow the scope.
- The user should be able to select amongst the filtered data and save records to personal list

**Notes:

- Database has 6000 records. Records will keep growing by 500 records per year.
- The user will work with the entire data scope several times to add record to their personal list.

**Solution ideas:
- I foresee a form with multiple filters; checkboxes, sliders, drop-downs. Either the data is filtered in "real-time" or the user could hit a "apply filter button".
- Ones the filtered data is shown a button is also shown together with each record from the db. Pushing the button would add that record to a separate list.

**Questions:
- What is the best approach to fetch and work with the data? Should I get all the data from mongodb (unfiltered) and apply filters later? Or should I send the filters in the mongodb query?
- Should I use getStaticProps, getServerSideProps or route the request to /pages/api to query mongdodb and return data?
- Should I use MongoDB Atlas Search instead to filter/search the data?

Thanksful for any advice!
How to Learn Data Structures & Algorithms in 90 Days? | Complete DSA Roadmap
Tags: database, algorithms
Published: 2022-05-24 10:32:29

00:00 - Intro
00:49 - Requirements for cracking a coding interview
02:07 - Why is DSA so important?
03:53 - Sponsored by Coding Ninjas
05:24 - Core Concepts of DSA
20:11 - How to create an efficient learning routine?
22:50 - Is Competitive Programming necessary?
25:49 - Advice for people who are getting into programming
27:44 - Conclusion

{% embed https://youtu.be/udt-kvHNt_o %}
Why HTML Is A Must For Every Website
Tags: html, beginners, webdev, tutorial
Published: 2022-05-24 10:18:59

HTML is the standard markup language for web pages. Every website you see was made with HTML, notable sites like [Google](https://www.google.com/), [w3schools](https://www.w3schools.com/), [youtube](https://www.youtube.com/) all have html as the foundation of the site.

## What is HTML Semantics
Semantic HTML is html code that has meaning, it is code that clearly explains the meaning of what it does to both the developer and the browser. This greatly helps with SEO and Accessibility.

## HTML Tags

### Container Tags

- &lt;h1&gt; - &lt;h6&gt; : used for headings
- &lt;b&gt; : makes text bold
- &lt;i&gt; : for italicizing text
- &lt;p&gt; : for paragraphs
- &lt;em&gt; : gives text emphasis
- &lt;strong&gt; : highlights/indicates importance
- &lt;ul&gt; : for unordered lists
- &lt;ol&gt; : for ordered lists
- &lt;li&gt; : makes a list item
- &lt;title&gt; : page title
- &lt;html&gt; : html doc declaration
- &lt;sup&gt; : for superscript text
- &lt;sub&gt; : for subscript text
- &lt;a&gt;  : for making links
- &lt;section&gt; :  defines a section in document
- &lt;article&gt; : for self-contained/independent content
- &lt;footer&gt; : defines the footer
- &lt;nav&gt; : defines navigation links
- &lt;aside&gt; : for sidebars/ side content
- &lt;mark&gt; : defines highlighted text

### Empty Tags

- &lt;img&gt; : embeds an image into the web page.
- &lt;hr&gt; : Horizontal rule/line.
- &lt;meta&gt; : appears in the <head> element. Defines how the page it to be rendered.
- &lt;!DOCTYPE&gt; : document type declaration.
- &lt;br&gt; : Line break
- &lt;wbr&gt; : word break opportunity: specifies the place to line break text if it is too long to fit in a line.
- &lt;link&gt; : Specifies the relationship between a document, and an external resource such as a style sheets.
- &lt;input&gt; : Specifies a field where users enter data.
- &lt;base&gt; : Specifies the base URL for all relative URLs in a document.
- &lt;param&gt; : define parameters for <object> element.
- &lt;source&gt; : specifies media sources for picture, audio, and video elements.
- &lt;col&gt; : deprecated. specifies column properties for each column within a &lt;colgroup&gt; element.
- &lt;keygen&gt; : deprecated. generates a pair of keys (public and private), to encrypt and decrypt HTML form Data.
- &lt;embed&gt; : deprecated. a container for an external resource, such as a plug-in application, a picture or a media player.
- &lt;track&gt; : specifies text tracks for media components audio and video
- &lt;area&gt; : specifies a clickable area inside an image map.
- &lt;! — … — &gt;: inserts comments in the source code.
- &lt;circle&gt; : used within the &lt;svg&gt; element to define a circle shape.
- &lt;command&gt; : obsolete. represents a command that a user can invoke.
- &lt;basefont&gt; : deprecated. sets the default text-color, font-size, font-family of all the text in the browser.

Understanding HTML is very important for building great websites. I hope this was able to add a little more to what you know about HTML. Bye
Backup MySQL database locally
Tags: mysqldump, mysqlcli, connection, backup
Published: 2022-05-24 10:06:49

1) Make sure remote connection is enabled :[MySQL remote access](https://dev.to/sandipbasnet/remote-access-of-mysql-from-cli-47p) 

2) If remote access is allowed: 

```
mysqldump --host <host_address or ip> -P <Port Number(3306)> -u <db username> -p <database_name> > offgrid.sql

```
Miscellaneous Treats in .NET Report Generator List & Label 27
Tags: showdev, news, dotnet, component
Published: 2022-05-24 09:58:01

As with every version, there are way too many new features in version 27 to cover them all. So here’s a quick summary of some of the rather hidden gems that still deserve some attention.

- Supporting Windows 11, Visual Studio 2022 and .NET 6
- Parametrized data sources now support passing a “displayformula” option in order to set the displayed value for the auto generated parameter. This allows the use ID values for the parameter itself, while displaying a user friendly substitution.
- The AskString$ and AskStringChoice$ dialogs are now resizable.
- New barcode type added: Pharmacode
- New image type added: SVGZ (compressed SVG)
- Report parameters can now be validated via a regular expression.
- The Drawing() function can receive a valid SVG string, which will be converted into an image on the fly, e.g. Drawing(‘<svg height=”100″ width=”100″><circle cx=”50″ cy=”50″ r=”40″ stroke=”black” stroke-width=”3″ fill=”red” /></svg>’).
- Lines are now exported as inline SVG files, when exporting to XHTML. Line styles are also partly supported, diagonal lines are no longer raster images.
- The .NET component now automatically tries to decode Base64 encoded images, if they are defined e.g. via LL.Fields.Add(“MyBase64Image”, Base64String, LlFieldType.Drawing). Note: this feature requires the Base64 string to be padded to a multiple of four bytes with “=” as defined in RFC 4648.
- If a preview contains input objects, the ribbon now provides two different PDF modes (PDF with input objects and PDF with input data as fixed text).
- JPEG images with EXIF rotation information are automatically displayed correctly now.
- The extended properties of 2D barcodes (Aztec, QRCode, DataMatrix, PDF417, MicroPDF417, Maxicode) are now accessible via DOM.
- Pie charts now support a maximum segment count. All additional segments will then be summarized as “Others”. Before, there was only a minimum share, which was not flexible enough in cases where many segments had the same (small) share.
- The HTML object now supports https for downloads.
- VCL FireDac: the ExportOptions can now be set directly via the ExportOptions class.
- VCL FireDac: simplified variant for setting options & print options 
- Crosstab label cells can now contain an image.

This wraps up the feature posts on version 27 – we’ll start blogging about the upcoming version 28 pretty soon. Stay tuned!

[More New Features in List & Label 27](https://www.combit.com/version-27-list-label/)
Livewire clear modal on close
Published: 2022-06-04 21:13:12

---
title: Livewire clear modal on close
published: true
date: 2022-05-24 09:58:00 UTC
tags: 
canonical_url: https://dcblog.dev/livewire-clear-modal-on-close
---

When you have a model that's been partially filled and a modal is closed using Alpine ie:

```

<button type="button" @click="on = false">Close</button>
```

The modal will close but anything inputted into a form inside the modal will remain.

To clear the form out when a model closes call a method on the component instead:

```

<button type="button" wire:click="close">Close</button>
```

Next, create the method in the class and either call $this->reset() to reset all properties on the class or specify the properties to be cleared.

Finally fire an event called close-modal

```

public function close()
{
    $this->reset(['name', 'email']);
    $this->dispatchBrowserEvent('close-modal');
}
```
🔐 Laravel File Permissions Setup
Tags: laravel, php, devops, programming
Published: 2022-05-21 23:35:17

### Introduction
Hi, I wanted to offer a brief and straight to the point way to setup your Laravel project permissions. This examples are like a work for all case. You will have to taken into consideration your server users, configurations, etc.
‎‎
There are basically two ways to setup your ownership and permissions. Either you give yourself ownership or you make the webserver the owner of all files.
‏‏‎
---


**Web Server as owner  (Recommended for PROD)**
Webserver as owner (the way most people do it, and the Laravel doc's way):  

Assuming www-data (it could be something else) is your webserver user.
```bash
sudo chown -R www-data:www-data /path/to/your/laravel/root/directory
```  

If you do that, the webserver owns all the files, and is also the group, and you will have some problems uploading files or working with files via FTP, because your FTP client will be logged in as you, not your webserver, so add your user to the webserver user group:  
```bash
sudo usermod -a -G www-data ubuntu
```  
Of course, this assumes your webserver is running as www-data (the Homestead default), and your user is ubuntu (it's vagrant if you are using Homestead).

Then you set all your directories to 755 and your files to 644... SET file permissions  
```bash
sudo find /path/to/your/laravel/root/directory -type f -exec chmod 644 {} \; 
```  

Set directory permissions 
```bash
sudo find /path/to/your/laravel/root/directory -type d -exec chmod 755 {} \;
```  

Then you need to give read and write permissions to the webserver for storage, cache and any other directories the webserver needs to upload or write:
```bash
sudo chgrp -R www-data storage bootstrap/cache  
sudo chmod -R ug+rwx storage bootstrap/cache
```
‏‏‎
---

**Your user as owner (Convenient for STAGING and DEV)**

If you prefer to own all the directories and files (it makes working with everything much easier), go to your Laravel root directory:  
```bash
cd /var/www/html/laravel >> assuming this is your current root directory
```  
‏‏‎ ‎
If you do that, the webserver owns all the files, and is also the group, and you will have some problems uploading files or working with files via FTP, because your FTP client will be logged in as you, not your webserver, so add your user to the webserver user group:  
```bash
sudo usermod -a -G www-data ubuntu
```  
```bash
sudo chown -R $USER:www-data .
``` 

Then you give your user and the webserver permissions:  
```bash
sudo find . -type f -exec chmod 664 {} \;  
sudo find . -type d -exec chmod 775 {} \;
```  
‏‏‎
Then you need to give read and write permissions to the webserver for storage, cache and any other directories the webserver needs to upload or write:
```bash
sudo chgrp -R www-data storage bootstrap/cache  
sudo chmod -R ug+rwx storage bootstrap/cache
```
‏
---

### Conclusion
I hope you found this article helpful.

If you have any feedback or found mistakes, please don’t hesitate to reach out to me.

Credit to: Andres Felipe and bgies [answers](https://stackoverflow.com/questions/30639174/how-to-set-up-file-permissions-for-laravel).
Remote access of MySQL from CLI
Tags: remoteaccess, mysqlcli, connection
Published: 2022-05-24 09:53:13

1) Check if remote access is allowed for user: 
```
SELECT User, Host FROM mysql.user;
```
if user has `%` (wildcard just as * ) in host then this user can establish connection from anywhere, you can update this wildcard or specific ip as

```
UPDATE mysql.user SET HOST='%' WHERE User='<your_username>';
```
and then flush privileges with: 
```
FLUSH PRIVILEGES;
```

2) If MySQL is installed on a Ubuntu, you will have to access the file at this location: `cd /etc/mysql/mysql.conf.d/mysqld.cnf
`
Open the file and comment the binded-address i.e.
```
change: bind-address = 127.0.0.1 to: #bind-address = 127.0.0.1 
```
to bring changes on effect restart the mysql or reboot the system itself: 
i.e. restart: 
``` 
sudo service mysql restart
```

3) Access from cli: 
```
mysql -u <user_name> -h <host or ip addrsss> -p
creative technologist job research (2)
Published: 2022-05-24 09:43:58

In the previous post, I was wondering about where Touch Designer stands in creative tech industry. I asked a friend of my friend who works at one of the world-known creative studios. 

These were my questions

- if you gotta choose, Touch Designer OR Unity?
- Is TD becoming the industry standard?
- Any other recommendations/insights about technical tools/skills that are preferred in the industry?


These were his answers

- personally, he comes from Houdini, so he chooses TD over Unity
- TD is definitely used a lot for installations, projections, performances, multi large canvas screens. Good for large studio projects.
- Unreal is slowly outdating a lot of softwares: graphical power, multimedia playground. But it lacks accessibility.
- Web is definitely recommended, especially with web3 and webGPU.
- TD features are similar to Unreal + Houdini. 
- Unity is good for experimental coding
- WebXR is definitely recommended. If you have portable skills like web dev or python, that's great.

I personally prefer coding than node-based applications. So I think I will focus on web graphics, web xr, threejs, webgl :D