teleren/devto huggingface dataset:
Boot Camp Week 1 
Tags: week1, newdev, javascript, basics
Published: 2021-09-26 18:37:12

![Alt Text](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/qmnocux946f2f9kz46bp.gif)

### Week one is done, 

I've finishes week one of boot camp, I need to say this upfront, I've done the basics of JavaScript before following a number of YouTube tutorials. but this time it was different.

I really enjoyed the conversation this week, Sat in lectures it was more than I expected, the lectures are to way, unlike a YouTube video I was able to ask questions and try and answer them, And the tutors aren't afraid to make mistakes. this is HUGE to me, A lot of the time when you watch something its edit all crisp and clean and it makes coding seem like this really impossible thing. but knowing that I'm not the only one making mistakes is a big thing for me.

### So what did you learn?

This past week we concentrated on the basics of JavaScript and carried on from some of the things we learned during the pre course, we looked at the basic of the terminal and how to use git, All things I already have a firm handle on, sounds like it might be boring since I already had a good grasp of it right? far from it, its good to hear someone different explain things to you sometimes, they might explain it in a new way and it might just Click.

This week we also had a lecture on the sorcery known as RegEx, the secret of which until now seemed like a mystery, Just having someone explain it to me in a different way with different examples has made it more understandable, the same goes for the rest of the subjects we covered.

### what did I like the most?

the best thing about this week has to be the structure of the boot camp, the days starts with a warm up, a small not too tough exercise to get your brain going, after that we move into lectures, the lecturer explains the topic in a really easy to understand way, after lectures we move to sprints, this is time for us to get going practicing what we have just covered, Its the same after lunch with a lecture and a sprint.

###Anything I didn't like?

Not really anything I didn't like, I did find some of the extra challenges a little bit challenging but that's not always a bad thing. PAIR programming, I don't understand it yet I get the basic of it but the reasons make no sense yet, I get that 2 people sit at a computer and code but only one of them at a keyboard at a time makes no sense.

I'm looking forward to week 2, I look forward to the new things I'm going to learn, and if its anything like the first week its going to be very interesting.
Python challenge_7
Tags: python, programming, webdev, challenge
Published: 2021-09-26 18:17:05

###Anagrams
####level of challenge 3/10
- Two strings are anagrams 
- if you can make one from the other by rearranging the letters.
- Write a function 
- named is_anagram that takes two strings as its parameters.
- Your function should return True if the strings are anagrams, 
- and False otherwise.

- For example, 
- the call is_anagram("typhoon", "opython") should return True while the call 
- is_anagram("Alice", "Bob") should return False.

Hint

- You can compare how many times each letter appears in each string.
- Alternatively, sorting the letters in each string makes this much easier.

#####My solution 
```
def is_anagram(string_one, string_two):
    str_dic_one = {}
    str_dic_tow = {}

    for str_one in string_one:
        if str_one in str_dic_one:
            str_dic_one[str_one] += 1
        else:
            str_dic_one[str_one] = 1

    for str_tow in string_two:
        if str_tow in str_dic_tow:
            str_dic_tow[str_tow] += 1
        else:
            str_dic_tow[str_tow] = 1

    if str_dic_one == str_dic_tow:
        return True
    else:
        return False

print(is_anagram('typhoon', 'opython'))
```
#####Another solution
```
def is_anagram(string1, string2):
    return sorted(string1) == sorted(string2)
```

```
def count_letters(string):
    return {l: string.count(l) for l in string}
```

```
def is_anagram(string1, string2):
    return count_letters(string1) == count_letters(string2)
```

Add your solution in the comment :)
NServiceBus - Basic usage
Tags: dotnet, csharp, nservicebus, tutorial
Published: 2021-09-26 18:11:15

NServiceBus is a project that help you to create distributed system (scalable, reliable and flexible) abstracting the queuing technology (for debug purpose we can use local file system). 

Using the NServiceBus is very easy, we need a message, which can be a class or an interface that extend the IMessage and message handler class that implement IHandleMessages<T> with the message type. 

