teleren/devto huggingface dataset:
JavaScript Module Pattern 
Tags: javascript, webdev, programming
Published: 2021-02-08 16:20:49

> Sidenote: ES6 introduced a new feature in JS called 'modules', they're essentially a syntax for importing and exporting code between JavaScript files. They're powerful and bring a new horizon for JS development but it's not the subject today.

Today we will talk about **IIFEs** or **Immediately Invoked Functions Expressions**, working with vanilla JS we can use these functions for better-scoped and responsibilities definition on our code.

### What is IIFE?
It's a JavaScript pattern, that allows us to create modules with more lexical scope for our functions, create functions for executing simple tasks and immediately execute and help with code organization too.

### Creating a module
We will init using an anonymous closure. Thus we create a lexical scope, and the code that it's inside of the scope will be only accessed by the function, including properties too.

```
(function() {
  // Your functions and variables will be scoped in this function
  // In this case our console.log will be executed immediately 
  console.log("My first module");
})();
```

### Exporting module
With that we can use only a returned properties and functions by our module, thus that way keeping our code scoped on the module.
```
const moduleA = (function() {
  const moduleAValue = "Module A";

  function modifyModuleAValue() {
    return `${this.moduleAValue}-123`; 
  }

  return {
    getter: () => {
       return moduleAValue;
    },
    modifyModuleAValue,
  }
})
```

### Using IIFE for making simple scripts
With this pattern, we can create simple scripts for immediate execution, a great example is the use of login scripts for adding more agility to the development process:
```
(() => {
   const user = "myuser@email.com";  
   const pass = "secretpass123";
  
   document.getElementById("user-input").value = user;  
   document.getElementById("user-pass").value = pass;
   document.getElementById("submit").click();
})();
```
With this simple script, we can create an automated login.

### IIFE on ES6+
When ES6 was released, it brought some new additions, one of which is `const` and `let`, this type of variable declaration has the scope of blocks, so when we get a `curly braces` block, our `let` or `const` has the respective `curly braces` scope. So we do not need this pattern all the time but the knowledge always helps in certain situations.

Thanks for reading I hope that was useful.

