teleren/devto huggingface dataset:
The Friendship App
Published: 2021-11-27 23:03:12

If I could build an app - the app that I would want built is a really sophisticated people matching app. The purpose of this app would be to connect people with similar interests and backgrounds together. With the use of sophisticated AI and match-making technologies, ideally the people that we would want to have connected to each other would have similar backgrounds, interests, et cetera. With the main target of users being aimed at the young adult generation - specifically those in college or recent graduates. I think that because most of the matchmaking apps are mainly focused on dating, that it would be nice to have one that would be focused on purely making and creating friendships. 

The usability of this app would be quite simple, it would be accessible through whatever smart mobile device that you would expect to carry, and downloadable in the app store. When using the app, it would temporarily use your location and match you with people in the area based off of the information you listed as being your interests. Steps to verify who you say you are could be done through a facial recognition system that users would have to certify through when first signing up to the app and every so often. 

If money was no concern and time was no concern, I would assemble my life skills to master a specific craft in tech - whether it be in the inner workings of cybersecurity or innovative things such as web or application development. I strongly believe that any master of a specific trade within tech can make a big impact on the world if they are able to manifest and put their skills on the table for good and productivity. Personally, for me, I've been studying in cybersecurity for 4 years at Penn State. So, as I'm already familiar with this as opposed to other things, I would want to further develop my skills within this trade. I think that being a part of a groundbreaking company or an organization that is changing the way we look at cybersecurity would be something fascinating to do - a company with work that puts users' steps ahead of threat actors as opposed to it being the other way around.
The Great Site Generator v1.0 Release
Tags: cpp, opensource
Published: 2021-11-27 20:35:20

