teleren/devto huggingface dataset:
Mui Flex で色付き Box を流す。
Tags: mui, flex
Published: 2022-03-07 15:18:18


## 準備

```ts
import Box from '@mui/material/Box';
```

React MUI で Box を用意。

400 x 400 の グレーの Box のなかに
150 x 150 の 黒と水色の Box を入れる構成。

---

## flex で 横 ( row ) に並べる

グレーのボックスに 

```ts
display: flex,
flexDirection: 'row'
```

これを指定する。


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

すると、中身が横に並ぶ。

```ts
      <Box sx={{ 
        width : 400,
        height: 400,
        background: 'gray',
        display: 'flex',
        flexDirection: 'row'
        }}>
        <Box sx={{ 
          width : 150,
          height: 150,
          background: 'black',
          }}>
        </Box>

        <Box sx={{ 
          width : 150,
          height: 150,
          background: 'cyan',
          }}>
        </Box>
      </Box>
```

flex を付けた時点で flex direction はデフォルトが row

---

## Flex で 縦 ( column ) に並べる

縦
に
並
べ
る

反対にグレーの Box に

```ts
flexDirection: 'column'
```

これを指定すると

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

縦並びになる。

HTML ではデフォルトが縦で、 flex 使う時点で横に並べたいので使い道はなさそう。

---

## 応用して Header, Sidebar, main を作る 


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

```ts
    <>
      <Box sx={{ 
        width : 1200,
        height: 150,
        background: 'salmon',
        }}>
          header
      </Box>
      <Box sx={{ 
        width : 1200,
        height: 800,
        color: 'white',
        background: 'gray',
        display: 'flex',
        flexDirection: 'row'
        }}>
        <Box sx={{ 
          width : 250,
          height: 700,
          background: 'black',
          }}>
            sidebar
        </Box>

        <Box sx={{ 
          width : 750,
          height: 600,
          color: 'black',
          background: 'cyan',
          }}>
            main
        </Box>
      </Box>
    </>
```

flex 指定をしていない Header の下に コンテナを流し

コンテナの中に sidebar と main を flex で右に流す。

これでだいぶ web サイトっぽいレイアウトができる。手軽。

## まとめ

MUI で flex をつけると、そのコンポーネントの子供達が横に並ぶ。

column に指定すると縦に並ぶ。

flex を付けたコンポーネント自体をいくら並べても横には並ばない。
Gists checking
Tags: payment
Published: 2022-03-07 15:15:01

# Steps to integrate Razorpay 

* Setting up Razorpay account.

* Storing API keys in settings.py

* Installing Razorpay library.

* Creating order using Razorpay API.

* Creating order at backend and also creating Razorpay order.

	* Show template

	* render to payment.html

	* Get info of call back URL

	* Done with creating an order.

### **Uploading a File**

There are three ways you can upload a file:

- From an `Object` instance

- From a `Bucket` instance

- From the `client`

In each case, you have to provide the `Filename`, which is the path of the file you want to upload. You’ll now explore the three alternatives. Feel free to pick whichever you like most to upload the `first_file_name` to S3.

