teleren/devto huggingface dataset:
Some Array methods I've recently encountered
Tags: javascript, beginners
Published: 2021-01-04 03:32:16

Recently I've been working on my algorithms and data structure problems which has of course led to a ton of array manipulation. As I've done so I've run into some less common and less used array methods and thought I could share a few of my favorite encounters. I'll be running through 3 array methods that are less common so I wont be doing the fan favorites such as .map() or .forEach()  but ones I found useful or that I just found interesting. 

Let's get started.

### .some()

This one falls closer to the interesting category but absolutely has its uses as well. It's very similar to .includes() but not identical. 

**What it does**: checks if any values in an array meet a certain condition. It returns a truthy value if any pass the condition. 

**Example**
```
const oddNumbers = [1, 3, 5, 7, 9, 11];

console.log(oddNumbers.some(number => number % 2 === 0);
// This will log as false.

console.log(oddNumbers.some(number => number > 8);
// This will log as true.
```

This can of course be accomplished with other methods but if you're strictly lookingo see if any values in an array meet a certain condition and that's all this is the method you're looking for. 

### .from()

So this one is more on the interesting side than useful in my opinion simply because I feel like I would rather use other methods to perform the same things. It creates an array from a string among other things and is performed on the actual Array global object not on an array. 

**What it does**: creates an array from a string. It can also act similar to a map however in that it can transform each index in an array. 

**Example**
```
const chewbaccaArray = Array.from('chewbacca');

console.log(chewbaccaArray);
// This will log ['c', 'h', 'e', 'w', 'b', 'a', 'c', 'c', 'a'];

const numbers = [1, 2, 3, 4, 5]

const tenDigits = Array.from(numbers, number => number * 10);

console.log(tenDigits);
//This will log [10, 20, 30, 40, 50]
```

Again my opinion on this is while it's interesting to know about it I feel like I'd rather either map an array or split a string for the same effect.

### Set

Alright so I don't know if this counts as an array method to be honest but it's easily my favorite of the bunch. This one hands down wins as the most useful of the three. 

**What it does**: It creates an array of only unique values so there are no duplicates. This isn't performed directly on an array but an array is passed into it. 

**Example**
```
const badCounting = [1, 2, 3, 3, 4, 5, 5, 5, 6];

const goodCounting = [...new Set(badCounting)];

console.log(goodCounting);
//This will log [1, 2, 3, 4, 5, 6]
```

Pretty sweet I know.

I think this one was the most interesting and useful encounter and I'm stoked to have it in my arsenal. I can think of many times I was in need of exactly this. 

Anyways those are just some methods I've run into that I thought were worth sharing. Let me know if there are any other neat or niche ones that you can use on arrays or objects I'd love to see more.

Happy Coding and Happy New Year!
Code Smell 52 - Fragile Tests
Tags: codesmell, tutorial, codenewbie, webdev
Published: 2021-01-04 03:15:00

*Tests are our safety nets. If we don't trust on their integrity, we will be in great danger.*

TL;DR: Don't write non-deterministic tests.

# Problems

- Determinism

- Confidence loss

- Wasted time

# Solutions

1. Test should be in full control. There should be no space for erratic behavior and degrees of freedom.

2. Remove all tests coupling.

