teleren/devto huggingface dataset:
Created simple analytics feature on webstore.
Tags: webdev, analytics, programming, python
Published: 2021-10-07 06:22:23

Building Analytics feature is not easy at all you have to keep many things in your mind like getting user location, parsing user agent for getting browser details, os they are using, getting the device type based on window inner width.

So I am building a project called WebStore soon going to rebrand to Stackhub for a couple of months. It is the community for the developer to share their projects and view other developer projects, upvote them, message them(Basic Feature) and you can see the engagement of your appliaction through the analytics feature that i have built.

![Dashboard Image](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/9ae9frbh0gakwrtnianc.png)

###How I have built this
######This can be explained in couple of points:
* So whenever the user click on the visit button of the project.
* Redirect the user to project url
* Make an api request at two endpoints.
* One is to update the number of time visited
* And one is to log the analytic data into DB with data like date, browser, device, os ,country and refers.

When this process working fine after that at every 24 hours we need to generate the report of that project and delete the older analytics data to avoid flooding out database.
Soon you will able to use this feature on [WebStore](https://webstoreapp.netlify.app/)
###Feature and Changed maybe I will add in future
*More beautiful user interface.
*Adding icons with reffers,browsers and os
*Filtering analytics data by dates,months,years
*Profile Visit Data

####If anyone wants to work on this project with me please let me know in the comments.
How to use the Ranorex framework?

Tags: softwaretestingcompany
Published: 2021-10-07 06:16:12

The look and feel of the application is the very first thing that catches a user’s eye. That’s where GUI (Graphical user interface) testing comes in, and Ranorex is a GUI test automation framework used for the testing of web-based desktop and mobile applications.
 
What is Ranorex ?
Ranorex Studio is a private enterprise Windows GUI test automation tool to automate tests for web applications and mobile applications. It is simple enough to use, even non-coders will be able to create tests using Ranorex with/without knowledge of programming language.
Ranorex doesn’t use any particular scripting language, it is built on Microsoft’s .NET platform. The Ranorex framework supports standard programming languages like C# and VB.NET to edit recordings or to create custom tests.
Ranorex relies on the XPath command language enabling easier and additional systematic search of parts in an exceedingly web-based application. The Ranorex record and playback interface permits for automating UI testing by recording UI actions. Creating testing manner easier with its codeless approach.
https://www.fleekitsolutions.com/
First Time at Hacktoberfest
Tags: hacktoberfest, webdev, beginners, javascript
Published: 2021-10-07 06:15:52

Most of the beginners are scared to get started with Hacktoberfest. I was confused too . I had many questions in my mind like How to participate ?, What will I have do ?,Will I be able to complete the challenges and many more questions . All of these question didn't stop until I participated and took a step ahead to try it. Everything changed suddenly after this moment , I was much more confident , I surfed through various repositories and found myself a repository to contribute in .
So , I would suggest all beginners to take challenges and give their best. As your first step can give you a new beginning
HTML tags | track
Tags: html, tags, track
Published: 2021-10-07 06:03:48

It is used to **add timed text tracks to audio or video**. To do this, they will be included as direct children of the `<audio>` and `<video>` elements using the WebVTT format (`.vtt` files), which means _Web Video Text Tracks_.

It has several attributes:
* `default`: indicates that this text track should be activated if the user's preferences do not indicate that there is a more suitable one. It can only be used in one `<track>` element per media element.
* `kind`: indicates how the text track should be used. If omitted, the default is `subtitles`. If it contains an invalid value, it will use `metadata`. It can take the following values:
  * `subtitles`: provides a translation of the content that the user cannot understand. For example, non-Spanish speech or text in a Spanish-language movie. Subtitles can include additional content, such as the text at the beginning of Star Wars movies or the date, time, and location of a scene (eg, _12h32. CIA Headquarters. Langley, Virginia_).
  * `captions`: provides a transcription and possibly a translation of the audio. It can include important non-verbal information such as music tracks or sound effects. You can also indicate the origin or source of the audio (music, text, character, etc). It is suitable for deaf users or when the sound is muted.
  * `descriptions`: textually describe the content of the video. It is suitable for blind users or when the video cannot be seen.
  * `chapters`: defines the chapter titles that are used when the user navigates through the multimedia resource.
  * `metadata`: defines content used by scripts. They are not visible to the user.
* `label`: indicates a user-readable text track title that the browser uses when listing available text tracks.
* `src`: track address. It is a `.vtt` file and must be a valid URL. This attribute is required and the value of your URL must have the same origin as the document, unless the parent `<audio>` or `<video>` element has a `crossorigin` attribute.
* `srclang`: indicates the language of the text track. It must be a valid [BCP47](https://r12a.github.io/app-subtags/) language tag. If the `kind` attribute has the value `subtitles`, then `srclang` becomes a required attribute.

A media element cannot have more than one `<track>` element with the same `kind`, `srclang` and `label` attributes.

- Type: *-*
- Self-closing: *Yes*
- Semantic value: *No*

[Definition and example](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/track) | [Support](https://caniuse.com/mdn-html_elements_track)
API Testing - Save effort by quickly debug your API test failures
Tags: testing, tutorial, apitesting, vrest
Published: 2021-10-07 06:00:48

Watch our video #tutorial on how you may save your team's effort by quickly debug API test failures in the #vREST NG Application.

vREST NG is a script less API test automation tool. It helps you to write maintainable test cases quickly for functional and regression testing of APIs. You can download and install the vREST NG application directly on Windows, OSX, and Linux via our website.

**Video Link:** https://youtu.be/S9FBRtgzZtg

**API Testing Tutorials Playlist:** https://youtube.com/playlist?list=PLmua155_WrDzt1AbB6iV5Lsw_Z7QrzZZ0

*Important Links:*
1. [vREST NG Website](https://vrest.io/?utm_source=devto&utm_medium=devto-desc&utm_campaign=video)
2. [Contact Email](mailto:support@vrest.io)
3. [Community Chat](https://discord.gg/NtRa7kw)
4. [Book a Live Demo](https://meetings.hubspot.com/dheeraj-aggarwal)

Please do like and share if you found this video helpful and let the voice heard by the testing community. Also, let us know your feedback by commenting on this post.
File uploading in GraphQL API in Rails with ActiveStorage
Tags: rails, graphql, ruby
Published: 2021-10-07 05:54:37

ActiveStorage was launched with Rails 6.0 that is a built-in file manager for local, S3, or any other storage platforms. ActiveStorage own [documentation](https://edgeguides.rubyonrails.org/active_storage_overview.html "ActiveStorage Documentation") is quite extensive to explain how it manages file uploads and how to call them.

While working with [GraphQL](https://graphql-ruby.org "GraphQL Ruby") in Rails, there, arises a problem with uploading a file to the system. One way is to upload the file through REST API but what if we want solely in GraphQL then there is a gem to do that. **[ApolloUploadServer](https://rubygems.org/gems/apollo_upload_server "ruby gems apollo upload server")**.

## Document Model:

I usually create a [polymorphic](https://guides.rubyonrails.org/association_basics.html#polymorphic-associations "Polymorphic Association") associated document model for file uploading and then attach them after upload. So, my model looks like this:
![app/models/document.rb](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/mw3ckuxmq59nret6w1z8.png)
This model also verifies the content type for images and pdfs uploading only. With `documentable`, we can use polymorphism with other models.

## GraphQL Document Type:

Now we are creating the GraphQL type for document output. Mine looks like below:

![app/graphql/types/objects/document\_type.rb](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/imtw85tltoc0r2zvx3ll.png)

I have `url`, and I am using s3 service so showing the service url. But in other environment I am using local storage, that is why I have different document URLs for the environment. All other parameters are fairly descriptive.

## Apollo Upload Server:

Now, comes the point to create a mutation resolver for uploading the file to the system. The complete documentation of ApolloUploadServer is [here](https://rubygems.org/gems/apollo_upload_server). After adding the gem to the Gemfile now we can create our mutation. My mutation looks like this:

![app/graphql/mutations/create\_document.rb](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/hzzyssgyqm2ria38cjii.png)

Here, `doc` is the active storage parameter saving the file, so, it is being used of ApolloUploadServer. The output will be the type we created before.

---
 
The code is at [https://gist.github.com/sulmanweb/aae082a30c3b7f2264895f7376ecdca8](https://gist.github.com/sulmanweb/aae082a30c3b7f2264895f7376ecdca8)

Happy Coding!
Learn MERN Stack Online
Published: 2021-10-07 05:52:52

Learn how to build and maintain robust web applications. This e-degree will teach you JavaScript technologies like Mongo, Express, Node and React which is used for easier and faster deployment of full-stack web applications.

<a href='https://www.eduonix.com/mern-stack-developer-e-degree' title='mern stack courses' target='_blank'>mern stack courses</a>
Learn IoT Online
Published: 2021-10-07 05:49:20

Learn how to create IOT ecosystems in which physical objects are connected with each other and can be accessed through the internet. This e-degree seeks to bridge the IOT skill gap by imparting professional training in technologies like Raspberry Pi, device architecture, Arduino, etc.

<a href='https://www.eduonix.com/iot-edegree' title='iot degree' target='_blank'>iot degree</a>
Learn Cybersecurity Online
Published: 2021-10-07 05:18:24

Master the art of neutralizing all types of data breaches! Get trained for White Hat Hacking, Pen Testing, Encryption, Network Security, Cloud Security, DevSecOps & other essential concepts with this advanced e-degree program.

<a href='https://www.eduonix.com/cybersecurity-edegree' title='cybersecurity degree' target='_blank'>cybersecurity degree</a>
Hola entrepreneurs ! Can you spill some beans 😋
Tags: discuss, startup, challenge, guidance
Published: 2021-10-07 05:06:32

I am always fascinated with new creations popping everyday and ingenious minds behind them. Though also wondered what these people must have gone through or faced to achieve this. So, I am inviting all to take part in this discussion and share your experiences, challenges you have faced through the journey and most important - help budding creators with your guidance and tips.
Simple Sign-in form using CSS 🚀🚀
Tags: codepen, webdev, css
Published: 2021-10-07 04:53:25

 I created a simple sign up form using html css and JavaScript. 
 It also include password show or hide functionality.

See below 👇

{% codepen https://codepen.io/shubham-web2144/pen/PojGdJE %}
CodeCademy CS101 Project
Tags: beginners, python, github, computerscience
Published: 2021-10-07 03:55:56

#Introduction
I am in the process of taking the CS101 course on codecademy. In the course they ask you to make a game that is playable on the terminal and based on the python lessons. This was my first time doing anything of the sort! I very much enjoyed the process and am happy with the result.

#The Criteria
* Build a terminal program using Python
* Add at least one interactive feature using input()
* Use Git version control
* Use the command line and file navigation
* Write a technical blog post on the project

#Back Story
I had never designed a game before and at first was quite nervous. After some joking with my wife about making a game about our cat, I came up with a game based on a favorite movie of mine. The game is called "STAB: The Scream Movie Game". It is based around the first sequence in the "Scream" movie where Casey Becker (Drew Barrymore) is harassed by the Ghost Face killer. The game pretty much is a choose your own adventure but stays pretty true to the scene minus some verbiage to make things work.

#Design
This being my first ever solo coding endeavor, it took a couple of tries to come up with a game plan that worked. I spent a couple days at work making pseudo code in notes on my phone. From there I made a word document better laying out the pseudo structure. Which then became another document stating the syntax for each part of the game.

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

The basic structure is a `Class` with multiple `methods`. I knew I wanted to add a suspense aspect since this is based on a horror movie. For that I found a `loop` that would print each character one by one to the terminal. I had also seen another project use a `function` to clear the terminal in game play, which I incorporated as well. For both of these additions to work I needed to `import` the `sys` module and the `os` module. A couple other modules I used were:

* `Time.sleep()` - for adding delays and helping with the suspense.
* `termcolor.colored()` - to add color to the text and differentiate characters.
* `pyfiglet.Figlet()` - to create ASCII art for Title and Game Over screen.
* `random.randomint()` - to randomize the bonus question answer.

#Game Play
The way the game is played goes as follows:

* Title screen.
* Choose character.
* Start game.
* Answer first question.
* Possible bonus question.
* Answer second question.
* Possible bonus question.
* Answer third question.

![game_play_gif](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/8hi1m1bqj8gs97w7v3xe.gif)

#Conclusion
I really had a lot of fun working on this project. I am a huge fan of the movie so the content alone kept me excited throughout the process. The outcome is pretty much what I wanted. I've only made a couple tweaks (some while writing this post) and am quite happy with the result. Hope you guys enjoy. Below is a link to the Github. RIP Wes Craven.

https://github.com/skyeman101/CS101-PP1
Dart Programming || Functions || Arguments || Return type || Exercises
Tags: flutter, dart, programming, beginners
Published: 2021-10-07 04:45:37

**Dart** is a Powerful language, it’s a new platform for modern App, Web, Game, A.I. development. It’s a superb place to start learning to program.
 
[Watch on Youtube](https://www.youtube.com/watch?v=u3qjn6zV8tA)

**Functions** are not strictly necessary to write programs. We usually use functions to split a large task into simpler operations or to implement operations that we will use
repeatedly in our application.

## Let’s see how to define functions in Dart.

function_name(function_arguments) {
 // Body of the function
}

## Here you can see a very simple function example:

greet(name) {
 print('Welcome to Dart $name');
}

## If you want to execute this function from your main program, you only need to call it, like this:

void main() {
 greet('John'); // Executing our sample function.
}

Although the above code is perfectly valid, it is recommended to use the Dart code style guide. Therefore, you should always specify the return data type of the function and the data types of the parameters passed to the function when you define your functions. **Thus, our function declaration should look like this:**

return_type function_name(argument_type argument) {
 // body of the function.
}

## Continuing with our example, let’s change the greeting:

void greet(String name) {
 print('Welcome to Dart $name');
}

## To properly declare a function in Dart and following the code style guide you must specify:

• Function return type or void if the function did not return any value.
• Function name.
• Function parameters specifying data type and name of each parameter.
• Body of the function, between curly braces.

**To show you the return data type and how a function will return  any value, our sample function will be redeclared as follows:**

String greet(String name) {
 String msg = 'Welcome to Dart $name';
 return msg;
}

More about **Arguments & Return type** on [Youtube](https://www.youtube.com/watch?v=u3qjn6zV8tA)

# Get in Touch with the Instructor
Do you have questions or comments? Do you need help working through an example or exercise? Please, do not hesitate to reach out on e-mail at h.a.smrity24@gmail.com.
Qué son NFTs? (Resumido)
Tags: blockchain, spanish, ethereum, nft
Published: 2021-10-07 04:30:47

Empecemos con una definición de las palabras que representan las siglas NFT, No-Fungible Token.

<strong>Token</strong>: Es una representación de información de valor y que existe en una blockchain. 
Son códigos que indentifican una serie de datos en una blockchain, NO son certificados de posesión, NO son el activo digital en si.

<strong>Fungible y No fungible</strong>: Se dice que algo es fungible cuando su valor es el mismo que otros elementos de su misma clase, ejemplo si posees 1BTC vale lo mismo que otro 1BTC que posea cualquier otra persona y por tanto los podrían intercambiar sin ningún problema, por el contrario, si hablamos de la Mona Lisa de da Vinci no podría ser intercambiada por La noche estrellada de Van Gogh, son pinturas únicas y tienen valores diferentes y subjetivos No son fungibles.

Entonces los No fungible tokens (NFTs) cumplen con ciertas características:

- Únicos
- Escasos y verificables
- Indivisibles

<h4>Ok... Pero para qué sirve un NFT??</h4>

Ya que el mundo digital está cada vez más integrado con nuestras vidas, surge la necesidad de poseer activos digitales, para poseerlos se debe tener algún "título de propiedad" allí entran en juego las blockchain como Ethereum que a través de contratos inteligentes nos dan la posibilidad de crear activos digitales únicos y pontencialmente escasos.
Entre los usos populares que se les ha dado a los NFTs tenemos la creación de arte digital, imágenes, música, videos pero también pueden funcionar para crear documentos "legales" como títulos de propiedad de una casa o un ticket para un evento deportivo.

Últimamente hemos visto el aumento de la popularidad de Axie Infinity, juego que se basa en los NFTs, los axies son NFTs, de ahí que cada uno tenga un valor distinto y su escacez en el mercado a la hora de crearlos o adquirirlos.

Es probable que veamos el aumento de los casos de uso para los NFT en un futuro no tan lejano así que vale la pena empezar a familiarizarnos con los términos y quién sabe, apostar por algún NFT coleccionable puede ser una buena inversión para el futuro...

Si quieres dar un vistazo a los NFT puedes entrar a [https://opensea.io/](https://opensea.io/) el Marketplace de NFT más popular actualmente.
Flatiron Javascript Portfolio
Published: 2021-10-07 03:46:29

We were tasked with creating a single page Application using a Rails API backend with a Vanilla Javascript frontend. For my project , I decided to build a app called **PlantScape** where users/plant moms like myself are able to post their plants along with their care and is also able to view or comment on other plants.  

#Generating a New Rails API:
To begin creating my Rails application, I first needed to generate a New Rails API: **`rails new plant-api --api --database=postgresql`**.
The `--api` flag is specified so rails knows to set it up as an API , and the **`--database=postgresql`** flag will ensure that your app uses postgres for the database rather than the default sqlite3 , if one plans to deploy to heroku. 

Upon generating my new rails project, I navigated to my gemfile and uncomment **`gem 'rack-cors'`**, which will allow Cross Origin Resource Sharing in my API.

I also went ahead an added the **`active_model_serializers gem`** which converts data into a format which can be easily transferred, as well as the **`'faker' gem`** which generates random data in many different categories. 

#Connecting My Frontend:

My App is structured such that the frontend(Javascript)sends a get fetch request to my backend(Rails Api) hosted on **`http://localhost:3000/plants`** which returns a Json data response to my frontend. 

**`getPlants = () => fetch(this.api + "/plants).then(res => res.json())`**

#Conclusion:

Most challenging for me was structuring a delete method in order to delete a specific plant by its URI. All in all, I'm very happy with the way my application turned out. I hope to build onto it in the future and eventually add more functionality.
##Thank you for reading and Happy Coding!😄
Code Smell 90 - Implementative Callback Events
Tags: javascript, webdev, beginners, tutorial
Published: 2021-10-07 03:05:09

*When creating events, we should decouple the trigger from the action.*

> TL;DR: Name your functions acording to what happened.

# Problems

- [Observer Pattern](https://en.wikipedia.org/wiki/Observer_pattern) violation

- Coupling

# Solutions

1. Name the events after "what happened", not "what you should do" 

# Sample Code

## Wrong

[Gist Url]: # (https://gist.github.com/mcsee/0a96468b7877744c0ec41d60378df4cd)
```javascript
const Item = ({name, handlePageChange)} =>
  <li onClick={handlePageChange}>
    {name}
  </li>

//handlePageChange is coupled to what you decide to do
//instead of what really happened
//
//We cannot reuse this kind of callbacks
```

## Right

[Gist Url]: # (https://gist.github.com/mcsee/185fef9ac202fed779fcf8a6c8f0bac3)
```javascript
const Item = ({name, onItemSelected)} =>
  <li onClick={onItemSelected}>
    {name}
  </li>

//onItemSelected will be called just when a item was selected. KISS
//Parent can decide what to do (or do nothing)
//We defer the decision
```

# Detection

This is a semantic smell. We can detect it on peer code reviews.

# Tags

- Coupling

- Naming

# Conclusion

Names are very important. We should delay implementation coupled names until the very last moment.

# More Info

- [What is exactly in a name](https://dev.to/mcsee/what-exactly-is-a-name-part-i-the-quest-61k)

# Credits

Photo by <a href="https://unsplash.com/@randomlies">Ashim D’Silva</a> on <a href="https://unsplash.com/s/photos/button-pressed">Unsplash</a>
  

Thanks to @macsikora for this tip

{% twitter 1445692315360653318 %}

* * *

> Beyond basic mathematical aptitude, the difference between good programmers and great programmers is verbal ability.

_Marissa Mayer_
 
{% 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 %}