teleren/devto huggingface dataset:
How Get your CPS Score?
Published: 2021-10-11 04:21:14

CPS is ability of person for clicking number of clicks per second. You can count it on <a href="https://cps-counter.com">cps counter</a>.
This is just repeating the pressure buttons in the periodic unit; In the present circumstances a few seconds. This means that you increase the latch repeating, generally expand your score. Although the game is set on the default time for 5 seconds, players can switch to other time assortments in the right sidebar menu. Includes mainly clicks by 10 seconds, click every 15 seconds, click every 30 seconds, click each 60 seconds (1 instant) and the monster clicked every 100 seconds at <a href="https://cpstest.onl/">cps test</a>.
Design Considerations
Tags: javascript, webdev
Published: 2021-10-11 03:59:01

![Alt Text](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/3fpd0c0lsdvibx7xoarz.png)

**Introduction**
Currently with a group of my peers, I am working on making a web component with the use of a button and a card.

**Breakdown & Details**
We discussed and were debating how we are going to separate different elements. The card has a lot of main components some of which are the icon(s), the banner on top, and the description on the bottom of the card or body content provides, and the scaleability that it all entails. The body of the card should also contain lists, links, and buttons to encompass the wanted outcome. These are the multiple elements that go into the makeup of the card that we are looking to produce with the inclusion of our button.

**Experiences & Potential Difficulties**
We as a team decided that we wanted the card to be able to be styled in many different ways. I believe that this will be an easier task since prior knowledge and experience have gone into it from the beginning of the class that I'm taking. While, the more complex task will arise when creating and changing the states.

**Repo Link:**
https://github.com/TheKodingKrab/project-two
How to delete .DS_Store, or some system files  recursively
Tags: unix, shell, find
Published: 2021-10-11 03:50:21

When you zip files in Mac OS or Windows, it sometime include system files that you don't see when you were working.

When you unzip the files, you see them.

You go nuts!

Well, you probably set .gitignore to ignore those system files. It will probably be harmless.

However, you just don't want to leave those junk.

You will use `find` command to delete them

Originally posted on my blog
https://en.katzueno.com/2021/10/11/how-to-delete-ds_store-php-files-recursively/

## Delete `.DS_Store` or `._*` files

```
cd [Path/To/UnarivedFolder]
find . -name ".DS_Store" -delete; find . -name "._*" -delete
```

`find` command is very useful to delete some junk files systematically.

## Delete .bak files

```
cd [Path/To/UnarivedFolder]
find . -name "*.bak" -delete
```

## TIPS: Configure your Mac not to save .DS_Store files

```
# Start terminal
# Set default not to store .DS_Store file
defaults write com.apple.desktopservices DSDontWriteNetworkStores true
# Force restart Finder
killall Finder
```
Project 2 10/10/21
Published: 2021-10-11 03:43:27

#Project 2:
![Alt Text](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/3fxaqkzdd6nmoixqztbq.jpg)
Over the next few weeks I will be working alongside my teammates to create a card for our web components course. Above is an image of cards that look similar to what we are going to be creating. These cards are made up of 4 elements:

- Scaffolding (the card itself)
- Header/banner
- Body
- Icon

#Obstacles:
The biggest obstacle my group my run into is working on the interactive functions of the card. We had came up with many potential ideas of what our cards will be able to do. One of the ideas was to make the card it flip when its either clicked or hovered over. This is a concept that none of us have work with yet so we will all have to research and work together to find sources to be able to create these functions.

#After working with the button:
The last project that we worked on was creating a button. Doing this project, it allowed me to learn more about CSS and HTML. I came into this course with very little experience working with these and I was so shocked and glad with the progress I learned from the last project about how they work. I am eager to work on this project with my teammates and work on my web component skills!

 
github link: https://github.com/table-in-the-corner/project-two
Web Component Considerations
Published: 2021-10-11 03:43:14

