teleren/devto huggingface dataset:
"I'm Not Ready"
Tags: devjournal, codenewbie, womenintech
Published: 2020-07-07 07:24:51

_This post was originally published on July 7, 2020 on [my blog] (https://alexlsalt.github.io/blog)._

So I try to meditate (i.e. sit in silence and not do anything and sometimes achieve this cool, out-of-body spinning sensation) for 10 minutes every morning during the week.

I've been doing it consistently for the past - mmm - four months (?) but have been doing it on-and-off over the past 2-3 years.

Just a quick note - I highly (!!) recommend it to iron out any spikey brain waves and to get your day started on a relatively calm-yet-energized note.

This morning, as I was meditating (with the Dreamy Vibes playlist from Spotify in the background), I noticed this thought pop up in my mind:

"I'm not ready."

Normally during my meditations, I just zone out for a few minutes and am not really all that conscious of any thoughts peeping up. But this morning, I was surprised that that thought was so clear.

It's good to have this clear idea of what exactly I'm thinking because now I can go about my daily tasks while being aware that any resistance to what I'm doing is *most likely* a direct result of this one thought of not being ready.

Yay for clarity! Yay for doing whatever I was going to do anyway!

Today it's 1) working through a couple sections of API work in my Udemy course, 2) making a minimum of 5 get-out-the-vote calls for Americans abroad, and 3) designing a few media graphics.

What's on your plate? Anything your brain is telling you you're 'not ready' for?

Thanks so much for reading along! [Now let's be friends over on Twitter >>] (https://twitter.com/alexlsaltt)

P.S. I've launched a brand-new podcast! Stay up to date by [signing up for the newsletter here >>] (https://www.ladiescodecollective.com/)

![The Ladies Code Collective Podcast art](https://dev-to-uploads.s3.amazonaws.com/i/nl20jdyk6b9ec2w1lms7.png)

P.P.S. If you're an American abroad and need any info on voting in this year's election, head to [www.votefromabroad.org] (https://www.votefromabroad.org/) and make sure you're all set to receive your ballot.
Why is integration testing important?
Tags: integrationtesting, testing
Published: 2020-07-07 06:57:49

In our testing condition, the greater part of the organizations and association centers around start to finish testing. All things considered, start to finish testing is vital, however, it needs to cover the genuine use cases. The majority of the analyzers invested 80% of the energy discovering fundamental bugs as opposed to chipping away at the genuine use cases. 

With the correct testing procedure and discharge plan, in reality, there is in every case less time or no ideal opportunity for testing continuous use cases. 

The greater part of the business and association have adjusted uniquely to the Unit testing and Functional testing. It's a portion of the association that has the Integration testing in the testing life cycle. 

< href="https://www.testingxperts.com/blog/integration-testing">Integration testing</a> is a methodology where modules are created, and testing of modules consistently begins at the best degree of the programming chain of command and proceeds towards the lower levels. It's the augmentation of unit testing. Integration testing takes a littler unit of unit testing and tests their conduct as the entirety. 

What does it require to have integration testing? 

In particular, it requires a Developer with Tester's disposition. 

The executive's consolation to construct a solid Test group that might work and adopts the thought process of an analyzer with advancement ranges of abilities. 

Test Automation Developers need to think past the composing test after the item assembled yet at the beginning phase of improvement. 

Test are composed from the very first moment of the advancement cycles
Scrolling to a specific element on a page
Tags: javascript
Published: 2020-07-07 06:41:57

I recently needed to scroll to various elements on a page via Javascript. I wanted to specifically see if there was a better way to do it than manually finding the offset as below

```js
document.getElementsByClassName('series-list')[0].scrollTop = document.getElementsByClassName('breakpoint')[0].offsetTop;
```

And I found out about `Element.scrollIntoView`, amazingly [all major browsers support it](https://caniuse.com/#feat=scrollintoview), despite it being a working draft.

So you can simply do

```js
document.getElementsByClassName('series-list')[0].scrollIntoView()
```

As with Javascript there are numerous ways to accomplish the same thing but I never knew this existed and thought it was worth the share.

[mdn](https://developer.mozilla.org/en-US/docs/Web/API/Element/scrollIntoView)
Get a new array with specific value removed
Tags: javascript
Published: 2020-07-07 06:07:37

---
title: Get a new array with specific value removed
published: true
description: use array.prototype.slice
tags: javascript
//cover_image: https://direct_url_to_image.jpg
---

```javascript
delete(array, value) {
    const index = array.indexOf(value);
    return [...array.slice(0, index), ...array.slice(index + 1)]
}
```
Vanilla JavaScript Browser Detection
Tags: javascript
Published: 2020-07-07 06:06:02

Now and then, you might want to show specific alerts based on the browser the visitor uses.

For instance, this can be because you just made a new Chrome browser extension and want everyone on Chrome to auto-download it.

## Non Preferred method

The nonpreferred method uses the user-agent, a lot of browsers and systems spoof this, so it's not reliable.

We won't be diving into that in this tutorial.

## JavaScript Browser Detection

So we'll be using feature detection, it validates browser-specific elements.

What is looks like in code:

```js
// Opera 8.0+
var isOpera =
  (!!window.opr && !!opr.addons) ||
  !!window.opera ||
  navigator.userAgent.indexOf(' OPR/') >= 0;

// Firefox 1.0+
var isFirefox = typeof InstallTrigger !== 'undefined';

// Safari 3.0+ "[object HTMLElementConstructor]"
var isSafari =
  /constructor/i.test(window.HTMLElement) ||
  (function(p) {
    return p.toString() === '[object SafariRemoteNotification]';
  })(!window['safari'] || (typeof safari !== 'undefined' && safari.pushNotification));

// Internet Explorer 6-11
var isIE = /*@cc_on!@*/ false || !!document.documentMode;

// Edge 20+
var isEdge = !isIE && !!window.StyleMedia;

// Chrome 1 - 79
var isChrome = !!window.chrome && (!!window.chrome.webstore || !!window.chrome.runtime);

// Edge (based on chromium) detection
var isEdgeChromium = isChrome && navigator.userAgent.indexOf('Edg') != -1;

// Blink engine detection
var isBlink = (isChrome || isOpera) && !!window.CSS;

var output = 'Your browser is 🎩:<br />';
output += 'isFirefox: ' + isFirefox + '<br>';
output += 'isChrome: ' + isChrome + '<br>';
output += 'isSafari: ' + isSafari + '<br>';
output += 'isOpera: ' + isOpera + '<br>';
output += 'isIE: ' + isIE + '<br>';
output += 'isEdge: ' + isEdge + '<br>';
output += 'isEdgeChromium: ' + isEdgeChromium + '<br>';
output += 'isBlink: ' + isBlink + '<br>';
document.body.innerHTML = output;
```

> Credit of this script goes to [Rob W](https://stackoverflow.com/questions/9847580/how-to-detect-safari-chrome-ie-firefox-and-opera-browser)

View this on Codepen.

<p class="codepen" data-height="265" data-theme-id="dark" data-default-tab="js,result" data-user="rebelchris" data-slug-hash="VweXwLV" style="height: 265px; box-sizing: border-box; display: flex; align-items: center; justify-content: center; border: 2px solid; margin: 1em 0; padding: 1em;" data-pen-title="Vanilla JavaScript Browser Detection">
  <span>See the Pen <a href="https://codepen.io/rebelchris/pen/VweXwLV">
  Vanilla JavaScript Browser Detection</a> by Chris Bongers (<a href="https://codepen.io/rebelchris">@rebelchris</a>)
  on <a href="https://codepen.io">CodePen</a>.</span>
</p>
<script async src="https://static.codepen.io/assets/embed/ei.js"></script>

### Thank you for reading, and let's connect!

Thank you for reading my blog. Feel free to subscribe to my email newsletter and connect on [Facebook](https://www.facebook.com/DailyDevTipsBlog) or [Twitter](https://twitter.com/DailyDevTips1)
Writing Functions (Uncle Bob's principles)
Tags: books, codenewbie, php
Published: 2020-07-07 05:58:32

Some principles to write functions from **Clean Code** *book*

1. The first rule of functions is that they should be small.
2. The second rule of functions is that they should be smaller 
   than that (upto 20 lines of code)

3. **FUNCTIONS SHOULD DO ONE THING**

4. **Function Arguments**

   * Better if no argument

   * Functions should have maximum of 2 arguments

   * But arguments should not be exceeded by 3 
      (They take a lot of conceptual power)

   * It should has same level of abstraction 
      (1 level of abstraction)

   * Passing a boolean into a function is a truly terrible 
    practice. (Flag as argument)

   Keep Learning!!
Coding Hands vs Bouldering
Tags: devlife, lifestyle, hobbies, beyondcode
Published: 2020-07-07 05:39:18

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

After years, and I say .. YEARS, I manage to drag myself to a Bouldering session, I can say without shame that I'm really really bad at it, will get better, just keep going, right? 

I forgot completely how hard it was on your hands and forearms, so for all of us that we spend hours and hours typing and coding, I completely recommend it.


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

![Alt Text](https://dev-to-uploads.s3.amazonaws.com/i/8ptwb77qbn9edfzfyqpa.jpg)

And yes of course now I can barely type... or use a fork... but hey, will be awesome tomorrow, when my shoulders and arms hurt more and more.

But again, I completely recommend it!. GO have fun, fall and try again.

What you guys do for relax?
Laravel 7 crud operation with authentication example from scratch
Published: 2020-07-07 04:33:32

This article is for fresher as well as experience person which will going to help them for Interview and for creating new project 

Crud operation is important to be learn for every one because this is the first step for build a full dynamic project and for cracking the interview also.

Visit this link  👉 https://bit.ly/3f4CKfy 👈
I'm going to start a JAVA Series! 🎉
Tags: java, datastructures, algorithms
Published: 2020-07-07 04:08:24

I will be starting a series of articles dedicated to Data Structures and Algorithms in JAVA!! Will be diving deep into every Data Structure and Algorithm and providing pseudo-codes for everything.

I will be linking a few questions so that you can later practice after reading the article! 🥳

I believe this is going to help me learn in the best way and also help someone who wishes to learn Java! 💖

I will be beginning with the basics of the Java language. I'm very excited about this, and hope you are too!
Build a 3 column pricing plan layout with CSS flexbox
Tags: css, design, tutorial
Published: 2020-07-07 04:03:44

Pricing components are a common feature on websites that offer different plans with monthly billing.

In this example we’ll be building a responsive 3 panel layout using CSS flexbox.

Let’s get started with the HTML.

Flexbox layouts need a flex container (pricing) and flex items (pricing-plan) to function correctly.

```html
<div class="pricing">
      <div class="pricing-plan">
        <h2>Basic</h2>
        <p><span>$3.95</span> / month</p>
        <ul>
          <li>1 Website</li>
          <li>1GB Storage</li>
          <li>Unlimited Bandwidth</li>
          <li>24/7 Support</li>
        </ul>
        <a href="#">Sign up</a>
      </div>
      <div class="pricing-plan">
        <h2>Premium</h2>
        <p><span>$16.95</span> / month</p>
        <ul>
          <li>10 Websites</li>
          <li>10GB Storage</li>
          <li>Unlimited Bandwidth</li>
          <li>24/7 Support</li>
        </ul>
        <a href="#">Sign up</a>
      </div>      
      <div class="pricing-plan">
        <h2>Advanced</h2>
        <p><span>$27.50</span> / month</p>
        <ul>
          <li>Unlimited Websites</li>
          <li>Unlimited Storage</li>
          <li>Unlimited Bandwidth</li>
          <li>24/7 Support</li>
        </ul>
        <a href="#">Sign up</a>
      </div>
    </div>
```

Next we’ll add the CSS that’ll give us our 3 column flexible layout.

```css
.pricing {
  display: flex;
  justify-content: space-between;
  max-width: 960px;
  margin: auto;
}
.pricing-plan {
  flex: 1;
  background-color: #1f262c;
  margin: 15px 8px;
  padding: 30px;
  border-radius: 6px;
  color: #fff;
}
```

So the plans aren’t squished on mobile devices we’ll switch to a single column layout with the following:

```css
@media (max-width: 768px) {
  .pricing {
    display: block;
  }
}
```

You could now add or remove a "pricing-plan" and the layout will adjust accordingly.

Lastly we can add some style so the headings, text and links all look nice.

```css
.pricing-plan h2 {
  margin-top: 0;
  padding-bottom: 10px;
  border-bottom: 2px solid #e30046;
  text-transform: uppercase;
  letter-spacing: 0.07em;
}
.pricing-plan p {
  margin-top: 0;
}
.pricing-plan p span {
  font-size: 33px;
}
.pricing-plan ul {
  margin: 0 0 35px;
  padding-left: 16px;
  list-style: none;
  line-height: 1.8;
  color: #b5b5b5;
}
.pricing-plan ul li::before {
  content: "•";
  color: #e30046;
  display: inline-block;
  width: 20px;
  margin-left: -15px;
  position: relative;
  top: 4px;
  font-size: 26px;
  line-height: 0;
}
.pricing-plan a {
  text-decoration: none;
  color: #fff;
  padding: 10px 20px;
  text-align: center;
  background: #e30046;
  border: 2px solid #e30046;
  border-radius: 5px;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  font-size: 15px;
  font-weight: bold;
}
.pricing-plan a:hover {
  background-color: #1f262c;
}
```

If this was your first time using flexbox hopefully you can now start incorporating it in other components.
Day 36 - #100DaysofCode - Rails form_for versus form_tag
Published: 2020-07-07 03:47:15

<h1> <center><i>Below is my understanding of form_for versus the form_tag </i></center></h1>

<center><h3> <b>form_tag</b> </h3></center> 
<ul>
<li>form_tag creates a form. </li>
<li>form_tag can be used to create form without a model object by passing a URL to submit the form. </li>
<li>form_tag is used when we have to create a form without any model object providing URL endpoint to submit the form.</li>
</ul>

Below is an example on how to use a form_tag :

```
<%= form_tag("/todos") do %>
  <%= label_tag('todo[title]', "Title") %>
  <%= text_field_tag('todo[title]') %>
 
  <%= label_tag('todo[content]', "Content") %>
  <%= text_field_tag('todo[content]') %>
 
  <%= submit_tag "Create Todo" %>
<% end %>
```

This will build a form and auto generate the following HTML:

```
<form accept-charset="UTF-8" action="/todos" method="POST">
  <label for="todo_title">Title</label>
  <input id="todo_title" name="todo[title]" type="text">
  <label for="todo_content">Content</label>
  <input id="todo_content" name="todo[content]" type="text">
  <input name="commit" type="submit" value="Create Todo">
</form>
```
<center><h3> <b>form_for </b> </h3></center> 
<ul>
<li>form_for is used when we have to create a form for a model object.</li>

<li>form_for is a bit easier to use for creating forms for a model object because it yields a FormBuilder object that lets you create form elements that correspond to attributes in the model. Meaning that it figures out what url it needs to use and what http method it must go to generate form for a new/existing model object. 
</li></li>

<li>form_for is a ruby method into which a Ruby object is passed. This means that a form that utilizes form_for is directly connected with an Active Record model</li>

</ul>

Below is an example on how to use a form_for helper :

```
<%= form_for(@todo) do |t| %>
  <%= t.label :title %>
  <%= t.text_field :title %>
  <%= t.label :content %>
  <%= t.text_field :content %>
  <%= t.submit %>
<% end %>
```

The form_for above will auto generate the following HTML:

```
<form accept-charset="UTF-8" action="/todos" method="post">
  <label for="todo_title">Title</label>
  <input id="todo_title" name="todo[title]" type="text" />
  <label for="todo_content">Content</label>
  <input id="todo_content" name="todo[content]" type="text" />
  <input name="commit" type="submit" value="Create" />
</form>
```

How I interpret it is, if you know and have a model for an object you should be using the form_for method, otherwise you need to generate your own form by using the form_tag method. 

Resources:

<a href="https://rubyinrails.com/2018/02/19/rails-form-with-alternative-to-form-for-and-form-tag/"> rails-form-with-alternative-to-form-for-and-form-tag </a>
<a href="https://flatironschool.com/"> The Flatiron School Curriculum </a> 


Song of the day:
{% youtube fR0vuRaiwVY %}
Stepped Away for a Long Weekend
Published: 2020-07-07 03:02:56

This past week was a short one for me, I took some PTO to take advantage of the holiday weekend. I also decided to take a break from posting, as I really wanted to be able to step away from the computer and decompress. 

I'll keep the series going next week, as I have some great PR's open at the moment and I'm sure I'll get some blog-worthy feedback!
Whats it like to be a junior front end dev?
Tags: frontend
Published: 2020-07-07 02:48:26

Its no secret that a lot of people nowadays are trying to learn to code on their own. Most of them (myself included) want to start as a front end developer. But since they are doing it on their own, they lack the knowledge of whats it like to be a junior fr. end developer. They dont know. That causes them to continue. 

They started with HTML and SCSS. They continue with Javascript. "Alright, I'm done with Javascript, I hope. Let's check React." They do react. They find PHP. A wild Python appears! They decide to start a couple projects with C#.

Suddenly, the newbie with 0 knowledge of programming (yes, Im talking about myself) made a huge turn. He started studying junior front-end development. Yet he now tries to become a senior full-stack developer without any experience.

The primary reason? He doesnt know. He is not aware of what a junior front end developer is responsible of doing. Is he the one that fixes the links? Will the company make him do back-end? Will he create entire webpages by himself? Is he the one and only thats gonna be in charge of complete ecommerce websites? This terrifies him. He is too scared to apply for any kind of job on the field.

Thats why I made this post. If you are (or were or are in charge of) a junior fr. end developer. What would you expect to do? What would your "tasks" be? I have to admit, I made this post for semi-selfish reasons (I reached the "imposter syndrome" stage), but hopefully, your answers will help any other person thats like me!
Count Number of Set Bits of an Integer using Brian-Kernighan Method
Tags: cpp, python, interview, career
Published: 2020-07-07 02:37:41

Count the number of set bits of an integer.

**Examples:**  
Input: 31
Output: 5
Explanation: Binary representation of 31 is 11111

Input: 42
Output: 3
Explanation: Binary representation of 42 is 101010

## Approach-1: Naive

Naive algorithm is to use the binary representation of the number and count the number of set bits.

C++ code:

```cpp
#include<iostream>
using namespace std;

int countSetBits(int n) {
    int count = 0;
    while (n > 0) {
        count += n & 1; // check if the last bit is set
        n = n >> 1; // right shift by 1 is equivalent to division by 2
    }
    return count;
}


int main() {
    cout << "Number of set bits of " << 31 << " is " << countSetBits(31) << "\n";
    cout << "Number of set bits of " << 42 << " is " << countSetBits(42) << "\n";
    return 0;
}
```

Python code:

```python
def count_set_bits(n):
    count = 0
    while n > 0:
        count += n & 1
        n = n >> 1
    return count

if __name__ == '__main__':
    print('Number of set bits of', 31, 'is', count_set_bits(31))
    print('Number of set bits of', 42, 'is', count_set_bits(42))
```

Time Complexity: `O(logN)` where N is the number
Space Complexity: `O(1)` as we are not using any extra space

## Approach-2: Brian Kernighan Algorithm

`n = n & (n - 1)` clears the rightmost set bit. Let us take a look at some
examples.

```text
n           => 101010
n - 1       => 101001
---------------------
n & (n - 1) => 101000
```

`n` is updated to `101000` now.

```text
n           => 101000
n - 1       => 100111
---------------------
n & (n - 1) => 100000
```

`n` is updated to `100000` now.

```text
n           => 100000
n - 1       => 011111
---------------------
n & (n - 1) => 000000
```

`n` is now 0.

Thus, we need only 3 iterations to find the count of set bits.

C++ code:

```cpp
#include<iostream>
using namespace std;

int countSetBits(int n) {
    int count = 0;
    while (n > 0) {
        n = n & (n - 1); // clear the right-most bit
        ++count;
    }
    return count;
}


int main() {
    cout << "Number of set bits of " << 31 << " is " << countSetBits(31) << "\n";
    cout << "Number of set bits of " << 42 << " is " << countSetBits(42) << "\n";
    return 0;
}
```

Python code:

```python
def count_set_bits(n):
    count = 0
    while n > 0:
        n = n & (n - 1)  # clear the right most bit
        count += 1
    return count

if __name__ == '__main__':
    print('Number of set bits of', 31, 'is', count_set_bits(31))
    print('Number of set bits of', 42, 'is', count_set_bits(42))
```

Time Complexity: `O(logN)` when N has all of its bit set
Space Complexity: `O(1)` as we are not using any extra space