This week I focused on creating an initial v1.0 release of the project, [The Great Site Generator](https://github.com/drew5494/the-great-site-generator/releases/tag/v1.0). I was able to use Conan and Gitlab to create the release by following their [guide](https://docs.gitlab.com/ee/user/packages/conan_repository/). At first, I tried vcpkg, but found I couldn't get it to work with Gitlab. Conan was able to work well with CMake and did not require too much work. I was happy to see my project finally added to the [Gitlabs registry](https://gitlab.com/drew5494/the-great-site-generator/-/packages/3942572).  
I had to alter my code before this release.  I wanted to ensure my code looked like it was ready and [added another function](https://github.com/drew5494/the-great-site-generator/commit/19d82c73e9de1f07551f29cbfdb137ea9f25bdca) to get rid of the remaining global variables. I asked one of my fronds, who is not in my program, to test out my initial release by following the <code>README.md</code>. They did not seem to have any trouble following it, except for requiring assistance to install Conan.  
In order to try out TGSG, you can use the following command. 
<code>conan install the-great-site-generator/1.0@root+the-great-site-generator/stable --remote=gitlab--remote=gitlab</code>

I hope the community enjoys v1.0 and helps to make it even better for the next release!
Blog: Slot Composition
Published: 2021-11-27 22:43:00

Slot Composition Defined:
Essentially what slot composition is, is when a user passes code through elements. Examples of what this code could be includes things such as a header, icon, et cetera. It essentially is everything and anything that goes within the makings of a card that can be interconnected with each other.

Using <slot> Components:
There are different ways in which we can utilize slot composition within the web components we work on. 
    An example of this is simple as: 
```
<slot name = "Header"><p>None</p></slot>
``` 
What this does is, it essentially identifies and uses the naming convention to name the elements that are being passed through the header that you are using.

Example of Slot Composition:
```
<user-card>
  #shadow-root
     <div>Name:
          >slot name="username"></slow>
     </div>
     <div>Birthday:
        <slot name="birthday"></slot>
     </div>
<span slot="username">Jon Smith</span>
<span slot="birthday">01.01.2001</span>
</user-card>
```

Source: 
https://javascript.info/slots-composition
Considerations for Web Components
Published: 2021-11-27 22:24:46

General:
When designing a web component card there are some key elements that need to be included:
1. Header
2. Icon
3. Banner
4. Body

The header will contain the icon, as well as any additional titles or subtitles that may need to be included. The icon itself will be represented by an SVG file. The banner of the card includes a colored background for the header, subheader, and the icon to rest on. The body contains any images or texts that may need to be included.

For our group, because it's a team of 4, the plan would be for each one of the team members to handle an element of the task. Any members that finish early, can assist other members in the progress and completion of their work in order to ensure a successful development process.

Unfortunately, I do not have much previous experience with web development prior to having taken this class, so there is a lot to be learned with each project and task that we've been assigned to work on. Getting through the button task has really helped me become more familiar with how the development of web components go and what I can expect in this line of work.
CTA Button: The Easy Button
Published: 2021-11-27 22:06:32

Despite the fact that the task was to develop a simple CTA button - there is a lot that is involved when developing one on JavaScript. Within each process of the design, there are many considerations that need to be taken into account in order to come out with a successful end product. My team worked on a button that would be rendered and operate off a page on the web.

Through this task, we have come across some successes and obstacles. One of the easiest successes that we took as a team, was the fact that the design process for the button was straight forward and stream lined in an easy to do way. We simply started out on similar terms with the open-wc boilerplate that we had previously worked on. We also knew that the design template was going to be based off of Staple's infamous "That was easy" button. This allowed us to have an idea and sense of what we were aiming on creating as a team.

As mentioned, obstacles did come however. Initially when we first began the task, we did not have a grasp and understanding on how to properly make changes and edits to the styles that had already been built to the open-wc boilerplate in which we had started on. We thought that we would have to do things the old-fashioned way and make implementations of constructors in a certain manner, but using CSS was going to be enough for the styling of our application.

Overall, there are some key things that I could take away from this assignment from the get go. One of the primary takeaways was that the way the development process is for web components is drastically different from the processes we see being utilized within the Python and Java programming worlds. Identifying the many states and characteristics of the CTA button was something that required thinking beyond the keyboard. Extra time allows for the developers to consider the endless attributes and characteristics that can be added -- so ultimately time was also something I noted as a beneficial thing to have on your side.

Repository:
https://github.com/Viable-Slime/Button
Perfect ConvertBox Integration for Encharge
Tags: onlinemarketing, leadgenerierung, newsletter
Published: 2021-11-28 19:53:43

---
title: Perfect ConvertBox Integration for Encharge
published: true
date: 2021-11-27 21:39:44 UTC
tags: OnlineMarketing,leadgenerierung,newsletter
canonical_url: https://bloggerpilot.com/convertbox-integration-encharge/
---

![Die perfekte ConvertBox Integration für Encharge.](https://bloggerpilot.com/wp-content/uploads/2021/11/convertbox-encharge.png)

Wenn du Encharge mit ConvertBox verbindest, erhältst du Zugang zu einer Vielzahl von Funktionen - von Kunden-E-Mails bis hin zu Drip-Kampagnen.

Der Original-Artikel erschien auf [Perfekte ConvertBox Integration für Encharge](https://bloggerpilot.com/convertbox-integration-encharge/).
Algorithms in a nutshell ; )
Tags: algorithms, beginners, programming, tutorial
Published: 2021-11-27 21:16:44

#So what on Earth are the Algorithms...?

An Algorithm is a set of ordered instructions to reach an objective or output or complete a specific task or do a calculation.

We use Algorithms in problems, but wait a second , Do you really know what a problem is?

#A Problem

A problem is the objective or the output we want to reach, or the task we want to complete . I think it is easy and straight forward , Right ;)  ?

Making a cake is an example of a problem.

#Problem Solving

and to solve a problem we do __problem solving__ that can be done  through 5 main __steps__ which are:

1) Problem definition
2) Writing the algorithm
3) Implementation
4) Testing
5) Program documentation (a programming-specific step)

So by __Applying__ this to our problem in the last example(Making a cake) then it will be like this :

##Problem definition : 
we want to make a cake and the :
1) output should be : a delicious cake
2) Input is : flour, milk, eggs, sugar and so on.

##Writing the Algorithm
Steps are :
1) Mix all dry ingredients together lightly to distribute. (Flour, sugar, baking powder, salt).
2) Add in milk, butter, and vanilla. Stir until well mixed. 
3) Beat in eggs. 
4) Bake 20 mins or until toothpick comes out clean.

And so on (I won't write the complete reciepe It's a programming blog not your grandma's cookbook ;) !

##Implemetation
In programming it means to choose a programming language and implement the Algorithm through code.

But in our last example it means implementing the instructions in real world not only on paper like writing the algorithm ( you got it , didn't you ? ).

##Testing 
Testing means to check if everything works right no unexpected syntax or locigal errors and if the program works right, you do this by doing trials with prepared outputs and check if your program behaviour meets the expected one.

In our case (making a cake) it means to check if the output is a cake not something else as a pie or something :) .

##Program documentation
All steps taken for solving the problem that include: given Input, output, plan for solving the problem, drawn flowchart, programming language used for coding and, instructions, date of last modification of the program and, people who contribute to the program development process, to have the program documented to go back for feedback and correction.

The documentation is beneficial when more than one person participate in writing or modifying the program. 


 
#Conclusion 
1) Algorithm is one of the essential steps to solve a problem
2) A problem is the computation we want to do , the task we need to complete, the output or objective we want to reach
3) Problem solving includes problem definition, algorithm preparation, implementation, testing and program documentation.