```c#
public class ProcessMessage : IMessage 
{
    public string Value { get; set; }
}

public class ProcessMessageHandler : IHandleMessages<ProcessMessage>
{
    // NServiceBus also provider log abstraction
    private static readonly ILog Log = LogManager.GetLogger(typeof(ProcessMessageHandler));

    public Task Handle(ProcessMessage message, IMessageHandlerContext context)    
    {
        Log.InfoFormat("Received message with value: {0}", message.Value);
        return Task.CompletedTask;
    }
}
```

Before send the message is necessary to configure and start the Endpoint. An endpoint is a logical component that communicates with other components using messages. Each endpoint has an identifying name, contains a collection of message handlers and/or sagas.

An endpoint instance is a physical deployment of an endpoint. Each endpoint instance processes messages from an input queue which contains messages for the endpoint to process. Each endpoint has at least one endpoint instance. Additional endpoint instances may be added to scale-out the endpoint. A collection of endpoint instances represents a single endpoint if and only if:

- The endpoint instances have the same name.
- The endpoint instances contains the same collection of handlers and/or sagas.
- The endpoint instances are deployed to the same environment.

The code bellow show how to configure and create an Endpoint instance:

```c#
var endpointConfiguration = new EndpointConfiguration("SimpleMessage");
     
// Using local file system
endpointConfiguration.UseTransport<LearningTransport>();
            
var endpointInstance = await Endpoint.Start(endpointConfiguration);

Console.WriteLine("Press 'Enter' to send a ProcessMessage message");
Console.WriteLine("Press any other key to exit");
while (true)
{
    if (Console.ReadKey().Key != ConsoleKey.Enter)
    {
        break;
    }
   
    var val = Guid.NewGuid();
    var startOrder = new ProcessMessage { Value = val.ToString() };
    // Send the ProcessMessage
    await endpointInstance.SendLocal(startOrder);
        Console.WriteLine($"Sent ProcessMessage with OrderId {val}.");
}

await endpointInstance.Stop();
```

As you can see it's very easy to start coding with NServiceBus.



The main advantage of NServiceBus is your documentation, it's very well documented, and have a paid support in case of you need it.