Web components have many variables and properties that disseminate a good web component from a bad one. Good and bad can also be thought of as arbitrary in the design sense, as these are subjective ideas and not objective.  For this case, we will look at what the general development community deems good and bad.  

##The Comp
For the class, we are making card components.  ![Screen Shot 2021-10-10 at 10.22.11 PM](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/12fkt5e8qohj1cglgpjv.png)

The card will consist of a few elements:
-A header
-An icon
-A body
-A banner

How we utilize these elements is important, and the customization of each will be interesting.  

I expect that the first part of building the foundation of the card may be difficult, but once the foundation is established,  customizing the different properties to a use we desire should be achievable.  Similar to the button, multiple states will be implemented and the animations/transitions will be exciting for me.  I believe that since the buttons had features like animations/transitions, the card should not have difficulties with such features.  Also, using HTML, CSS, and Javascript with the last project should provide some relevant familiarity with this project.
Considerations when Designing a Web Component
Published: 2021-10-11 03:36:19

Before we make a web component we have to understand what we're making and plan out what we want to include in the functionality of the component.

###The Comp
Let's look to create a web component that displays a card. Our proposed design is to be able to make at least these three example cards with the same component.
![Alt Text](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/iluq8f2zam9oz3pl2vg6.png)


###The Breakdown
Looking at the image we can see each card has two sections, the header, and body content.

We should look at what elements are needed for each section:
#####Header
* SVG Icon
* Header Text
* Sub-header Text

#####Body
* Body Text

###The Approach and Possible Challenges
####Approach
Based on our component breakdown we can see we'll need to make two sections that can be styled independently.

The header section will include our icon and two headers placed side-by-side. We can make the icon, header, and sub-header editable properties so that a user can change the content during implementation. We also need to make the background color of this section editable to set the banner color in our header.

The body section has text that needs to be easily editable. Rather than making a property, like with the headings, we could utilize a slot in our body to not only make the implementation process easier but also make the content more accessible.

####Challenges
The biggest challenge I see is using different states to change the entire card's content. We can implement property states that will change all the text areas, icons, and colors based on a preset keyword. For example, looking at the design picture above, the third card could be a state named "question" which would dynamically change the background color of the header to blue and the icon to the question bubble. We can have several of these preset states that make it simpler for the person implementing our component.

###Previous Experience
Luckily, my team and I have had some experience making a web component in the past. Recently, we've made a [button](https://github.com/IST-402-Group-1/KMBtn) that plays short audio clips. In this button, we've touched on some aspects of dynamic states, such as a dark mode or when the button is disabled. We should be able to use the skills we learned previously and expand upon them to make this card component as reusable and reliable as possible.
How to Install VueJs in Laravel
Tags: laravel, vue, npm, node
Published: 2021-10-11 03:29:30

In this tutorial we will learn how to install vue js in laravel, Vue.js is an open source javaScript framework for building UI(user interfaces) and single-page applications for website. Here, we will install vuejs in laravel 8 with laravel 8 vue npm install

So let's start and see how to install vue in laravel 8.

```
Step 1 : Install Laravel
Step 2 : Install Laravel/ui
Step 3 : Install Vue
Step 4 : Install Node
Step 5 : Install NPM
Step 6 : Run NPM
```

---