So that was it for this post , follow me if you want to see the rest of the series, if you like it react , and let me know in the comment section below.
Slot Composition in Lit
Published: 2021-11-27 20:58:08

During our class sessions, we discussion various ways that we can leverage using `<slot>` for the web components project. We are supposed to use slot to various dynamic customizations to the card as shown below ![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/9hpdpm6yf8uw5jf4sp8k.jpg)

##What is slot composition
Slot composition is used to pass code through elements. Code from things like the icon or the header of the card can be passed through. Slotting gives you the ability to pass dynamic content between different elements that you create, while supporting the ability to structure the rendered HTML and content however you see fit!

##Application 
For this project, our group is using the `<slot>` to make the card more dynamic and flexible. The `<slot>` acts a placeholder in web components that you can then populate with any mark up you would like. This allows for flexibility when creating different web components.

##Examples 
The screenshot below shows a good example of how to implement the slot tag in your code. 
![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/gme9u3v4u9be73da5vl6.JPG)
Nativo x Hibrido?
Tags: mobile, nativo, hibrido
Published: 2021-11-27 20:42:20

No desenvolvimento mobile nos dias de hoje temos diversas opções para criar um app. As pessoas me procuram sempre com essa dúvida: o que usar? E eu sempre respondo: depende!

Não existe uma fórmula mágica que determine qual estratégia usar, mas eu reunião neste paper os principais pontos para essa tomada de decisão. A principal tomada de decisão, na minha visão, é se devemos seguir com o desenvolvimento nativo ou híbrido.

Dentro do desenvolvimento híbrido, é claro, temos muitas vertentes, mas estou considerando por hora Flutter e React Native. Mas a decisão crucial ainda repousa entre o nativo x híbrido. As variações de equipe, custo, qualidade são enormes! 

Pode baixar o paper [aqui](https://1drv.ms/b/s!AhUytFEWx6jHg5YSVTqMFSD-TthOlA?e=Oj7QXH)
Interesting C++ bug involving `std::cin` for input.
Tags: cpp, bugs, watercooler, help
Published: 2021-11-27 20:38:29

So, I was making hangman for fun, and I had
```cpp
unsigned short guesses;
std::string    word;

std::cin << guesses;
// ...
```
And I discovered something interesting.
I was just playing around, and I typed `1`, and spammed a bunch of `0`s.
Sort of like the following.
```
1000000000000000000000
```
And then it did something really strange, it skipped the next `std::cin` command (which was the one for `word`).
And then... it kept repeating, printing things over and over (probably because I was in a `while(true)`), but it didn't bother to stop when it hit `std::cin`, even on the next loop iteration, instead constantly having the number be equal to `65535`, `(2^16)-1`; or in other words, the 16 bit integer (`unsigned short`) limit.

Even if I enter `65536`, the `unsigned short` limit plus one, it still bugs out in this crazy way.

Here's an image of what happens after I do this:
![Before submitting my answer of `65536`.](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/9kuqopqavztj6kwojc6c.png)
![Literally only a second after I submit my answer of `65536`.](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/63a20ydxetkt9y13d74a.png)  

This is what should happen normally:
![This is what should happen.](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/qjwvyq78fi6drudkioul.png)  



Strangely, this bug will also happen if I pass any strings that include a space (` `) character in them for `answer` (for some reason).

This is my code:
```cpp
int main() {
  while(true) {
    unsigned short guesses;
    std::string    answer;
    
    std::cout << "Enter the amount of guesses to allow: ";
    std::cin >> guesses;
    std::cout << "Enter the word for P2 to guess: ";
    std::cin >> answer;
    
    std::cout << "[Guesses: " << guesses << ", " << "Word: \""
      << answer << "\"]\n";
  }
}
```

If anyone knows what's causing these bugs, and how I can fix them, let me know!

<h1><b><center>Thanks!<br/>Cheers!</center></b></h1>
Boilerplates
Published: 2021-11-27 20:35:37

There are several similarities that can be identified among the four boilerplates that we're looking at in class - React, Stencil.js, Vue.js, and Angular. The components within each seem to be a commonality for these frameworks - they all contain and utilize CSS, HTML, and JavaScript files. Additionally, they all are heavily reliant on many dependencies. Between VueJS and Angular however - they are only a handful of files that can be found in both, such as package.json. Both also involve an index.html file.

In my personal opinion, between VueJS and Angular, I believe that VueJS is the best pick if you're just getting started. Because of the fact that the Angular boilerplate has more complexities and a lot more to it. If I were assigned to have a web application built tomorrow - VueJS would be the one that I would have to pick. VueJS involves these visual components which are easy to pick up and integrate into your work.

Viable Slime Organization Repo:
https://github.com/Viable-Slime/BoilerPlate

Angular Repo:
https://github.com/jbutko/AngularJS-Boilerplate
Cum să instalezi React.js
Tags: javascript, programming, tutorial, react
Published: 2021-11-27 20:31:44

Mai pe scurt React.js este o librărie pentru javascript .Cu ajutorul acestui instrument poți crea Frontend UI.

Cum să instalezi React.js

1)Crează aplicația ❤️ 