{% gist https://gist.github.com/Nishant127/ed0e02cfb0ae0da3fb82f17b21252ca4 %}

{% gist https://gist.github.com/Nishant127/c9c41e61f682b650ca16f7f5478b07fb %}


```python
@classmethod
    def replace_hashnode_gist(cls, markdown):
        gist_link_regex = r"\[(https://gist\.github\.com.*?)\]"
        gist_urls = re.findall(gist_link_regex, markdown)
        new_markdown = markdown
        for url in gist_urls:
            new_url = "%" + f"[{url}]"
            gist_pattern_regex = r"\[" + re.escape(url) + r".*?\)"
            gist_to_replace = re.findall(gist_pattern_regex, markdown)[0]
            new_markdown = new_markdown.replace(gist_to_replace, new_url)
        return new_markdown
```

![](https://notionpack-uploads.s3.amazonaws.com/blog_images/tmp/tmpryp_v8ze.png)

![](https://notionpack-uploads.s3.amazonaws.com/blog_images/tmp/tmp2t_8j7iy.png)
Curso de Docker Gratuito
Tags: cursos, beginners, iniciante
Published: 2022-03-07 15:03:29

Se você está começando agora neste mundo de docker, criei um curso sem letrinhas pequenas, que você realmente não paga nada, e pode aprender de forma prática sobre containers usando o ecossistema Docker. 

Neste curso você verá coisas como:

- Instalação de Configuração
- Criação das Imagens
- Comandos principais do Docker
- Registro de Imagens
- Pipelines DevOps com Gitlab + Docker
- E muito mais

Não é daqueles cursos que você só vê a maravilha funcionando, pelo contrário, tentei editar o mínimo para as pessoas verem que todos nós erramos, e isso é normal, faz parte do processo de aprendizagem. 

Aproveitem: [Link parra o curso](https://skalena.thinkific.com/courses/docker-fundamentos
)
Apiumhub is recognized by Techreviewer as Top Software Development company in 2022
Tags: apiumhub
Published: 2022-06-27 13:00:44

---
title: Apiumhub is recognized by Techreviewer as Top Software Development company in 2022
published: true
date: 2022-03-07 14:17:00 UTC
tags: Apiumhub
canonical_url: https://apiumhub.com/tech-blog-barcelona/apiumhub-recognized-top-software-development-company-2022/
---

Apiumhub worked hard at building a reputable business with a large customer base. Today the efforts have paid off, Techreviewer has announced that Apiumhub has just made a spot on the [ranking list](https://techreviewer.co/top-software-development-companies) of top software development companies. This is a huge and difficult feat for any company to accomplish.

## **How Does Techreviewer Choose Companies?**

Techreviewer has a one-of-a-kind method for researching and analyzing companies within a specific industry. Their method includes ranking companies on several difficult criteria as well as comparing companies on a multitude of other factors. This guarantees that only the absolute best software companies are able to land a spot on their lists.

Some of the ranking criteria include such things as services offered, customer reviews, case studies, brand awareness, social media activity and many more. Apiumhub has proven exceptional in all these criteria plus many more. Not only have they ranked highly in the criteria, but they also outperformed in the other factors that companies are compared on.

## **A Little More About Techreviewer**

Techreviewer has one mission and that is to provide consumers with an easy and reliable source of finding companies that are industry leaders and offer the best services in their respectable fields. On their lists consumers can find information about all the featured companies such as their companies’ size, their average cost, when they were founded, their about information and a few more aspects of their business. This allows consumers to easily locate the best company for their specific needs. 

## **Congratulations Apiumhub**

It is no easy task to make it onto one of these lists, yet Apiumhub has managed. A huge congratulations to them for their determination for success and their remarkable business performance. The company has built an extremely respectable company and is actively involved in the community. It is expected to continue to see them in many more headlines for their prowess in the software development industry.
Tools I use daily to code!
Tags: tools, programming, productivity, discuss
Published: 2022-03-07 14:12:49


![Vs Code](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/ogflls3wyc64kmbryf2m.png)
```
1. VS Code - For code editing of Flutter, 
react, html, css, php and many more
```

![Clock](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/dtlxqiad714zvo7ucwq5.png)
```
2. Clock - To manage time for coding and break set timer
```


![Terminal](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/311zrreh7rmb60lngcgr.png)
```
3. Terminal - command line for everything 
```


![Notion](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/nkfionyceey2p8khu5ow.png)
```
4. Notion and google sheet - to make daily task and 
Scrum also list out problems and questionaries

```


![Google](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/j8ahzlg5ht5dnupi4lv5.png)

```
5. Google - finally google - ( Teacher ) Ask anything 
you don't know, you'll get the answers to 
all of your questions.
```
Episode #3: Web3 for Web Developers with Nader Dabit
Tags: web3, webdev, blockchain, discuss
Published: 2022-03-07 14:11:00

_An excerpt from [RenderATL](https://www.renderatl.com/)'s Culture & Code podcast Episode #3: Web3 for Web Developers with Nader Dabit ([@dabit3](https://twitter.com/dabit3)):_

_Note: this is a special Render Vault episode featuring [@willjohnsonio](https://twitter.com/willjohnsonio) as host._

**Will:**
What would you say to the Web3 skeptics of people who are ... That's calling it a scam and a Ponzi and things like that. You're definitely deep into it. What would be your advice to them to make them kind of give it a try?

**Nader:**
I don't really think that it's worth talking to the people that are using that type of language. They usually ...

**Will:**
Okay.

**Nader:**
Kind of like I would say for the most part, when they've gone that far, they've kind of like put themselves in a position publicly where they want to take a stance and there's no evidence that will change them. It's almost like speaking to a religious person about trying to convince them that their religion is wrong or someone like an extreme politician. **I think the more interesting discussions are happening around the people that are open minded and are nuanced, where they will say ... They'll express skepticism without being extremely harsh in their language, and that typically means that they're just open minded people that are obviously seeing that this is just a technology that has its drawbacks as well as it's upsides.** And those are the people that are often the most enjoyable to have these skeptical conversations with. There are also people that just use these really foul talking points and create toxic environments that just say stuff like that, that don't really want to have the discussion and those are the people I tend to stay away from.

_This was an excerpt from [Culture & Code](https://www.renderatl.com/culture-and-code), a podcast brought to you by [RenderATL](https://www.renderatl.com/) that is focused on leveling up your tech career and exploring new technologies._ 

_You can listen to the full episode and read the complete transcript on our website [here](https://www.renderatl.com/culture-and-code/episode-3)._
I created a python quiz
Tags: python, programming, productivity, showdev
Published: 2022-03-07 14:08:23

Hello,i created a python quiz.It is useful for you to judge your knowledge in python.It is also useful for beginners in python.I mark your grade and annnounce it through my dev account.Check this quiz now!

quiz link:https://forms.gle/CW2cfeP2Xm1co7mR7
#ESP32CAM – Running a WebServer to Flash On 🔦🔦🔦 in the #Arduino board
Tags: englishpost, arduino, camera
Published: 2022-03-07 14:22:42

---
title: #ESP32CAM – Running a WebServer to Flash On  🔦🔦🔦 in the #Arduino board
published: true
date: 2022-03-07 14:00:00 UTC
tags: EnglishPost,Arduino,Camera,EnglishPost
canonical_url: 
---

Hi !

Still learning with the ESP32 CAM board.

In today’s post the scenario is simple:

- Connect the device to a WiFi network
- Run a webserver on the device and create an endpoint [/flash]
- Turn on the Flash for 1 second when the endpoint receives a request.

As the previous sample, I’ll write this using Visual Studio Code and PlatformIO project, using the **AI Thinker ESP-32CAM** board.

Full project working demo

![ESP32Cam Flash demo](https://brunocapuano.files.wordpress.com/2022/03/2022-03-05-esp32cam-flash-small.gif?w=250)

Let’s review some noted from the code:

As usual, we need to define the WiFi credentials in the main.cpp file.

```

// Replace with your network credentials
const char *ssid = "IoTLabs2";
const char *password = "12345678";

```

The function [flashOnForNSeconds] turns the Flash ON for N seconds.

```

// ledPin refers to ESP32-CAM GPIO 4 (flashlight)
#define FLASH_GPIO_NUM 4

void flashOnForNSeconds(int seconds)
{
  digitalWrite(FLASH_GPIO_NUM, HIGH);
  delay(seconds * 1000);
  digitalWrite(FLASH_GPIO_NUM, LOW);
}

```

Once the device is connected, a new endpoint [/flash] is created and it will trigger the Flash for 1 second.

```

// Create AsyncWebServer object on port 80
AsyncWebServer server(80);

  // Route for trigger flash
  server.on("/flash", HTTP_GET, [](AsyncWebServerRequest *request)
            {
              flashOnForNSeconds(1);
              request->send_P(200, "text/plain", "Flash Triggered"); });

  // Start server
  server.begin();

```

And tha’t basically it ! Once we know the IP for our device, we can make the HTTP call.

![http endpoint flash triggered response from browser](https://brunocapuano.files.wordpress.com/2022/03/http-endpoint-flash-triggered-response-from-browser.jpg?w=450)

Full code available in my [ESP32 Cam Demo repository](https://github.com/elbruno/ESP32camDemos).

Happy coding!

Greetings

El Bruno

Read my original posts in my blog [ElBruno.com](https://www.elbruno.com)
* * *
How (Not) to Integrate i18n Support with Vuelidate in Vue 3
Tags: vue, webdev, vuelidate, i18n
Published: 2022-03-07 13:55:56

### Diary of a Broken Dev: Entry 2
Hello again, it's another Monday, and I have ~6 unlogged hours of work over the weekend because I could not resolve any of the Typescript errors stopping me from committing my branch and pushing it to the company repo.
### Not all Documentation is Created Equal
Take a gander at [this section](https://vuelidate-next.netlify.app/advanced_usage.html#i18n-support) of Vuelidate's documentation. If this makes sense to you, you're either:
- A developer with a good head on his shoulders, well-adjusted to the rigors of the field, and have an understanding of the technologies being used
- Not using Typescript

If you're using Typescript in your project and are trying to follow the documentation, good luck.
### Down the Rabbit Hole we Go
Please, do yourself a favor, before even thinking of reading the rest of this buffoonery, download [Vuelidate's ts-types](https://www.npmjs.com/package/@types/vuelidate) from npm/yarn/suicide weapon of choice. Next, please just paste this:

```typescript
const messagePath = ({ $validator }: MessageProps): string => `whereverYourMessagesAre.${$validator}`;
```
While we're on the topic, please also copypasta the following at the very top of the file:

```ts
import { MessageProps } from '@vuelidate/validators';
```
Why yes, I did just save you hours of labor, how could you tell?
### Gotcha!
You thought you were home free? So did I my friend, but what bamboozles one can bamboozle them all. You're gonna also need to create a nice little function in the index.ts file of your i18n folder:

```ts
let _i18n: any;
export const useI18n =  () => {
  if(!_i18n) {
    return setupI18n();
  }
  return _i18n;
}
export function setupI18n(options = { locale: 'de', legacy: false }): I18n<unknown, unknown, unknown, false> {
  if(_i18n) return _i18n;
   _i18n = createI18n(options);
  setI18nLanguage(_i18n, options.locale);
  return _i18n;
}
export function setI18nLanguage(i18n: I18n<unknown, unknown, unknown, false>, locale: string) {

    i18n.global.locale.value = locale;
}
export async function loadLocaleMessages(i18n: I18n<unknown, unknown, unknown, false>, locale: any) {
  const messages = await import(
/* webpackChunkName: "locale-[request]" */ `@/locales/${locale}/index.ts`
  );

  i18n.global.setLocaleMessage(locale, messages.default);
}
```
You're gonna wanna import that sweet sweet useI18n function, and use it to initialize an i18n variable in lieu of the one in Vuelidate's documentation.
### Takeaways and Lessons Learned
Management has not seen a single commit since Thursday last week, which probably means they don't even need to see this devlog to fire me.
Why I still prefer tiddlywiki as notebook
Tags: tiddlywiki, zettelkasten
Published: 2022-03-07 13:50:30

---
title: Why I still prefer tiddlywiki as notebook
published: true
description: 
tags: tiddlywiki, zettelkasten
//cover_image: https://direct_url_to_image.jpg
---
There is a "note taking tools" boom recently, roam research, obsidian, logseq, craft and so on...
But after trying these tools, I still prefer [tiddlywiki](https://tiddlywiki.com/).

* A note is a card (named tiddler in tiddlywiki). Comparing to other tools, it is most like an index card.
* It comes with journal function
* It comes with link and backlink support
    * The [stroll](https://giffmex.org/stroll/stroll.html) version can make backlinks more similar with other tools 
* Elegant tag support
    * Macros can be used to list all cards of a tag, no need to search every time
* Notes can be customized with fields, which can be used as a simple database
    * For example, for each page I see that is worth reading and taking notes on, I create a card and add a custom field URL, the value of which is the URL of the page
    * Give the card a tag, such as `link`
    * Adding a little macro code to the link card will show the title and URL of all the tags with the link.
* [Stroll](https://giffmex.org/stroll/stroll.html) version also supports a two-column "story flow", which allows you do the step in zettelkasten to associate current notes with others
    * The left column is the current card
    * The right column allows you to search for all the cards you want to associate with
* Rich plugins
* If you have programming skills, you can even write your own plugins

---
Note: Stroll is customized tiddlywiki supports bi-directional link, link rename like roam
Paracetamol.js💊| #72: Explica este código JavaScript
Tags: javascript, webdev, spanish, beginners
Published: 2022-03-07 13:50:24

## **Explica este código JavaScript**

```js
const banda = "Coldplay";
const canciones = ["Yellow", "Fix You", "Trouble"];

console.log(banda["length"]);
console.log(canciones["len"+"gth"]);
```

A. `length`, `3`
B. `8`, `SyntaxError`
C. `8`, `3`
D. `SyntaxError`, `SyntaxError`

Respuesta en el primer comentario.

---
Dribbble-py - Scraper for dribbble
Tags: python, showdev, githunt, opensource
Published: 2022-03-07 13:46:15

[dribbble-py](https://github.com/rand-net/dribbble-py)

An API-less scraper for dribbble.com.
Example Usage: 

`
$ pip install -U dribbble-py
$ drbl_py -u {user_name}
$ cat {username}.json| jq . | less 
{
  "user_exists": "Yes",
  "shots_count": 185,
  "projects_count": 0,
  "collections_count": 3,
  "liked_shots": 19078,
  "user_description": "I can bring more value to your brand",
  "hire_status": true,
  "members_count": 0,
  "team_url": null,
  "projects": {},
  "members": null,
  "goods_for_sale": {},
  "followers": 1746,
  "following": 239,
  "tags": "3,328",
  "location": "Georgia",
  "bio": "Professional abstract, monogram, and symbol style logo designer",
  "is_pro": true,
  "join_date": "2019-01-01",
  "skills": [
    "abstract logo",
    "brand identity",
    "lettermark",
    "logo",
    "logo design",
    "logodesigner",
    "minimal logo",
    "monogram",
    "simple logo",
    "symbol"
  ],
  "social_media_profiles": {
    "toka-u.dribbble.com": "https://toka-u.dribbble.com",
    "www.instagram.com": "https://www.instagram.com/uchava2/",
    "www.behance.net": "https://www.behance.net/tornikeuchava"
  },
...
 `
Deploying a static HTML and CSS site using Github Pages
Tags: github, deployment
Published: 2022-03-08 08:07:45

---
title: Deploying a static HTML and CSS site using Github Pages
published: true
date: 2022-03-07 13:45:16 UTC
tags: github,deployment
canonical_url: https://livecode247.com/deploying-a-static-html-and-css-site-using-github-pages
---

The next step after creating a website, is deploying it to make it available to the whole world. If your site is static, and doesn't use any backend then it is pretty straightforward to deploy your app. In this article, I'm gonna talk about how to deploy a static HTML and CSS site using Github Pages.

## Register at Github

First of all create an account at [Github](https://github.com). Github is a Git repository hosting service which is owned by Microsoft. It provides a great feature called [Github Pages](https://pages.github.com/) and can be used to deploy static sites.

## Create a Github Repository

After registering, click on the button which says **New** on the top left of the page. ![Create Repository](https://cdn.hashnode.com/res/hashnode/image/upload/v1646658807807/fwCbWx1D5.png) ![Create repository input repo name](https://cdn.hashnode.com/res/hashnode/image/upload/v1646659047191/thiI_txfo.png)

## Upload files

If you know git, you're welcome to push your files to Github. Else, no worries, you can use Github's file upload feature like so:

![Upload files to Github](https://cdn.hashnode.com/res/hashnode/image/upload/v1646660006991/qFS5mQjI3.gif)

## Enable Github Pages

Last step is to enable Github Pages like so:

1. Click on Settings ![Enable Github Pages](https://cdn.hashnode.com/res/hashnode/image/upload/v1646660144532/dL1RxpqQx.gif)
2. Click on Pages ![Screenshot 2022-03-07 at 19.12.05.png](https://cdn.hashnode.com/res/hashnode/image/upload/v1646660555903/nXO05pwgy.png)
3. Click on **Branch** and choose `master`

> This might be `main` depending on the default branch you're working on

4. Click on the button on the right of **Branch** and choose `/ (root)`
5. Click on **Save**

Then wait for some time and then refresh. Wait till you see a banner which says something like this: ![Banner which says site's published](https://cdn.hashnode.com/res/hashnode/image/upload/v1646660196232/zNk9oBA_c.png)

And there it is! You've deployed your site using Github Pages. For example, you can view the sample deployment [here](https://kavinvalli.github.io/gh-pages-tutorial/).

## Links

You can find the sample github repository in the example here:

[https://github.com/kavinvalli/gh-pages-tutorial](https://github.com/kavinvalli/gh-pages-tutorial)
Hot Richard - now on the AWS Free Tier!
Tags: podcast, jokes, aws, career
Published: 2022-03-07 13:22:49

Council Of The Wise Developers has a new episode!

We play "AWS, Technobabble or Sex Act", then discuss gatekeeping in tech!

{% spotify spotify:episode:0qgywgJjJ3gbrqOFpUjwi1 %}
devto gist testing
Tags: payment
Published: 2022-03-07 13:20:03

# Steps to integrate Razorpay 

* Setting up Razorpay account.

* Storing API keys in settings.py

* Installing Razorpay library.

* Creating order using Razorpay API.

* Creating order at backend and also creating Razorpay order.

	* Show template

	* render to payment.html

	* Get info of call back URL

	* Done with creating an order.

### **Uploading a File**

There are three ways you can upload a file:

- From an `Object` instance

- From a `Bucket` instance

- From the `client`

In each case, you have to provide the `Filename`, which is the path of the file you want to upload. You’ll now explore the three alternatives. Feel free to pick whichever you like most to upload the `first_file_name` to S3.

![](https://notionpack-uploads.s3.amazonaws.com/blog_images/tmp/tmpq063y9qs.png)

![](https://notionpack-uploads.s3.amazonaws.com/blog_images/tmp/tmpit5bx3p3.png)

{% gist https://gist.github.com/Nishant127/ed0e02cfb0ae0da3fb82f17b21252ca4 %}

{% gist https://gist.github.com/Nishant127/13898538d35a024b4d93a592b1b4a6ea %}
readme-generator: a global dotnet tool for your next project
Tags: showdev, readme, tooling, dotnet
Published: 2022-03-07 13:13:59

How many hours or minutes do you spend to create a new Readme for a project?
I think too much or too less.
A good Readme file for a project it's a like a business card of you and for you have built.

The last week I spent few hours to create a tool for creating a really simple README file directly from your machine.
It's a dotnet tool that you can install from NuGet.

![readme-generator](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/8o1ghikfkefbpmn0lcps.png)

## Installation

Install readme-generator with NuGet as global tool

```console
  dotnet tool install --global readme-generator
```

## How to use it

As a global dotnet tool, after the installation, you can launch the tool with the following command:

```console
  readme-generator
```

## Contributing
The tool is opensource and contributing is really welcome to add some parts on the markdown file. :)

{% embed
https://github.com/kasuken/readme-generator
%}