teleren/devto huggingface dataset:
BOOTSTRAP 4 Tips and Tricks
Tags: html, react, javascript, productivity
Published: 2021-11-28 14:28:47

Hello Guys today i am sharing some tips and tricks for bootstrap 4, which has helped me to improve my code and reduce the time taken to type long codes by hand.This post is for all beginner and for those who already know about bootstrap

Lets get started...

What is Bootstrap?
Bootstrap is a free front-end framework for faster and easier web development.

Bootstrap includes HTML and CSS based design templates for typography, forms, buttons, tables, navigation, modals, image carousels and many other, as well as optional JavaScript plugins.

Bootstrap also gives you the ability to easily create responsive designs

Example - 
```html
 <h1 class='bg-dark text-white text-center'>
    This is a heading with bootstrap styling
 </h1>
```

We can use bootstrap styling with class attribute

1. bg-dark class give a dark blackish background to the heading
2. text-white class will make the text white in color
3. text-center will center the text.(like text-align:center in css).


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

You can read the documentation of bootstrap here - 
https://getbootstrap.com/docs/4.0/getting-started/introduction/


CHEATSHEET - 

For those who knows about bootstrap already and wants a cheetsheat check this one - 

https://hackerthemes.com/bootstrap-cheatsheet/

I love this one because it shows the code snippet of the component and also preview the effect of that snippet
you can just copy the code from the snippet and paste it in the code.



TIPS - 

Well its just a basic one and you might already knew it but still i am mentioning it for those who just started bootstrap

TIP - install the BOOTSRAP 4 extension in VSCODE 

It generates snippet of bootstrap code by just writing the class name of the code you want to use in bootstrap

Example - 
Type "b4-card-default" and press "Enter", it will create the code of a bootstrap card and saves your time of typing the whole code for creating a bootstrap card!!.


Special tip for React JS developers -

Use React-strap it is same as bootstrap but in the form of react components and its more easy to use then actual bootstrap.

Installation - 

```
npm i react-strap
```

Check the documentation here - 
https://reactstrap.github.io/?path=/story/home-installation--page

THANK YOU FOR READING THIS POST AND IF YOU WANT TO GIVE ANY SUGGESTION OR FIND ANY MISTAKE HERE PLEASE MENTION IT IN THE COMMENT SECTION.
Animated Profile Card Using HTML CSS & GSAP
Tags: html, javascript, webdev, beginners
Published: 2021-11-28 14:15:26

Hello Guys,