#### Helpful links
[Learning JavaScript Design Patterns](https://addyosmani.com/resources/essentialjsdesignpatterns/book/#introduction)
[MDN Web Docs - IIFE](https://developer.mozilla.org/en-US/docs/Glossary/IIFE)
Reverse a ‮string‬: revisited
Tags: javascript, challenge
Published: 2021-02-08 16:08:13

```js
[...'‮!dlrow ,olleH'].slice(1).reverse().join('')
```

The above is executable JavaScript code, with no syntax errors. Try pasting it into your browser console.

Once you've figured it out, leave your explanation in the comments inside a spoiler tag:

```liquid
{% details Spoiler %}
Your answer here
{% enddetails %}
```

Happy hunting!
Use Firebase Cloud Messaging In Laravel
Tags: laravel, php, firebase
Published: 2021-02-08 15:39:57

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

In many modern web applications, you need to implement real-time, live-updating user interfaces.

When we update data on the server, a message is typically sent over a connection to be handled by the client. So, you need a real-time channel or WebSocket connection to handle this.

Some Laravel Developers use Pusher to handle this problem. Instead, we are going to use Firebase Cloud Messaging.

### What is Firebase Cloud Messaging ?
Firebase Cloud Messaging (FCM) is a cross-platform messaging solution that lets you reliably send messages at no cost.

Using FCM, you can notify a client app that a new email or other data is available to sync. You can send notification messages to drive user re-engagement and retention. For use cases such as instant messaging, a message can transfer a payload up to 4KB to a client app.

### How does it work ?
An FCM implementation includes two main components for sending and receiving:

A trusted environment such as Cloud Functions for Firebase or an app server on which to build, target, and send messages.
An iOS, Android, or web (JavaScript) client app that receives messages via the corresponding platform-specific transport service.

### How to use Firebase Cloud Messaging in Laravel ?

To send notifications or custom messages in Laravel via Firebase, at [Kutia](https://kutia.net), we made a simple package to do this work easy and fast.

For installation and configuration please refer to the GitHub Link:

https://github.com/kutia-software-company/larafirebase
Sinatra MVC CRUD Bet Tracker
Tags: ruby, sinatra, mvc, crud
Published: 2021-02-08 15:37:51

My first DSL project is complete! This project follows an MVC architecture that is able to create, read, update and delete objects. My web apps scope focuses on the creation of bets and displays them for all users to see. Users are only allowed to create, edit and delete their bets but have the viewing pleasure to see other users placed bets. After table creation/migration it was time to test and seed some data. One of my favorite gems is called Faker. It helped me create fake data and 'seed' it into my project. This gem has so much to offer. You can use it to test relationships to see that they work as expected. Users have many Bets and Bets belong to a User. This relationship fostered by active records macro mechanics, made it possible for me to create users and their associated bets using the seed file (db/seeds.rb). For example:
``` 
10.times do 
    User.create!(username: Faker::Name.name, password_digest: BCrypt::Password.create('1234'))
end 

10.times do 
    Bet.create!(amount: rand(100), team: Faker::Sports::Football.team, date: "Today", user: User.offset(rand(10)).first)
end
```
How exactly do you seed data? You can seed data using a built in rake task 'rake db:seed'. So how do you test these relationships? I used a custom rake task in my rakefile that uses the pry gem. 
```
task :console do 
   Pry.start
end 
```
I then proceeded to make sure that my relationships were working as expected: 
```
u = User.first
``` 
This returned my first User! Perfect! Now to test and see if he has any seeded bets:

![Alt Text](https://dev-to-uploads.s3.amazonaws.com/i/o4imrp9wbm533hy9ijpm.JPG)
Awesome! It worked. I was now able to continue coding and create my controllers and views. To use faker in your project all you need to do is add gem 'faker' to your gemfile. I suggest reading fakers documentation (link: https://github.com/faker-ruby/faker). If you use bundler make sure to bundle install. You can even use IRB to play around with the faker gem. Cheers!
3 Tools to Build and Deploy a Web App for FREE
Tags: codenewbie
Published: 2021-02-08 15:33:47

<span>Photo by <a href="https://unsplash.com/@hnhmarketing?utm_source=unsplash&amp;utm_medium=referral&amp;utm_content=creditCopyText">Hunter Haley</a> on <a href="https://unsplash.com/s/photos/tools?utm_source=unsplash&amp;utm_medium=referral&amp;utm_content=creditCopyText">Unsplash</a></span>

## TLDR

If you are new to programing you don't need to download anything just need a chrome browser...

1. Make an account on Github. Free code storage.
2. Log into Codesandbox with the same GitHub account. Free online code editor.
3. Use the new GitHub account to log in to Netlify. Free web app hosting.
4. Take our [FREE course](https://app.codesagas.com/code-sagas-intro-course) to use these tools and build Dice Roller 9000.

Links: [Github](https://github.com), [Codesandbox](https://codesandbox.io), [Netlify](https://netlify.com)

## Details

Github is facebook for developers, but instead of sharing stories and pics, we store our code there. Codessandbox is an online code editor. Netlify can pull our code from Github and publish it on the internet so anyone can see it. It takes less than seven minutes to set this all up and deploy a simple web page. 

Check out our [FREE course](https://app.codesagas.com/code-sagas-intro-course) if you want to try these tools and build a tabletop RPG dice roller app! The app is not the most fantastic thing ever, but it is pretty cool for your first app.

Come check out our [Twitch stream](https://twitch.tv/codesagas) most weekdays 11 am MST.
Select HTML elements using JavaScript
Tags: javascript, beginners
Published: 2021-02-08 15:28:51

If you want to make changes to the website or an app after it is loaded you need to do so by changing the elements inside the DOM. 

We will go through JavaScript methods which you can use to select elements in the DOM.

`document.getElementsByName()`
`document.getElementsByTagName()`
`document.getElementsByClassName()`
`document.querySelectorAll()`
`document.querySelector()`
`document.getElementById()`

`document.getElementsByName()` is not used that often but it is available. Basically what it does is that it selects all the element in DOM which is assigned a name property and you specify that name property inside those parenthesis.
ref: [w3schools](https://www.w3schools.com/JSREF/met_doc_getelementsbyname.asp)

`document.getElementsByTagName()` is used to select elements by tag name, for example you can get a list of all the div’s on your HTML page using this selector.
ref: [w3schools](https://www.w3schools.com/JSREF/met_document_getelementsbytagname.asp)

`document.getElementsByClassName()` is same as `.getElementsByTagName()` but this time we target elements using class. You specify the  class name in parenthesis and it will get all those elements which have that class property assigned to them.
ref: [w3schools](https://www.w3schools.com/JSREF/met_document_getelementsbyclassname.asp)

`document.querySelectorAll()` and `document.querySelector()` allows you to target a specific ID, Class, or a Tag Name. The difference in .querySelectorAll() and .querySelector() is that .querySelectorAll() target all the elements in HTML which matches the ID, Class, or a Tag Name that you have specified in parenthesis. While .querySelector() only targets the first element that matches the ID, Class, or a Tag Name.
ref: [w3schools](https://www.w3schools.com/JSREF/met_document_queryselectorall.asp)
ref: [w3schools](https://www.w3schools.com/JSREF/met_document_queryselector.asp)

`document.getElementById()` perhaps on of the most used command from all the selectors targets a specific ID which you have mentioned in the parenthesis.
ref: [w3schools](https://www.w3schools.com/JSREF/met_document_getelementbyid.asp)

Conclusion
We went through total of six(6) JavaScript methods in which we have four(4) methods that returns one or more elements and two(2) methods that return single element.

If you enjoyed this post please share, and follow me on [DEV.to](https://dev.to/alitahashakir) or [Twitter](https://twitter.com/AliTahaShakir) if you would like to know as soon as I publish a post! 🔥
How to Create and Execute Shell Scripts Automatically with WayScript
Tags: tutorial, shell, serverless, startup
Published: 2021-02-08 15:25:23

Introduction
------------

Today’s tutorial is an excellent example for those new to script building in WayScript, as we’ll be creating a Shell script from scratch. This process only takes a minute to do and it’s a great way to become familiar with some of the tools WayScript offers. Additionally, if you’d like to use this script as a base to build off of you can simply clone the script using the link at the end of this tutorial. Keep reading to learn more!

Building our Script
-------------------

First, we’ll need to create a new script. This can be done by clicking the “+ New Script” button in the top right corner.  
  

![Tutorial step #1](https://wayscript.com/blog_img/167/1.png)

  
  
This brings up the script tree editor. Here we can add different modules, write our own code, and more. One great aspect of WayScript is its ease of use; to add modules or triggers, simply click on the “add” buttons on the tree.  
  
In this tutorial, we’ll automate a simple Shell script. To do this, add a Time Trigger module at the top of the tree.  
  

![Tutorial step #2](https://wayscript.com/blog_img/167/2.png)

  
  
Within this module we can customize when the program runs. A toolbar generates on the left side, and in here there are multiple options to choose from: when to run the script, what time, and the specific time zone. This creates an easy way to automate any script.  
  
Next, we’ll add the Shell Script module to write our code into. Once this module is added, we can write the script in a couple different ways. One way is to click on the editor button, which brings up a full screen editor. The other option is to simply type the code in the text box inside the toolbar.  
  

![Tutorial step #3](https://wayscript.com/blog_img/167/3.png)

  
  
In this tutorial, we’ll just write a text file using the Shell script: echo "some data for the file" >> sample.txt Run the script by clicking the play button on the Time Trigger module. This generates a new file of sample.txt that can be found in the file browser.  
  

![Tutorial step #1](https://wayscript.com/blog_img/167/4.png)

  
  
Finally, to automate the entire script, simply activate the switch on the Time Trigger module.  
  
In 60 seconds, we’ve effectively created a script that runs automatically using WayScript’s intuitive drag-and-drop interface. Hopefully, this example was a great introduction into the world of WayScript. Keep watch for even more tutorials on how to create a wide variety of scripts and get your own superpowers in the process!

Conclusion
----------

Questions about this script or anything else? Join our [discord](https://discord.gg/VWbXSbj). We're always around to help. If you want to work the full script template, just find it [here](https://wayscript.com/user/derricks/HKo43bSE).
Starting with CSS
Tags: html, css, 100daysofcode, javascript
Published: 2021-02-08 15:22:32

After successfully graduating from HTML, we move on to the beautiful and colorful world of Cascading Style Sheets(CSS). As described in the earlier articles, HTML is the noun and the CSS is the adjective of our webpage. After adding our HTML markup which is the content of our webpage, we style it with the help of CSS. Styling can be of different sorts such as changing the font size, the font color, the background color to name a few. Further we learn about the basic CSS properties that are commonly used to style our markup.
Day 46 Of 100DaysOfCode: More About Selection Sort
Tags: womenintech, codenewbie, 100daysofcode, womenwhocode
Published: 2021-02-08 15:00:31

Today is my 46th day of 100daysofcode and python. Like yesterday today also continued to learned more about algorithm. Time and space complexity of selection sort.

To do selection sort we repeatedly finding the minimum element from unsorted array and putting it to the beginning.
#Selection Sort
Selection sort is simple sorting algorithm. It is an in place comparison sorting algorithm.
```python
A = [53,45,23,10,4]
for i in range(len(A)):
    min_idx = i
    #print(i)
    for j in range(i + 1,len(A)):
        A[min_idx] > A[j]
        min_idx = j
        A[i],A[min_idx] = A[min_idx],A[i]
    print(f'Current array : {A}.')
print('sorted array:')
for i in range(len(A)):
    print('%d'%A[i])
```
###Step1
Take original array. Here minimum element in the array is 4. Now put 4 in the beginning. New array is,
` 4  45 23 10 53 `

###Step2
Now we left element at the index first so take the remaining array choose minimum one. Here minimum element is 10 now put it to the origin. New array is,
`4 10 23 45 53 `
Now obtained array is completely sorted.
 Output of the above program is,

```
Current array : [4, 53, 45, 23, 10].
Current array : [4, 10, 53, 45, 23].
Current array : [4, 10, 23, 53, 45].
Current array : [4, 10, 23, 45, 53].
Current array : [4, 10, 23, 45, 53].
sorted array:
4
10
23
45
53
```
<blockquote class="twitter-tweet"><p lang="en" dir="ltr">Day 46 Of <a href="https://twitter.com/hashtag/100DaysOfCode?src=hash&amp;ref_src=twsrc%5Etfw">#100DaysOfCode</a> and <a href="https://twitter.com/hashtag/python?src=hash&amp;ref_src=twsrc%5Etfw">#python</a><br>* More About Algorithm<br>* Selection Sort<br>* Best Case Time Complexity(Big-omega)O(n*2)<br>* Worst Case Time Complexity(Big-O)O(n*2)<br>* Space Complexity O(1)<a href="https://twitter.com/hashtag/WomenWhoCode?src=hash&amp;ref_src=twsrc%5Etfw">#WomenWhoCode</a> <a href="https://twitter.com/hashtag/100DaysOfCode?src=hash&amp;ref_src=twsrc%5Etfw">#100DaysOfCode</a> <a href="https://twitter.com/hashtag/beginner?src=hash&amp;ref_src=twsrc%5Etfw">#beginner</a> <a href="https://twitter.com/hashtag/pythonlearning?src=hash&amp;ref_src=twsrc%5Etfw">#pythonlearning</a> <a href="https://twitter.com/hashtag/womenintech?src=hash&amp;ref_src=twsrc%5Etfw">#womenintech</a> <a href="https://twitter.com/hashtag/Python?src=hash&amp;ref_src=twsrc%5Etfw">#Python</a> <a href="https://t.co/CQiW5WWh3P">pic.twitter.com/CQiW5WWh3P</a></p>&mdash; Durga Pokharel (@mathdurga) <a href="https://twitter.com/mathdurga/status/1358788632589471745?ref_src=twsrc%5Etfw">February 8, 2021</a></blockquote> <script async src="https://platform.twitter.com/widgets.js" charset="utf-8"></script>
Learning the important HTML5
Tags: html, css, 100daysofcode, javascript
Published: 2021-02-08 15:20:38

So, after an introduction to HTML5, I learned about the basic elements of HTML5 like <b, <br, <hr, <p, <div, <a,<ul, <ol, <li,<h1,<h2,<sup,<sub and many more. After that, I moved to semantic HTML, which actually means meaningful markup of our content with the help of that html. Furthermore, I learned about creating tables of our content and creating forms to submit data with HTML forms such as text inputs, password inputs, checkboxes, radio buttons etc. After learning all of the form types, I completed an exercise where I made a Marathon Registration form and I was quite surprised that I got it all right on the first attempt. After learning all this important HTML, we move on to the beautiful world of CSS.
Starting with HTML
Tags: javascript, css, html, 100daysofcode
Published: 2021-02-08 15:16:03

Hypertext Markup Language or HTML as I said earlier is the noun of our programming language like the nouns in other human languages. Suppose, we have an essay that we want to publish on a webpage but we can't just dump it as plain text.

As the name suggests, HTML is the "markup" of our web content just like marking an essay on paper as what part needs to be paragraphed, bolded, be in a heading, italicized etc. In HTML, we do just the same to our web content which is then shown in a web browser according to our instructions as markup. We'll use different tags that each perform different task such as making a heading or listing some stuff.
Quick reference cards: react hooks
Tags: react, beginners, programming, javascript
Published: 2021-02-08 15:12:19

Casual learning is a method of learning the topics that are split into simple self-contained content ( preferably within 500 characters ). Programming is a wonderful area for casual learning as you can understand the concepts as simple explanations. It's a simple approach for beginners to get started as well as experienced programmers to refer to as reference cards.

Please find the content for the react hooks explained as ideations.

![Alt Text](https://dev-to-uploads.s3.amazonaws.com/i/36wogtzlq3ximlxl8paf.jpeg)
![Alt Text](https://dev-to-uploads.s3.amazonaws.com/i/3372hzj6vwvghrepib63.jpeg)
![Alt Text](https://dev-to-uploads.s3.amazonaws.com/i/w43l1qq4ownujhw82i52.jpeg)
![Alt Text](https://dev-to-uploads.s3.amazonaws.com/i/vztuuyfcln9yq8h6dlf4.jpeg)
![Alt Text](https://dev-to-uploads.s3.amazonaws.com/i/5zt0yas7n2qh8sf12jl0.jpeg)
![Alt Text](https://dev-to-uploads.s3.amazonaws.com/i/7g1tica4ogh0ic4c4zjt.jpeg)

For this and more content on react and other programming topics, you can download and use the microideation app for free ( no mandatory registration). You have the ability to view related ideations or to freeze an interesting topic/subject and follow.

https://play.google.com/store/apps/details?id=com.microideation.app

More details
https://www.microideation.com
The Basics of Web Development
Tags: css, html, javascript, 100daysofcode
Published: 2021-02-08 15:12:03

So, after an introduction to the course and also the Internet, which I think I had a pretty good idea about how it worked but got to learn some new things anyway. After learning about the Front-End and Back-End of the development, I decided that I wanted to work on the Front-End web development and HTML, CSS and JavaScript is actually the basic codes on which this development works. The difference between these three pillars of the web development was explained comprehensibly by the instructor that the HTML is the noun, CSS is the adjective and JS is the verb of the programming language.

In other words, HTML being the content of the webpage which our browser shows, CSS being the aesthetic of the webpage and JS is the verb meaning the function that webpage executes. We'll be learning all of these section one by one starting with HTML.
Starting a new Journey
Tags: css, html, 100daysofcode, javascript
Published: 2021-02-08 15:01:22

Hi, I am Saqib. I am starting out as a web developer from beginner level with very little knowledge of computer programming whatsoever. Even though, I am a Mechanical Engineer by profession but computer programming has always been something that I have been interested in. So, immediately after graduating, I decided to take up The Web Development Bootcamp by Colt Steele on Udemy. To remind you again that I am starting from beginner level stages, this is an open invite to anyone who would like to collaborate and be a part of this amazing journey. Hopefully, we will make into an amazing community along the way. Alright, so, I guess Bon voyage to me.
What is next.....??
Published: 2021-02-07 22:53:05

It has been over two months into my internship at [Wikimedia foundations](https://www.wikimedia.org/) under the [Outreachy]( https://www.outreachy.org/) program. I have written some blog posts about the internship [here](https://dev.to/dashboard?sort=views-desc). I'm really excited about the journey so far. There has been a lot of learning, building stuff, and experiences. Before starting to contribute to open source projects, I had the imposter syndrome whereby, I felt like because I didn't know much, I would fail and be probably be ousted but to my surprise, open-source communities are one of the most patient and tolerant communities I have ever come across! My mentors have been so supportive during this journey and I'm really grateful for that.

The internship will be ending in a few weeks and the question that I'm asking myself right now is, what is next? I have thought about this and I have come to the conclusion that I need to get a job or internship as I continue to make contributions to Wikimedia foundations after the internship. I will be taking the following steps when the internship ended;
- Go on a vacation for a week or two
- Update my Resume
- Update my Linkedin
- Apply for jobs
- Network by joining active community groups or job opportunities mailing groups.

During my internship, most of the work I have been doing is related to test automation and a bit of continuous integration. Prior to the internship, I have had experience building frontend applications using Javascript/ReactJs. Below are some of the experiences and skills I have gained during the internship;
- Test automation using Microsoft playwright
- Continuous integration using Github actions
With these skills and experiences, I'm open to remote roles with Frontend and Test automation full-time/part-time job opportunities or internships. 

Moving forward, I do plan to continue learning more about test automation and test automation frameworks like WebdriverIO, Puppeteer, and Cypress.