> **_[Read More : How to Install VueJs in Laravel](https://techsolutionstuff.com/post/how-to-install-vuejs-in-laravel)_**
Javascript to the Stars
Tags: javascript, ruby, programming
Published: 2021-10-11 03:16:37

Another phase completed for Flatiron, this time around I created and in browser single page application using Javascript, CSS, and HTMl for the frontend and a Rails JSON API for the backend.

The frontend consists of both html and js index files, along with an ApiService, Info JS and Comment JS as well as the stylistic portion of CSS to give it that pop. 
The backend contains the standard MVC of Ruby on Rails utilizing an active model serializer, migrations, a seed file and resources.

![Alt Text](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/9syyf2vsbur97s291prf.png)

As for the function of the application, upon loading in, the application user can be wowed by how beautiful Earth is with a photo taken by the International Space Station in orbit.

Upon to start the application, a button to info on Planets is available, here the parameters are set to {planet: name, galaxy, moons, mass, gravity, discovery date}. Who would've guessed that Jupiter's mass is 318 times that of Earth?

From here user can comment on that Planet's info and give their thoughts about it.
Ever wondered why we usually write 'export deafult [component name]' to export a React Component?
Published: 2021-10-11 02:57:41

It's been quite some time that I've been wondersing the exact reason behind using export deafult [component name] to export a react component,but recently I know why?

When we export a component with default ,it in return helps us to import that component with any name in the .js file we want to use it.Still confused? Check out this example


For a Greet component write down the following code:
```
import React from 'react'

function Greet() {
    return (
        <div>
            <h1>Hello,Greetings!</h1>
        </div>
    )
}

export default Greet
```

In the App.js file

```
import './App.css';
import Greet from './Greet';

function App() {
  return (
    <div className="App">
      <Greet />
    </div>
  );
}

export default App;
```

These two snippets generate the following output:
![image](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/ti6brl519e5ty6f30hj8.png)

now if we change the import name in app.js and the snippet now looks similar to this:
```
import './App.css';
import Greetings from './Greet';

function App() {
  return (
    <div className="App">
      <Greetings />
    </div>
  );
}

export default App;

```

The result is the same:
![image](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/1kdi2rjp2jdfe4r38xe9.png)

## Named Exports

Here the Greet.js would look similar to this:
```
import React from 'react'

export const Greet = () => <h1>Hello,Greetings</h1>
```

And the App.js similar to this:
```
import './App.css';
import {Greet} from './Greet';

function App() {
  return (
    <div className="App">
      <Greet />
    </div>
  );
}

export default App;
```

In case of named components,we cannot change the name of the importing component on doing so it will generate an error,take a look at the App.js where we have changed the name in case of named components:
```
import './App.css';
import {Greetings} from './Greet';

function App() {
  return (
    <div className="App">
      <Greetings />
    </div>
  );
}

export default App;
```

also take a look at the error generated:
![image](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/mitf5g69mpy327kf6opd.png)
 
Probably now you know export takes a default and what could happen if you use named components.
Drafting My First Pull Request
Tags: opensource, cpp
Published: 2021-10-11 02:56:39

This week, I focused on adding a new feature to my friends site generator, [LENNAH SSG] (https://github.com/joshuali7536/LennahSSG/pull/16). Using a fork of his project with an [issue branch](https://github.com/drew5494/LennahSSG/tree/issue-15), I was able to add support for config files using <code>--config</code>.  I also created a [draft pull request](https://github.com/joshuali7536/LennahSSG/pull/16) in order to better communicate our ideas to each other. 

I ran into issues adding support for folders in the config file, as it has to recognize both files or folder.  I solved this by first checking for a <code>.txt</code> extension in the JSON file and then using the recursive file checking method, implemented before to read files within a folder. 
   
It was very difficult working on someone else's code, however after some time playing with it, it feels just like my own! My friend, @JLi was very satisfied with my work and I hope to collaborate with him again in the future. 

I learned a great deal from this experience. I am now more familiar with how I can collaborate with others on Github and contribute to the community using the draft pull request feature.  I also learned more about merging and pushing to a remote repo.
Recursion: Two ways to convert from a JavaScript for-loop
Published: 2021-10-11 02:56:19

One of the cases you can use for a JavaScript example of a for-loop is an iteration through an array.  For example, we will use an array of strings:
```
let arr = ['how','to','iterate','an','array']
```
To iterate through the array, we can use a for-loop:
```
const arrayLoop = arr => {
  for (let i=0; i<arr.length; i++){
      console.log(arr[i])
  }
}
```
This will loop through the array and perform whatever operation is in the block, in this case send the array element at the index of i to the console.  The "i" index is what is actually controlling the loop.  The loop is incrementing i, starting at 0 and adding 1 each cycle until i reaches the length of the array.  Since the index is 0 based, the index of the first element of the array is 0 and the index of the last element is a number that is one less than the total number of elements (length) in the array.  For example, if there are 4 elements in the array, the last element would have an index of 3 (one less than 4).  The loop continues as long as the increment (index) is less than the length of the array (4).

One way to convert that for-loop to a recursion is to move the index into the argument for the function and then recursively call the function incrementing "i" in the call:
```
const arrayLoop = (arr, i=0) => {
  if (i>arr.length-1){return}
  console.log(arr[i])
  return (arrayLoop(arr, i+1))
}

```
Setting "i" to 0 as a default value allows you to call the function with just the "arr" argument.  Just like in the for-loop, the index starts at 0 and increments in each recursive call until the loop breaks when "i" is greater than the length of the array.

Another option would be to have actually change or "mutate" the array passed into the argument.  It the following example, we'll change each element to an upper case replacement of the element contents and create a new array while we change the contents of the source array.  The source array passed in as an argument will no longer exist once the loop is completed.
```
let result=[]
const capitalizeWords = arr => {
  if (arr.length<1){return result}
  result.push(arr[0].toUpperCase())
  arr.shift()
  return (capitalizeWords(arr))
}
```
Each cycle through the loop takes the first element of the array, changes the element contents to upper case letters, adds it to the "result" array and then removes it from the source array (shift).  This moves the next element into the "0" index position and shortens the array by element that was just removed.  Then the function is recursively called until the length of the array is 0 - when all of the array elements have been "shifted" out of the array.

Recursion can be a little overwhelming.  Little exercises like this help you learn a little better understanding of recursion and different ways to achieve it.  If you need to find a recursive solution to a problem, you might be able to start from a for-loop and then convert it from there.  Hope this was helpful.
Context Managers with `with` statement in python
Tags: python, contextmanager, tutorial
Published: 2021-10-11 02:46:01

## What is a Context Manager?

 It's an object, that is notified when a context or a block of code starts and ends, of a class that implements the 2 magic methods `__enter__` and `__exit__` and any other methods if needed. 

  
  __For example__: when a context manager ends, the object file is closed. 
  
```python
with open('test_ch30.txt' , 'w+') as file:
	file.write('Blew the lid of ur life')
  
 # the open file has automatically been closed 
```

  Context manager is commonly used on reading and writing files to assist in conserving system memory and improve resource management by ensuring that each process holds its resources while executing.

  > Opening a file using `with` statement ensures that [File descriptor](https://www.computerhope.com/jargon/f/file-descriptor.htm) are closed automatically.



## How  `with` statment implements a context manager?

  1-  When an object is called with a `with` statement, the 
   interpreter invokes the `__enter__` method ,which is used to 
   call and perform the setup code required and needed for the 
   process to be executed, before the `with` statement.

  2- 	When the `with` statements ends, the interpreter invokes the `__exit__` method .



*Illustration* :


![alt text][logo]

[logo]: https://i.pinimg.com/originals/4d/58/99/4d589946718af5d2bc4c7f19a6221960.jpg "context_excution_circle"



## What's required to implement a contect manager class?

```python
class ContextManager(object):
	"""docstring for ContextManager"""
	def __init__(self):
		pass
		
	def __enter__(self):
		print("__enter__()")
		# optional return an obj
		return "an instance"

	def __exit__(self , exc_type , exc_val , traceback):
		print("__exit__ with " , exc_val if exc_val else ' nope')


with ContextManager() as e:
	print("is a " , e)

```

##  Multiple context managers
```python

with open('test_ch30.txt') as input_file, open('test_ch77.txt', 'w') as output_file:
	# do something with both files.
	# e.g. copy the contents of input_file into output_file
	for line in input_file:
		output_file.write(line + '\n')

# It has the same effect as nesting context managers:
with open('test_ch30.txt') as input_file:
	with open('test_ch77.txt', 'w') as output_file:
		for line in input_file:
			output_file.write(line + '\n')

```


## Manage Resources

```python 
class File():
	def __init__(self, filename, mode):
		self.filename = filename
		self.mode = mode
	def __enter__(self):
		self.open_file = open(self.filename, self.mode)
		return self.open_file
	def __exit__(self, *args):
		self.open_file.close()


for _ in range(10000):
	with File('test_ch30.txt', 'w') as f:
		f.write('foo')

```

## ManageFile class follow. 

ManageFile class follow/adhere the context manager protocol and support the with statement [Code link](https://github.com/Rowida46/Python-for-profesional/blob/main/Playing_with_Folders/Context_Manager.py#L16)
Web Components and Element API's
Tags: webdev, programming, webcomponents
Published: 2021-10-11 02:09:57

In my IST 402 class my group was tasked with creating a card/portfolio to spec. We received a comp on what our portfolio should look like from out client and we must create it the best to our groups ability. 

#The Break Down 
As a group we will break this down into four different elements. 
1. Header
2. Icon 
3. Banner
4. Body 
We want to make sure this user friendly and reusable as possible. To make sure we do, we have assigned one element per group remember to work on one of each. Although these elements seem rather simple, it is really vital to carrying out the security, design and overall appeal to the final product. 

#Difficulties Along the Way
You can never expect to have a perfect project. We expect to run into minor problems while working on our project. For one thing we have run into problems in the past with some team members being able to push to Github. It can sometimes be an easy fix but with some accesses ability rights it can be difficult to grant other teammates access. We will also have to look a little more close into the security of it because of the simplicity within our portfolio. We have to make sure we are not misusing any of the components within code to make it most secure. 

#Manageability
Since our group has already created the CTA button I would say that we have our best foot forward. When we started the CTA button I feel like everyone was a lot more confused on what the next step was but that project really gave us an outline on how much work goes into making a portfolio. It especially gave me a good grasp on how much time it will take to make this look appealing to the client. Overall, I personally feel that the styling will be simple and learned what takes up more time. With that knowledge from previous projects, I would say this gives me a really good outline on how the project is going to feel and how much time I need to allot myself to finish my part of the work.
Web Component Building
Published: 2021-10-11 01:49:34

To further explore web components, I have been introduced into making a card on a webpage. Previously, a group of students and I have built a functional and reusable button web component, now implementing into the card, to allow the user to be more interactive on the page.
#Card Building Example
![card example](https://res.cloudinary.com/practicaldev/image/fetch/s--jKX1Y3DT--/c_limit%2Cf_auto%2Cfl_progressive%2Cq_auto%2Cw_880/https://dev-to-uploads.s3.amazonaws.com/uploads/articles/b2t5hwpgy24gm6bp19f2.png)

#Potential Difficulties
At a first glance, I think now that each member of the group is going to be focusing on one card, the most difficult part will be communication before and after making changes and pull requests to the component, as well as particular functionality with a clickable icon into a drop-down list of content. We want to make this card as user-friendly as possible, giving it an adequate amount of usability and accessibility to all users on all platforms. Going along with that, making our component usable on mobile and other spaces other than a PC webpage may present a new set of difficulties in the near future.

#What Is Manageable?
Since making our button web component, I think shifting those elements into our card will be fairly simple and not too difficult to reflect into our card. I think the card may adopt many features that the button has, so just manipulating it to do a little more functionality will be the challenge, but not as hard with more brainpower and ideas. We have been given a good example template to work off of and we will make the most of what we are given.

Github: (https://github.com/TheKodingKrab/project-two)