{% post https://dev.to/mcsee/coupling-the-one-and-only-software-design-problem-2pd7 %} 

# Examples

- Fragile, Intermittent, Sporadic or Erratic tests are common in many organizations. 

Nevertheless, they mine the developers trust. 

We must avoid them.

# Sample Code

## Wrong

[Gist Url]: # (https://gist.github.com/mcsee/20c94ec159e6333ddd5891b4af0d5688)
```java
import static org.junit.Assert.assertEquals;

import org.junit.Test;

import components.set.Set;
import components.set.Set1L;

public abstract class SetTest {
 
    protected abstract Set<String> constructor();
   
    @Test
    public final void testAddEmpty() {
        Set<String> s = this.constructor();
        s.add("green");
        s.add("blue");
        assertEquals("{green. blue}", s.toString());
       //This is fragile since it dependes on set sort (which is not defined)
    }   
}
```

## Right

[Gist Url]: # (https://gist.github.com/mcsee/e89bdc655b7248598e0e8ccd3e94997d)
```java
import static org.junit.Assert.assertEquals;

import org.junit.Test;

import components.set.Set;
import components.set.Set1L;

public abstract class SetTest {
 
    protected abstract Set<String> constructor();
   
    @Test
    public final void testAddEmpty() {
        Set<String> s = this.constructor();
        s.add("green");
        assertEquals("{green}", s.toString());
    }   

    @Test
    public final void testEntryAtSingleEntry() {
        Set<String> s = this.createFromArgs("red");
        Boolean x = s.contains("red");
        assertEquals(true, x);
    } 
}
```

# Detection

Detection can be done with test run statistics. 

It is very hard to put some test in maintenance since we are removing a safety net.

# More Info

%[https://softwareengineering.stackexchange.com/questions/109703/how-to-avoid-fragile-unit-tests]

# Relations

{% post https://dev.to/mcsee/code-smell-76-generic-assertions-31f1 %}

# Tags

- Coupling

- Determinism

# Conclusion

Fragile tests show system coupling and not deterministic or erratic behavior.

Developers spend lots of time and effort fighting against this false positives.
 
# Credits

Photo by <a href="https://unsplash.com/@jilburr">Jilbert Ebrahimi</a> on <a href="https://unsplash.com/s/photos/glass-broken">Unsplash</a>

* * *

 > The amateur software engineer is always in search of magic. 

_Grady Booch_

{% post https://dev.to/mcsee/software-engineering-great-quotes-26ci %}

* * * 

This article is part of the CodeSmell Series.

{% post https://dev.to/mcsee/how-to-find-the-stinky-parts-of-your-code-1dbc %}

*Last update: 2021/06/12*
Teamwork makes the dream work.
Published: 2021-01-04 03:03:16


I've just completed my first Ruby on Rails CRUD website for Flatiron's Software Engineering course.  The jump from Sinatra to Rails came with a lot of new powerful tools, and helped fast track the standard setup for CRUD functionality.  During this project phase, a key lesson I learned was the importance of teamwork.

Every student in our cohort is responsible for their own projects, but I opted to ask a cohort member if they wanted to 'pair' through the process together.  It was a great learning experience, and after having established a rough plan to adhere to, we both were holding each other accountable.

The pairing process was constructive, time saving, and challenging.  We prepared flow charts of our work, presented them to each other.  We had to answer critical questions about design choices, and most importantly get over the fear of 'lost work' to accommodate a good point picked out by the other person, which ultimately yielded each of us better projects.

After planning was completed, we dove into programming and the pair process continued to pay dividends.  Each of us helped the other get unstuck on various topics that we each understood.  The debugging process was always over video chat, and focused mainly on helping the other person connect the missing dot and not simply solving the issue ourselves.  The teaching process helped tremendously to reinforce our own understanding and yielded great satisfaction to help push someone into understanding a topic they couldn't grasp entirely.

The other side of that experience was equally as beneficial.  At a point, trying to solve the same problem hour after hour can become very discouraging.  The time lost on small things that can be quickly explained simply from another point of view can yield much more progress if focused on other areas.  It was great knowing I could get a different perspective on something that just wasn't clicking.

With that extra time, we were able to exceed many of the project's requirements and troubleshoot the process together of getting our first 'local' programs working with Postgres and live hosted on Heroku.  The satisfaction at the end of the day to see a project, built entirely by myself that far exceeded what I could have done on my own in the same time was a critical lesson learned and one I'm glad we took the time to experiment with.  Teamwork makes the dream work.
Angular 11 DataTables Implentation Tutorial
Published: 2021-01-04 03:01:36


<!-- wp:paragraph -->
<p>Angular 11 datatable example. In this tutorial, i will show you step by step on how to integrate datatables in angular 11 app and display data dynamically in table.</p>
<!-- /wp:paragraph -->

<!-- wp:paragraph -->
<p>And also, you will learn simple of how to integrate datatables in angular 11 app. And using third party api fetch all post data from it and display in table format using datatable in angular 11 app.</p>
<!-- /wp:paragraph -->

<!-- wp:paragraph -->
<p>As well as, you can use modify and use another api for fetch and display data in datatable with angular 11 app.</p>
<!-- /wp:paragraph -->

<!-- wp:heading -->
<h2>Datatable Example In Angular 11</h2>
<!-- /wp:heading -->

<!-- wp:list -->
<ul><li>Step 1 - Create New Angular App</li><li>Step 2 - Add Code on Module.ts File</li><li>Step 3 - Add Code on View File</li><li>Step 4 - Add Code On Component ts File</li><li>Step 5 - Fetch Data From Server</li><li>Step 6 - Start Angular App And PHP Server</li></ul>
<!-- /wp:list -->

[https://www.tutsmake.com/angular-11-datatable-tutorial-example/](https://www.tutsmake.com/angular-11-datatable-tutorial-example/ "https://www.tutsmake.com/angular-11-datatable-tutorial-example/")
Free Hosting Providers
Tags: webdev
Published: 2021-01-04 02:55:36

List Of Free Hosting Providers || NO-ADS 

1. https://infinityfree.net/
Infinityfree is an excellent free website hosting provider giving you absolutely zero cost and unlimited web hosting services.
Signing up is fast, the specs are great, and you’ll have access to one-click installers & other great scripts that’ll get your website up and running in no time. With a free account, you’ll get unlimited bandwidth, unlimited disk space, no ads, Cpanel, unlimited databases, host up to 3 of your own domains, and many more great hosting features.

 2. https://www.000webhost.com/
Easy sign-up, free website builder, auto installer, and ad-free hosting are just some of its key features.
Your free accounts will also include 1 gigabytes of disk space, 10 gigabytes of bandwidth, MySQL databases, and Cpanel among many others.
000Webhost also provides paid hosting plans through Hostinger if your website grows and you need a shared plan. Prices start at $3.99 per month for Single Web Hosting, $8.84 per month for Premium Web Hosting and lastly, Business Web Hosting at $11.99 per month.

3. https://www.freehosting.com/
Freehosting has been around for more than 2 decades already, making them an expert and highly respected name in the web hosting industry.
It’s a great choice if you’re looking for more stability and reliability in your web hosting service.
Includes great features such as unmetered bandwidth, able to host your own domain name (domain you’ve purchased to other providers), an email account, 10 gigabytes of disk space and many more.
Running out of space or need of additional resources? Don’t worry, it also comes up with a paid hosting and one-time billed addons. Prices start at $7.99 per month.

4. https://ohosti. com/
OHosti gives you everything you need to start a website or blog at zero cost for more than 2 years already.
Its free shared hosting and VPS hosting is worth trying out.
Signing up is fast and easy, awesome specs which include unlimited storage and bandwidth, Cpanel, unlimited email and databases and more.
Performance is great for a free host and you can contact support 24/7 via Live Chat.

 5. https://x10hosting.com/
10hosting has been in the business for over 10 years. It is one of the oldest and most reputable names when it comes to free web hosting.
It’s a great choice if you’re looking for more flexibility in your web hosting service.
Get yourself a brand new website or blog up and running in no time with their easy setup plus a choice of a one-click installer and other awesome 200+ scripts.
Awesome specification including unmetered bandwidth and disk space, ads-free, MySQL databases, Cpanel, email accounts and more.
Risks Of Using A Public Wi-Fi
Tags: cybersecurity
Published: 2021-01-04 02:26:01



The problem with public Wi-Fi is that there are a tremendous number of risks that go along with these networks. While business owners may believe they’re providing a valuable service to their customers, chances are the security on these networks is lax or nonexistent.

Man in the Middle(MITM) Attacks:
One of the most common threats on these networks is called a Man in the Middle (MitM) attack. Essentially, a MitM attack is a form of eavesdropping. When a computer makes a connection to the Internet, data is sent from point A (computer) to point B (service/website), and vulnerabilities can allow an attacker to get in between these transmissions and “read” them. So what you thought was private no longer is.

Unencrypted Networks:
Encryption means that the messages that are sent between your computer and the wireless router are in the form of a “secret code,” so that they cannot be read by anyone who doesn’t have the key to decipher the code. Most routers are shipped from the factory with encryption turned off by default, and it must be turned on when the network is set up. If an IT professional sets up the network, then chances are good that encryption has been enabled. However, there is no surefire way to tell if this has happened.

Malware Distribution:
Thanks to software vulnerabilities, there are also ways that attackers can slip malware onto your computer without you even knowing. A software vulnerability is a security hole or weakness found in an operating system or software program. Hackers can exploit this weakness by writing code to target a specific vulnerability, and then inject the malware onto your device.


Attaullah Shafiq
Building a React modal component using a custom Hook
Tags: react, tutorial, webdev, javascript
Published: 2021-01-04 02:21:56

In this tutorial we’ll be building a custom React modal component that can be used to display a variety of web elements including: forms, alert messages, or images.

Let’s get started by using Create React App to setup our application:

```
npx create-react-app react-modal
```

In the `/src` folder create a new file called `useModal.js` which will contain the `useModal()` custom Hook. Custom Hooks should always start with `use` so that you can quickly tell that it’s a re-usable Hook:

```javascript
import { useState } from 'react';

const useModal = () => {
  const [visible, setVisible] = useState(false);
  function toggle() {
    setVisible(!visible);    
  }
  return {toggle, visible}
};

export default useModal;
```

Also in the `/src` folder create a new file called `Modal.js` for the modal component itself:

```javascript
import React from "react";
import ReactDOM from "react-dom";

const Modal = ({ visible, toggle }) => visible ? ReactDOM.createPortal(
  <div className="modal">
    <div className="modal-pop" role="dialog" aria-modal="true">
      <h3>Hello World</h3>
      <p>Et sit saepe velit tenetur et consequatur in. Nihil doloribus nulla nulla rem. Soluta illo et asperiores numquam earum nesciunt. Vero odio voluptatem sunt sunt laboriosam.</p>
      <button type="button" onClick={toggle}>Close</button>
    </div>  
    <div className="modal-overlay"></div>    
  </div>, document.body
) : null;

export default Modal;
```

If `visible` is `true` we use a [Portal](https://reactjs.org/docs/portals.html) to render the modal into a DOM node that exists outside the DOM hierarchy of the parent component, in this instance the `<body>`. This is because modals need to be the last DOM element in a page to meet accessibility requirements.

We can now pull it all together by modifying the `App.js` file as follows:

```javascript
import Modal from './Modal';
import useModal from './useModal';
import './App.css';

const App = () => {
  const {toggle, visible} = useModal();
  return (
    <div className="App">
      <button onClick={toggle}>Show Modal</button>
      <Modal visible={visible} toggle={toggle} />
    </div>
  );
}

export default App;
```

Finally add some basic CSS to `App.css` so we can test the functionality:

```css
.modal-pop {
  background: #fff;
  border: 2px solid #aaa;
  border-radius: 5px;  
  z-index: 999;
  max-width: 420px;
  margin: auto;
  padding: 1em 2em 2em;
  position: relative;
}
.modal-overlay {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: 99;
  background-color: #000;
  opacity: 0.75;
}
```

You can now test the modal by running the `npm start` command.

Whilst this example is quite simple it demonstrates how to build a functioning modal component that you can customise for use in future projects. Thanks for reading and be sure to check out my other tutorials on building React components.
Data Structures and Big(o)
Tags: algorithms, webdev, datastructures, development
Published: 2021-01-04 01:59:02

Hello my fellow people once again, I wanted to cover Big(o) and its relation to data structures. If you read my previous post you should know the different types of data structures, what data structures are and how we use them. You should also have a good idea of what time complexity(Big(o)) is. If not, you can read them again here:
_https://dev.to/nashmeyah/time-complexity-simplified-3io7_
_https://dev.to/nashmeyah/linear-data-structures-4ial_

otherwise, lets review quickly. data structures are a way for us to have a management system for storing and maintain our data.

*Linear: arrays, lists*
*Tree: binary, heaps, space partitioning etc.*
*Hash: distributed hash table, hash tree etc.*
*Graphs: decision, directed, acyclic etc." (2017-2020 integralist)*

Time complexity is an analysis used in programming to time how long it takes to run an algorithm given a number of inputs(n), as well as how long it takes to complete the task. Usually often referred to as Big-O notation, here is a list of common time complexities used with definitions.

**"O(1) — Constant Time: it only takes a single step for the algorithm to accomplish the task.
O(log n) — Logarithmic Time: The number of steps it takes to accomplish a task are decreased by some factor with each step.
O(n) — Linear Time: The number of of steps required are directly related (1 to 1).
O(n²) — Quadratic Time: The number of steps it takes to accomplish a task is square of n.
O(C^n) — Exponential: The number of steps it takes to accomplish a task is a constant to the n power (pretty large number)."**(freecodecamp, Algorithms in plain English: time complexity and Big-O notation, 2016


Ok, cool! Now lets get started. So, how do these two subjects come two in two? Well, determining what method you'll be using, access, search, insertion, or deletion. Each have an estimated time complexity. Generally, its best to go with a "worst case scenario" when finding the time complexity for an algorithm that way you know what's the worst possible time it takes for the algorithm to run. The image I have attached is a cheat sheet that I refer to at times, I attached it instead of writing down all of the different part. I feel it would make more sense to look at the color coordination than black and white, eezy-peezy-lemon-squeezy!

![Alt Text](https://dev-to-uploads.s3.amazonaws.com/i/rf1jmolv412z4fvgrdlj.png)

Thank you for reading my article, if I should clarify or go over with more details on a certain subject please let me know or  if you think I should update or change any information, please leave a comment I am always willing to learn new things daily.
How to wrap Component with All the attributes?
Tags: angular
Published: 2021-01-04 01:54:00

I am using Nebular Theme now and I like their "NbInput" directive very much.
However, I am going to create a custom password_form_control.
you can see what I want in the attached file.

There are many attributes in the input field and so I had to declare them as @Input in the custom control, which wraps the input field, and It was a pain to me.

Are there any better way to develop custom control?
Hacktoberfest 2020 goodies arrive
Tags: hacktoberfest, thedigitalocean, opensource, flutter
Published: 2021-01-04 01:41:53

![Alt Text](https://dev-to-uploads.s3.amazonaws.com/i/xxztdfbfi7rp62xehzq9.jpg)
**Hacktoberfest 2020** was a life-changing experience for me. Besides being introduced to the world of **opensource**, I was also enlightened on the working of the collaborative machinery of the world of coding and technology. I finally received the goodies and was filled with motivation to work more and more towards improving my skills as a coder and developer. The feeling is delightful and highly inspiring as one sees his work getting even the slightest of recognition. I am grateful for this opportunity and am looking forward to it the next year too.
Day 1 : 100DaysOfCode
Tags: 100daysofcode, codenewbie, cpp, kotlin
Published: 2021-01-04 01:17:28

Day 1 went well. 
Did some leetcode problems basically focussed on array.

Completed my daily task at my internship in android dev(using kotlin).
->(for day2 i am thinking to start with learning docker but 
ps: i have my classes as well).

You can Follow me->
https://github.com/singhtaran1005
https://www.linkedin.com/in/taranpreet-singh-chabbra-27517918a/
3 ท่า Regular Expression pattern ง่ายๆ ที่ได้ใช้บ่อยๆ
Tags: programming
Published: 2021-01-04 01:00:39

RegEx อาจจะอ่านอยาก แต่ที่ใช้บ่อยๆนั้นไม่ซับซ้อนเลย โพสต์นี้จะลิสต์ที่ใช้ประจำเท่าที่จำได้ออกมาให้ดู

### 1. ค้นบรรทัดที่ขึ้นต้นด้วย pattern ที่ต้องการ
เช่นใน Go ฟังก์ชันนั้นประกาศด้วย func ขึ้นต้นแน่ๆ เราสามารถใช้ `^` ช่วยได้เพื่อกรองเอาแค่การประกาศฟังก์ชันเท่านั้นโดยใส่ `^` ข้างหน้าสิ่งที่ต้องการค้นเช่น `^func`

### 2. ค้นบรรทัดที่ลงท้ายด้วย pattern ที่ต้องการ
เช่นเราอยากหาการประกาศฟังก์ชันของ Go ที่ return error type กลับออกมา ซึ่งมันจะต้องลงท้ายด้วย `error {` แน่ๆ เราก็ใช้ `$` ช่วยได้ โดยส่งไปที่ท้ายของ pattern ที่ต้องการค้นหาเช่น `error {$`

### 3. ใช้ `.*` ตรงส่วนที่เราไม่สนใจ อยากให้มันเป็นอะไรก็ได้
เช่นจากสองข้อเมื่อกี้ถ้าเราเอามาประกอบกัน อยากหา `func` ที่ลงด้ายด้วย `error {` เพื่อให้การค้นหาเจอสิ่งที่ต้องการมากขึ้น เราจะใช้ทั้ง `^` เพื่อระบุสิ่งที่อยู่ข้างหน้า ใช้ `$` เพื่อระบุสิ่งที่อยู่ข้างหลัง และ `.*` เพื่อบอกว่าตรงกลางระหว่างนี้เป็นอะไรก็ได้แบบนี้ `^func.*error {$`

<a href="https://www.buymeacoffee.com/weerasak" target="_blank"><img src="https://cdn.buymeacoffee.com/buttons/v2/default-yellow.png" alt="Buy Me A Coffee" style="height: 60px !important;width: 217px !important;" ></a>