Thank you guys for my last post response. Today I Created an Animated profile card using HTML CSS & GSAP Animation. I use the simple card and use GSAP timeline() to animate the card using gsap.from() you can animate a card. I hope you like this also comments about your thoughts. also For more content **follow me on Instagram**  [@developer_nikhil27](https://www.instagram.com/developer_nikhil27/).

Thank you 🙂!

Checkout new post 

{% link https://dev.to/nikhil27b/responsive-footer-using-html-css-3gg
 %}


{% codepen https://codepen.io/NikhilBobade/pen/OJxLQpx %}
Creating a struct type dynamically at runtime using a Hashmap!!!😳 
Tags: go
Published: 2021-11-28 14:01:10

---
title: Creating a struct type dynamically at runtime using a Hashmap!!!😳 
published: true
description: 
tags: go
//cover_image: https://direct_url_to_image.jpg
---

WTF are we even talking about??? 

Well, we can create struct __types__ (NOTE: types, not just variables😒) dynamically, based on the keys and the types of each individual value in a given hashmap... Yes!!! 

Dynamically! During runtime!! From a Hashmap!!! A new struct type!!!! And use it of'course😃

Here is full code with the relevant method (`mapToStruct`), and usage example:

```go
package main

import (
	"fmt"
	"reflect"
	"strings"
)

func mapToStruct(m map[string]interface{}) reflect.Value {
	var structFields []reflect.StructField

	for k, v := range m {
		sf := reflect.StructField{
			Name: strings.Title(k),
			Type: reflect.TypeOf(v),
		}
		structFields = append(structFields, sf)
	}

	// Creates the struct type
	structType := reflect.StructOf(structFields)

	// Creates a new struct
	return reflect.New(structType)
}

func verifyStructFields(sr reflect.Value){
	fmt.Println("\n---Fields found in struct..")

	val := reflect.ValueOf(sr.Interface()).Elem()
	for i := 0; i < val.NumField(); i++ {
		fmt.Println(val.Type().Field(i).Name)
	}
}

func setStructValues(sr reflect.Value){
	fmt.Println("\n---Setting struct fields...")
	sr.Elem().FieldByName("Name").SetString("Joe")
	sr.Elem().FieldByName("Surname").SetString("Biden")
	sr.Elem().FieldByName("Age").SetInt(79)
}

func main() {
	m := make(map[string]interface{})

	m["name"] = "Donald"
	m["surname"] = "Trump"
	m["age"] = 72

	sr := mapToStruct(m)
	fmt.Println("\n---Created type:", reflect.ValueOf(sr).Kind())

	verifyStructFields(sr)
	setStructValues(sr)

	fmt.Printf("\n---Dynamically created and initialized struct:\n%#v", sr)
}
```

Cool, ain't it🥶
3-lines code to detect text from an image in python
Tags: python, programming, tesseract, jupyter
Published: 2021-11-28 13:54:37

## Using Tesseract library, we can detect the text from an image in 3 lines of code. ##

**Step-1**:
***Install teserract library***
In command prompt: pip install pytesseract
In Anaconda prompt: conda install -c conda-forge pytesseract

**Step-2**:
***Download and install the Tesseract OCR executable from the following links***
https://digi.bib.uni-mannheim.de/tesseract/tesseract-ocr-w32-setup-v5.0.0-alpha.20210506.exe (32-bit)
https://digi.bib.uni-mannheim.de/tesseract/tesseract-ocr-w64-setup-v5.0.0-alpha.20210506.exe (64-bit)

**Step-3**:
***And run the below given code to extract text from an image***

import pytesseract

pytesseract.pytesseract.tesseract_cmd = r'C:\Program Files\Tesseract-OCR\tesseract'

print(pytesseract.image_to_string(r'link to the image from which the text to be detected'))

![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/bfj47zxljue4t9junq40.jpg)
Placeholder title
Tags: actionshackathon21
Published: 2021-11-28 13:48:31

[Instructions]: # (To submit to the GitHub Actions x DEV Hackathon 2021, please fill out all sections.)


### My Workflow
[Note]: # (Please make sure the project links to the appropriate GitHub Actions repository, and includes [an open source license](https://choosealicense.com/) and README.)


### Submission Category: 

[Note]: # (Maintainer Must-Haves, DIY Deployments, Interesting IoT, Phone Friendly, or Wacky Wildcards)


### Yaml File or Link to Code

[Note]: # (Our markdown editor supports pretty embeds. Try this syntax: `{% github link_to_your_repo %}` to share a GitHub repository)


### Additional Resources / Info

[Note:] # (Be sure to link to any open source projects that are using your workflow!)

[Note]: # (Be sure to include the DEV usernames of your collaborators, if any. )

[Reminder]: # (Submissions are due on December 8th, 2021 (11:59 PM PT or 2 AM ET/6 AM UTC on December 9th).
.Net AWS MQ
Tags: aws, dotnet, csharp, aspnetcore
Published: 2021-11-28 13:40:46

*Disclaimer: In this article I give a brief on how to interact with Amazon MQ (using the ActiveMQ engine) from a .Net6 application via [MassTransit](https://masstransit-project.com/) providing boilerplate code and instructions. This is a high overview and not a step by step guide. Finally, English is not my first language, so my apologies for any mistakes.*

***What are we building***
This is a Proof of Concept aiming to demonstrate the integration of AWS AMQ (Pub/Sub) into .Net via MassTransit. In [this repository](https://github.com/giorgosde/Dotnet_AmazonMQ) there are two elements under a single Solution:
1. WebApi Project containing an ApiController and endpoint which is allowing posting to AMQ via a MessagingService
2. A console (dummy) application which consumes the messages from the previous step

***Prerequisites***
It is expected to have an AWS Account.

***Create a broker***
[This](https://docs.aws.amazon.com/amazon-mq/latest/developer-guide/amazon-mq-creating-configuring-broker.html) is an extensive and descriptive enough tutorial on how to create an AMQ broker. Just to highlight that AmazonMQ supports two engines: ActiveMQ and RabbitMQ. We are going for the ActiveMQ option. The broker creation process takes approximately 15-20 minutes to complete.
*Important:* Make sure to use one of the smaller EC2 instances and not the default large one. 

***Setup the project***
To make the project up and running there are few actions to be taken:
- Replace the credentials in the (Producer) WebApi project (```appsettings.json```):

```
  "AMQ": {
    "Username": "{broker_username}",
    "Password": "{broker_password}",
    "HostUrl": "activemq://{broker_endpoint}",
    "queueName": "{broker_queue_name}"
  }
```
- Replace the credeitnals in the (Consumer) Console Application:

```
string username = "{broker_username}";
string password = "{broker_password}";
string hostUrl = "activemq://{broker_endpoint}";
string queueName = "{broker_queue_name}";
```
- Start both projects in parallel. To achieve this, right click on the Solution and through the properties:
![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/kb67sruzc2tz8zuyjmen.JPG)

***Demo***
![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/73euq42ztasogdql4ttu.JPG)


- More info about Amazon MQ can be found [here](https://aws.amazon.com/amazon-mq/?amazon-mq.sort-by=item.additionalFields.postDateTime&amazon-mq.sort-order=desc)
- Remember to delete the broker once finished if there is no other usage apart from demoing
- Broker's configuration cannot be deleted
- Broker's configuration can be used by multiple brokers

If you would like to support this effort to provide tutorials and demo code, [please like us on Facebook](https://www.facebook.com/FullStackCodr) or even <a href="https://www.buymeacoffee.com/fullstackcodr">☕ Buy Me A Coffee</a>
Maghic: a Swiss army knife for GitHub Actions Workflow
Tags: actionshackathon21, actionshackathon, github, opensource
Published: 2021-11-28 13:26:46

Maghic is a Swiss army knife tool for GitHub Actions Workflow.

This is created for the GitHub Actions Hackathon: [2021 GitHub Actions Hackathon on DEV](https://dev.to/devteam/join-us-for-the-2021-github-actions-hackathon-on-dev-4hn4)

### My Workflow

Maghic provides:
- a command line tool for managing, creating and autogenerate Yaml file Workflow for GitHub Actions;
- a set of classes and methods for managing Yaml file (specific for GitHub Actions Workflows).

You can create your GitHub Actions workflow with some code like this one:
```php
$yaml=\App\Objects\YamlObject::make()
        ->setName("My Test Name")
        ->setOnPushDefaultBranches()
        ->addMysqlService()
        ->addMatrixOsUbuntuLatest()
        ->toString();
```
**OR** you can use a command for:
- **Checking** the syntax of the workflow file (*maghic yaml:check*); 
- **Edit** the workflow file with a wizard (*maghic yaml:edit*);
- **Generate automatically** the workflow for your project (*maghic yaml:guess*).

#### How to generate automatically the workflow
You can create automatically your workflow for your project with the command:
```php
./maghic yaml:guess --save ../yourprojects
```

![Generate automatically the GitHub Actions Workflow file](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/xjttduvey2r4n4c9494m.png)


### Submission Category: 

Maintainer Must-Haves


### Yaml File or Link to Code

{% github https://github.com/Hi-Folks/maghic %}



### Additional Resources / Info

This project uses:

- [Laravel Zero](https://laravel-zero.com/): micro framework for console application; 
- [Symfony Yaml](https://symfony.com/doc/current/components/yaml.html): a package for parsing Yaml structures.
- [swaggest/json-schema](https://github.com/swaggest/php-json-schema): a package to validate the GitHub Actions workflow.

#### Code quality packages
- [PestPHP](https://pestphp.com/): a testing framework for PHP;
- [PHPStan](https://phpstan.org/): a static code analysis tool for PHP;
- [PHP_CodeSniffer](https://github.com/squizlabs/PHP_CodeSniffer): detects violations of a defined set of coding standards (for example PSR2 and PSR12).
Week 5 experience - Time really does fly
Tags: codeofafrica, awesomitylab, taskforce
Published: 2021-11-28 13:01:58

Yep, my suspicions turned out to be true, week 5 was even more intense and fruitful mainly because we had to implement feedback from week 4 and work on tasks from week 5.

this past week's theme was APIs security, logs and tests. In much simpler words security means who has permission to do what in your application, logs refer to how you keep track of who did what and when in your app and tests are...well tests,this refer to how your app will behave in every situation when users who don't know its ins and outs start using it (so by feeding your app incomplete,redundant,invalid data,etc). Hope that makes sense😅

We also had a design thinking workshop that I liked especially the exercise where we had to come up with a persona in our app and list reasons why he/she would pay or even use our product.

![3AM faces](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/gku1e0hv216lab7tuoe4.jpg)

bonus: above is a screenshot I took when we were working late on tuesday (peep the time on the screenshot😅)  and of course I did ask the boys if they are okay having their 3AM tired faces on the internet forever.

At this point I know for a fact that next week will be even more challenging and fruitful than this and that makes it more interesting for me so I can't wait.

Cheers and see yall next week same time
Equality Operators
Tags: javascript, webdev, programming, beginners
Published: 2021-11-28 12:41:26

## What is equality operators?
Equality operators comparing two values which will either return a Boolean value "true" or "false".

Equality is use in decision making scenario. There's two type of equality ``==`` "loose equality" & ``===`` "strict equality". Why is this important? Because in a situation when I want to compare an object and primitive data, these two does the same thing, but the result are different.

Loose equality will try convert value to match each other data type before compare the value.
```
console.log(1 == "1");
console.log('hello' == 'hello');

// output: 
true 
true 
```
Strict equality does not do that, all it does is compare and considers operands of different type to be different, it's also faster since it skip one step.

```
console.log(1 === "1");
console.log('hello' === 'hello');

//output: 
false 
true
```

So Which to use? Unless there is a good reason to use ``==`` It is widely consider best practice to use ``===``. So now I know what to use, I will stick to strict equality. Let see how strict equality compare primitive and object.

When comparing object and primitive, in primitive- strict equality just comparing the actual value, whether it's a string, number, or Boolean.
```
//primitive

var obj1 = 1
var obj2 = 1
console.log(obj1 === obj2);

//output: true
```
While an object, it doesn't just look at the value in object but also in memory.

```
//object comparison

obj1 = {number: 1}
obj2 = {number: 1}
console.log(obj1 === obj2);

//output: false
```

 The only time an object is equal to another object is when they are both the same.

```
let a = {number: 1};
let b = a;

console.log( a === b);

//output: true
```
## Inequality

Opposite of equality operators is Inequality operator ``!==``. Strict inequality operator check if two operands are not equal and return Boolean. Similar to strict equality strict inequality also consider operands of different type to be different. To not confuse myself since it is best practice to use strict equality, I will only use strict inequality when comparing if two operands are different.

```
console.log(1 !== "1");
console.log('hello' !== 'hello');
console.log(true !== 1);

//output: 
true
false
true
```

And that is my understanding on equality. 
###Array Methods Next!

My other post:
<a href="https://dev.to/tomyotwongjai/control-flow-in-js-1ob6">Control Flow</a>
<a href="https://dev.to/tomyotwongjai/logical-operators-2ei2">Logical Operators</a>

###Thanks for reading! :)
Basic Auth with Ruby on Rails(Faraday gem)
Tags: ruby, faraday, rails, authentication
Published: 2021-11-28 11:46:30

Faraday gem comes in handy with several plugins(middleware) that make HTTP request easier and more customisable, Basic authentication in ruby turn to be tricky. let's digest it;

```ruby
require "faraday"

request_helper = Faraday.new(url: 'example.com') do |builder|
                builder.use Faraday::Request::BasicAuthentication, client_key, secret_key
             end

# you make HTTP requests using `request_helper` since basic auth is configured

response = request_helper.get('/myendpoit')
```
Using an API like PAYPAL API, you need to get tokens by proving client and secret keys. With `Faraday::Request::BasicAuthentication` middleware we can pass client and secret keys as arguments to achieve basic authentication using the same method above. 

[twitter: code salley](https://twitter.com/__salley)
Top 10 dev.to articles of the month👸.
Tags: webdev, javascript, react, opensource
Published: 2021-11-28 11:38:16

---
title: Top 10 dev.to articles of the month👸.
published: true
description: Most popular articles published on the dev.to in this month.
cover_image: https://source.unsplash.com/featured/?coding
tags: webdev,javascript,react,opensource
series: Monthly dev.to top 10
---

DEV is a community of software developers getting together to help one another out. The software industry relies on collaboration and networked learning. They provide a place for that to happen.
Here is the most popular articles published on this platform.
{% post /aviyel/300-react-interview-questions-4dag %}

{% post /kathryngrayson/you-probably-dont-need-media-queries-anymore-a4j %}

{% post /devteam/join-us-for-the-2021-github-actions-hackathon-on-dev-4hn4 %}

{% post /nilanth/react-architecture-for-enterprise-application-3pnh %}

{% post /romaopedro199/tap-bar-with-liquid-animation-using-css-and-javascript-2l99 %}

{% post /ruppysuppy/5-tips-to-take-your-website-lighthouse-score-from-meh-to-wow-2375 %}

{% post /dhiwise/advanced-javascript-design-patterns-4k8l %}

{% post /github/how-to-create-the-perfect-readme-for-your-open-source-project-1k69 %}

{% post /altamashali/deep-dive-into-nodejs-architecture-5190 %}

{% post /panshak/i-created-a-full-stack-invoicing-application-using-the-mern-stack-27mp %}
Enjoy these articles.
Follow me for more articles.
Thanks 💖💖💖
Most essential React patterns - api call
Tags: react, pattern, javascript, api
Published: 2021-11-28 11:38:11

Calling APIs is one of the vital parts of each web app, so it's essential to know how to do it in the best way. for those APIs that you fetch some data from a server
 probably, you need to save those data on a state, and this cause rerender as well, so clearly you should care about when calling them and fetch their result

for most scenarios calling them inside an useEffect is a good choice but make sure that pass an empty array as the second argument to let useEffect execute once exactly like component did mount

```javascript
useEffect(() => {
  fetch('api/sms')
    .then(result => {
      const sms = result.data
      console.log('COMPONENT WILL Mount messages : ', sms)
      this.setState({sms: [...sms.content]})
    })
}, [])
```

so if you are dealing with class components, compoentDidMount would be your choice

```javascript
function componentDidMount() {
  fetch('api/sms')
    .then(result => {
      const sms = result.data
      console.log('COMPONENT WILL Mount messages : ', sms)
      this.setState({sms: [...sms.content]})
    })
}
```

written based on this [article](https://reactpatterns.js.org/docs/make-the-api-call-in-componentdidmount)
Wizar devlog 22 - Full map generation
Tags: gamedev, javascript, react
Published: 2021-11-28 11:17:39

Here is a little evolution for my map level editor but maybe a bigger for the user.
https://hik1y.csb.app/
You can now generate the whole map without painting it, and then dig/elevate the terrain.
Controls:
- "f": generate the map
- "click": elevate terrain, you can hold the button to paint
- "shift+click": dig terrain
- "space+mouse move": pan the map

This prove me again that thanks to a good decoupled code, you can deliver big value with little code update. Thanks you (SAM pattern)[https://sam.js.org/]
Aesthetic Lavender Wallpaper 
Published: 2021-11-28 11:13:20

<script type="text/javascript" src="https://payhip.com/payhip.js"></script>
Hey Guys😊, after a long time, I was involved in designing Desktop Wallpaper instead of searching stock photo sites. So I am publishing my first-ever Aesthetic Lavender Pastel Wallpaper. 
Here is good news for the first 500 purchases 25% discount coupon is available.

So why are you waiting❓Check it out..

➡️<a href="https://payhip.com/b/0XO2c" class="payhip-buy-button" data-theme="green" data-product="0XO2c">Buy Now</a>

Coupon Code: brainiacSpace
Expires on: Dec 17th, 2021.
Store Name : Brainiac Space

P.S: I am not getting any money, though it is a post. It's just an announcement you can buy this if you like it.

Do follow for more at Dev @vidhyavarshanyjs.Cheers🍻
Keep supporting🌟
How to learn your first programming language in easy way?
Tags: beginners, programming, tutorial, opensource
Published: 2021-11-28 11:09:56

**Hii folks 👋** , I hope you all doing great , so in this Tutorial Post I'm going to give you some amazing Tips to start your programming Journey trust me 😊 it will be help full for you and after reading this tutorial, you'll feel great.

so , now let's start ---

for learn it in easy way follow given below point--

1. Choose any one programming Language ( Don't waste your time in choosing a programming Language ).

2. **Go to Youtube** and **Search** your programming Language.

3. Find in one video Tutorial [ like your programming Language is java , then find **JAVA in One Video Tutorial** ].

4. **Complete it at Once**

5. **Congratulation** 🎉 now your confidence boost ( 0% to 30+% ).

6. After that you can choose any course or tutorials 
it'll be easy to understand for you.

I hope this post will be helpfull for you.
JavaScript Coercion in Arabic
Tags: javascript, webdev, programming, react
Published: 2021-11-28 11:04:54

دايما بتلاقى فى الانترڤيوهات سؤال عن ايه الفرق بين ال "===" و ال "==" فى الچاڤاسكريبت و بتكون الاجابة فى الاغلب ان ال "===" احسن عشان بتقارن النوع و الڤاليو فى حين ان ال "==" بتقارن الڤاليو بس .
دى تعتبر الاجابة السهلة بس الاجابة دى بتفتح الباب لسؤال تانى لو ال "===" احسن و افضل ليه ال "==" متشالتش او اتلغت من اللغة او ليه الكوميونتى مطلبش انها تتشال طالما ملهاش لازمة؟
لو انت قريت ال specs هتلاقى ان الفرق بينهم ان ال"==" بتسمح بال coercion بمعنى ان لما الكومبيلر بيلاقى ال"==" بيعمل حاجة اسمها implicit coercion يعنى انه بيحول النوع بتاع ال variable لنوع تانى و ده بيكون تبعا لقواعد معينة.
للتبسيط لو قلنا اننا عندنا كود
123 === ‘123’
اللى هيحصل ان الكومبايلر هيروح يشوف هل اول قيمة بتساوى تانى قيمة من حيث النوع و القيمة و لو صح هتكون النتيجة true و لو غلط هتكون false فعشان كدة النتيجة للكود ده هى false.

نيجى بقى للمشكلة بتاعتنا
123 == ‘123’
اللى هيحصل هنا مختلف شوية الكومبايلر هيمعل خطوتين مش خطوة واحدة الاولى انه هى هيحول القيمة التانية ل Number و بعدها هيقارن بين القيمتين عشان يكون الكود النهائى
123 === Number(‘123’)
و النتيجة هتكون trueو للعلم ال "==" بتسخدم ال "===" كأخر خطوة للتأكيد ان القيمتين بيتساووا مع بعض
ده لينك هيفيدك تفهم التحويل بيتم ازاى https://lnkd.in/dbZnqZT