References:
[NServiceBus](https://docs.particular.net/nservicebus/)
[NServiceBus Endpoint](https://docs.particular.net/nservicebus/endpoints/)
[Full code](https://github.com/lillo42/Article/tree/master/NServiceBus/SimpleMessage)
Scrape any website Using PHP code
Tags: php, codenewbie
Published: 2021-09-26 18:06:25

Im Scraping [MT manager](https://mtmanager.co) Website.

<?php
# curl.php

// Initialize a connection with cURL (ch = cURL handle, or "channel")
$ch = curl_init();

// Set the URL
curl_setopt($ch, CURLOPT_URL, 'http://mtmanager.co');

// Set the HTTP method
curl_setopt($ch, CURLOPT_CUSTOMREQUEST, 'GET');

// Return the response instead of printing it out
curl_setopt($ch, CURLOPT_RETURNTRANSFER, 1);

// Send the request and store the result in $response
$response = curl_exec($ch);

echo 'HTTP Status Code: ' . curl_getinfo($ch, CURLINFO_HTTP_CODE) . PHP_EOL;
echo 'Response Body: ' . $response . PHP_EOL;

// Close cURL resource to free up system resources
curl_close($ch);
Counting zero's sucks!!
Published: 2021-09-26 17:57:11

Let's get real, it sucks when things don't behave the way they should. User-friendliness is underrated when it comes to form input fields.

When providing a user with an input field to write a number and it doesn't get formatted as how normally numbers are, it gives the user another task of counting zero's, honestly it sucks :angry:.

Tried searching for a solution online but couldn't find what I wanted :weary:, that's when I decided to solve it myself and help others by compiling the solution into a library and place it in a place where anyone can find it. 

[Github link](https://github.com/mwasigala/DynamicInputNumberFormatter.js)
[NPM link]
(https://www.npmjs.com/package/dynamicinputnumberformatter)

## Demo
![Demo](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/mhc0wxihwkrndrk0lsy1.gif)
<br>


## How did I do it ?!
Regular Expression
![Regular Expression](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/ot4s0d59b14f9wzqhwof.png)
Why reinvent the wheel?! :frowning:
Regards,
CSS @supports rule
Tags: css
Published: 2021-09-26 17:56:01

---
title: CSS @supports rule
published: true
date: 
tags: css
canonical_url: https://cgweb.co.uk/blog/css-supports-rule
---

A quick post on @supports rule which although I know about I rarely use. This is described by MDN as allowing you to "specify declarations that depend on a browsers support for specific CSS features". 

A couple of simple examples to check if a single feature is supported or not: 

```css 
@supports (display:grid){ 
  main { display: grid; } 
} 
@supports not (display:grid){ 
  main { display: block; } 
} 
``` 
These simple examples can be made more complex through the use of `not`, `and` and `or` operators. Firstly the `not` operator is used to check if a property/value is not supported e.g. display grid in the example above will be matched in Internet Explorer but ignored in modern browsers. The `and` operator will only be matched when all expressions evaluate to true - multiple options can be chained together e.g.
 
```css 
@supports (display:grid) and (display:inline-grid) { 
  // do something 
} 
``` 

The `or` operator will match if any of the given expressions are matched e.g.

```css 
@supports (display:grid) or (display: flex){ 
  // do something 
} 
``` 

I also learnt it is possible to check for support of custom properties e.g.
 
```css 
@supports (--bgcolor: red){ 
  body { 
    background-color: var(--bgcolor); 
  } 
} 
```
Javascript fundamentals before learning react
Tags: requirement, react, javascript, beginners
Published: 2021-09-26 17:47:33

# Before Going to Learn React You must need Some JavaScript concepts.
- let,var and const
- function and arrow function
callback 
- hight order function
- class
- destructuring array and object
- import and export 
- HTML and CSS Basic

### Don't worry I will explain you in details.

## let,var and const

  let,var,const are just a variable declaring. let and const are come in ES6.
Before we use var for variable declaring. There are some advantages of using var and let.
   var is used for functional scope and let is used for block scope.
  Block scoped is only work in  inside this { } and you can't call this variable outside of the scope. Var is used in function scope means like a global variable. You can call it from anywhere.CONST is the same use let but const is used only in const value ,  Array and Object.

## function and arrow function
   function is used to avoid DRY(Don't Repeat Yourself). You can declare a function like this.
 
```js
function add(a,b)
{ 
           return a + b
} 
```
What is arrow function? Arrow function is a new way to declaring function that comes in ES6. You can easily convert the above function into an arrow function like this. 

```js 
   const add = (a,b) => { a + b} ;
```
  It is short right ??

## Callback
  callback ?? confusing 😅 Don't worry I will explain easy way .
  A callback function is a function passed into another function as an argument, which is then invoked inside the outer function to complete some kind of routine or action. see in demo
```js
  setTimeout( function name(){
             console.log("This is zaw");
             },1000) 
```
## High Order Function 

   Higher-order functions are functions that take other functions as arguments or return functions as their results. Some high-order functions are map, filter, reduce, etc,.. .I am  not going this in detail there are many articles on this you can easily search and read it.
[link](https://eloquentjavascript.net/05_higher_order.html)

## Destructuring array and object

 Destructuring is spliting value into pieces.

```js
  var array = [ one = 1,two = 2,three = 3,four = 4]; 
  var [one,two,three,four] = array; 
  console.log(one);//you will get 1
  console.log(two);//2
``` 
To destruturing object 

```js
const Obj = { name:"Zaw",age:21,gender:"male"};
const {name,age,gender} = Obj;
console.log(name); //Zaw
console.log(age);
```
## import and export . 
   import is used to call packages that already on .
```js
 import React from {React} .
```
  Export is used to export your own package that you have been written and you can call by using import when You need it. 

```js
  export package;
```
### Thank for reading this I hope this will helpful to you please give me your feedback .I wrote this according to my experience if you found any mistake feel free to DM me on twitter [hareom284](https://twiter.com/hareom284)
Add Some Bounce to your Forms with Animated Floating Labels
Tags: css, codepen, webdev, forms
Published: 2021-09-26 17:11:26

## How to Style Form Labels like Placeholders

**Disclaimer:** Forms with labels directly on top of the inputs have always looked perfectly fine to me. I never understood the movement a few years ago to design forms without labels. You can fit a lot more useful text above the input than trying to cram all it in as a placeholder. 

That being said, there may be times when it makes sense to style forms this way, so I decided to revisit these label/input combinations for Codepen's weekly challenge "Lightness", while also making sure to keep these components accessible:

{% codepen https://codepen.io/pursuitofleisure/pen/oNwPdma %}

These "floating" labels are not new, and here they're styled to be more bouncy than you'd probably want to use on most of your sites. But the structure is what's important here as the CSS can always be tweaked. So let's make sure to make these as accessible as possible following some of the tips outlined in this [Smashing Magazine article](https://www.smashingmagazine.com/2018/06/placeholder-attribute/) about the cons of using placeholders.

### Keep the `<label>` Tags

This example is not even using placeholders at all. Instead the label tag has been styled to sit inside the input tag, so it can keep the relevant HTML connection to the input.

```html
<div class="form-input">
   <label for="firstName">First Name</label>
   <input type="text" id="firstName" name="firstName" autocomplete="given-name" />
</div>
```

### Keep the Labels during and after the User has Filled in their Information

This is where JavaScript is necessary. You can style the labels to rise and float above the field when the input is focused with CSS, but we need to keep the labels after users have finished and focused out of the input so it's easier for them to review their information. If you use placeholders, the useful text will disappear once the input is filled in.

When a user clicks into the input, I'm adding a class of "floating," and keeping the label there permanently unless the user doesn't fill out the input, in which case it returns to its original location.

```javascript
// Add floating class
function floatLabel(e) {
   e.currentTarget.parentElement.classList.add("floating");
}

// Only remove floating class if there is no text in the input
function checkInput(e) {
   if (!e.currentTarget.value.length) {
      e.currentTarget.parentElement.classList.remove("floating");
   }
}
```

## Conclusion

When I started doing web development I was concerned with just making sure elements were styled like the design - which is challenging in itself, especially with form elements - but now I'm paying more attention to the structure to make sure that I'm not making it more difficult for people to use my sites because of the way they're styled.
Staying out of confusion about what you really love in Computer Science world
Tags: computerscience, motivation, beginners
Published: 2021-09-26 17:07:36

For the first post I want to discuss about one of the most things that every beginner in computer science world will definitely face it someday, which is Confusion.
You might get confused by many different things. Maybe you see your friends working on a fantastic project, and you are appealed to participate on that project, Maybe there are some certain fields you wanna dive in to them just because there are many job offers and career options for that field in industry or academia,
Maybe you just want to follow a trend that is usually hyped all around the world. But if we consider all of these situations plus the other unknown ones too, we are not considering the most important aspect of all of these things, which is Finding What You Love!
In my opinion, finding what you love is the most important thing that every human should do or at least try it in order to someday they will find the correct way. Doing what you love is the key to happiness and it is going to show itself more and more when you are in a world of technologies which is like an ocean; You are not going to explore all of the fields.

So what is the solution? How can we find what we love?

SIMPLE ANSWER: by just trying different things quickly.
If I were in someone's shoes in this situation, I would try every thing that comes to my mind in order to find my interests and beloved things faster, because this is the only way, and I have no other choices, so do other people.

It will be probably the same for you guys who are actually reading this post.

I just wanted to share my opinion about this for my first post, and I did not write it down well, because English is not my first and native language.

Btw, Thanks for reading this :))))
Bouncing dots Loader in React 
Tags: react, loader, css, bouncing
Published: 2021-09-26 17:02:07

Hi Folks,

Loading component is a very common requirement in react to represent the loading state. In this tutorial, I will explain how you can create bouncing dots loader using CSS.

We will be creating a loader as shown below -

![CPT2109251455-297x146](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/ygbp638kpfa4c1ad9kab.gif)
 
Let's get started -

For this tutorial, I'm assuming you already have a React project setup ready with you.

Now, let's create a **BouncingDotsLoader** component in React and add JSX to create those three dots. 

######BouncingDotsLoader.js
```
import React from "react";

const BouncingDotsLoader = (props) => {
  return (
      <div className="bouncing-loader">
        <div></div>
        <div></div>
        <div></div>
      </div>
  );
};

export default BouncingDotsLoader;
```

Let's understand the above code-

Here, I have created an outer div container to wrap all the 
three identical dots with class `bouncing-loader`. To create these three dots, I've added three div element inside this container. 

Now, Let's add CSS to style the dots-

```
.bouncing-loader {
  display: flex;
  justify-content: center;
}

.bouncing-loader > div {
  width: 16px;
  height: 16px;
  margin: 3px 6px;
  border-radius: 50%;
  background-color: #a3a1a1;
  opacity: 1;
  animation: bouncing-loader 0.6s infinite alternate;
}
```

Let's understand the above CSS -

I've added `display: flex` and `justify-content: center` to `bouncing-loader` class to make those dots inline & center. Also, added CSS to `bouncing-loader > div` to style each dot with an `animation` shortand property with value `bouncing-loader 0.6s infinite alternate` representing CSS properties `animation-name animation-duration iteration-count animation-direction`.

It will look like this -

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

Let's add the final CSS to create the bouncing effect- 

```
@keyframes bouncing-loader {
  to {
    opacity: 0.1;
    transform: translateY(-16px);
  }
}

.bouncing-loader > div:nth-child(2) {
  animation-delay: 0.2s;
}

.bouncing-loader > div:nth-child(3) {
  animation-delay: 0.4s;
}
```

Let's understand the final CSS - 

I've added keyframes to the bouncing-loader animation at start point with `opacity: 0.1` & `transform: translateY(-16px)` & delayed the animation for second and third dot with 0.2 & 0.4 seconds respectively.

This way, Our very simple bouncing dots loader is ready.

That was it from this article. Do share your comments and feedback about the article.

Find the code below.

{% codesandbox v13s4 %}

Keep learning!
Instalando o Composer de forma global no macOS
Published: 2021-09-26 16:58:20

> Este tutorial é uma tradução do [artigo escrito por Chris Collins](https://www.chriscollins.me/notes/install-composer-globally-on-mac-os/).

## 1. Baixando o Composer
Faça o download e instale o composer usando o seguinte comando curl em seu terminal, fornecido pelo próprio projeto do composer:

```bash
curl -sS https://getcomposer.org/installer | php
```

Depois de executar esse comando, haverá um arquivo composer.phar no diretório atual. Você pode usá-lo neste diretório ou mover para a pasta de arquivos binários e deixá-lo global, como no passo abaixo.

## 2. Instalando de forma global
Para tornar o composer disponível globalmente, permitindo que você digite `composer install` em qualquer lugar, você deve mover o composer.phar baixado anteriormente para a pasta bin do seu usuário:

```bash
mv composer.phar /usr/local/bin/composer
```

Agora precisamos criar um atalho no seu shell padrão para que funcione da maneira mencionada acima.

#### Usando Bash? (shell padrão do macOS <10.14, 2002-2019)
Abra o arquivo `~/.bash_profile`:

```bash
nano ~/.bash_profile
```

#### Usando ZSH? (shell padrão do macOS 10.15+, 2019-presente)
Abra o arquivo `~/.zshrc`:

```bash
nano ~/.zshrc
```

Adicione um atalho para apontar para o composer.phar que você moveu para `/usr/local/bin`. Em seu `.zshrc` ou `.bash_profile`, adicione a seguinte linha:

```bash
alias composer="php /usr/local/bin/composer"
```

## Usando o composer globalmente
Depois de reiniciar seu terminal, você poderá acessar o composer como abaixo:

```bash
composer self-update
```
Inspect a Ruby gem in my editor
Tags: todayilearned, ruby, rails, debugging
Published: 2021-09-26 16:46:39

*Translated from my blog: [Débugger une gem Ruby](https://blog.notgrm.dev/debugger-une-gem-ruby/)*

Sometimes I may have to inspect one of my Ruby (or Rails) project dependency to debug an error, or understand how things works.
 
I could open my browser, go to Github.com, and look through the gem repository. But this approach required me know the version used in my project, and it does not allow me to prove that my hypothesizes are valid as I can follow the runtime only in my head.

OR

I could also use the `bundle open <gem>` command as it will open the downloaded dependency and open its file right in my editor. Opening my project's gem allows me edit its files and saw the changes be applied instantly, for exemple I could puts some debugging breakpoints and inspect the current runtime context of my problem to resolve it.

Once I have finished my inspection, I can use the `bundle pristine <gem>` command to revert any changes made to my project dependency.

### Additional links
- [The Bundler open command](https://bundler.io/v2.2/man/bundle-open.1.html)
- [The Bundler pristine command](https://bundler.io/v2.2/man/bundle-pristine.1.html)