``` bash
npx create-react-app nameApp 
```
2)Accesează directoarea aplicația 😁
``` bash
 cd my-app
```

3) Pornește aplicația 🤟
``` bash
 npm start
```
Responsive typography in one line
Tags: css, webdev, programming, html
Published: 2021-11-27 20:22:56

The CSS clamp() function is a small and maybe a bit unknown function, but I think it's pretty awesome. It works by clamping a value between an upper and lower range.

It can be used for various things such as border size or padding values, but so far I have only used it for font sizes. 

The usual way to create fluid typography involves playing around with different calculations around the viewport size and for some reason, I have never liked doing it that way. The clamp() however, has nice readability and it's easy to control.

Here's a small snippet of using clamp():

![css styles](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/62lvk57q7m2ytx9opc7t.png)

As you can see, it takes three values. Those values are:

1. A minimum value
2. A preferred value
3. A maximum value

In the snippet above, I set the minimum size as `1.75rem` and the maximum size as `3rem` for the h1. For h2 we have `1.2rem` and `1.4rem`, and the h3 has `1rem` and `1.5rem`.

Here's the result, when used in the front page of dev.to: 

Mobile:
![mobile](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/9jeseck1j8o2aika47a1.png)

Desktop:
![desktop](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/wuj75j7okubsum0wfkvs.png)

Cool and easy, huh? No need for complex calculations or media queries.

You can play around with the middle value (preferred size), as it controls the fluidity. You can use `vw` units that allow the font to scale with the size of the display but stay within your ranges.

Follow me on Twitter for more: https://twitter.com/bjakyt
Installing: open-wc
Published: 2021-11-27 20:17:28

To begin the process, you would have to install the most recent version of Node.js (https://nodejs.org/en/). The instructions should come along with the Node.js setup pop-up. This will install npm with Node.

From here, you can install yarn. This of which may be done by entering the following into the Windows Cmd Prompt: 
```
npm install --global yarn
```

Now identify and move to the folder you are going to be using for your Cmd Prompt and type in: 
```
npm init @open-wc
```

Wait patiently for everything to setup on its own. Once it's ready, options will appear on the screen. Make selections to: scaffold a new project, web component, linting, no (to typescript), the name of your web component ("hello-world"), review the file location (click yes to confirm it looks good), and then finally make a selection to "Yes, with yarn" for the dependencies to be installed.

Once this is in order, you should be all done!
Planning for my final release assignment
Published: 2021-11-27 20:16:53

## Introduction
Hello everyone, my name is Dustin. Today, I'd like to talk a bit about my plan of what I'm going to with the final assignment in OSD600. 

## Plan
I really feel like working on Telescope issues and stuff as the project's really potential and still has a lot of features waiting to be added. 

The reason why I don't choose an external project is because it's gonna take much of my time finding one, and I'm unsure that I can even complete it on time. So instead I go with Telescope because I'm familiar with some aspects of it and it has a great community and an awesome professor who's always willing to offer me support. 

Currently, I'm actively looking for issues that are relevant to __ENHANCEMENT__ OR __FEATURE__, so it would be much of a work for me to do. 

One of another reason why I chose Telescope is because it's production ready and has a lot of technologies that are being used for production by many people. If I choose a random project that has a __COOL__ feature waiting to be implemented, I can of course give it a try but it may not have some really cool technologies that I'm looking for in a project. 

I just put my names in 2 two issues that are also __ENHANCEMENT__ for the project. The first one is about sharing posts and the second one is posts count in search. Yes, I mean they're small and not meeting the requirement. But I just finished a small fix and still looking for more issues. Apart from that, the sharing posts thing can be expanded more as I can add the feature __BOOKMARK__ posts for authenticated users so that I can come back and read. 

Thank you for reading.