teleren/devto huggingface dataset:
GUI Programming in Python
Tags: pyqt, python
Published: 2021-05-05 13:29:20

[PyQt](https://www.riverbankcomputing.com/software/pyqt/intro/) is the Python binding of the cross-platform GUI toolkit Qt, written in C++. It's a library for **developing cross-platform GUI applications**. 

There are two main ways that applications can create a GUI in Python :smile:. One way is using the [tkinter](https://python-commandments.org/tkinter-basics/) module , which is included with Python by default and works on both Windows and Unix-like operating systems. 

The other method is using a third-party GUI library, such as [Qt](https://pythonbasics.org/pyqt-hello-world/) , [wxPython](https://pythonspot.com/wxpython-gui-tutorial/) or PyGTK .

Developing programs with a Graphical User Interface in Python requires the use of an appropriate toolkit. The most popular and mature framework on Python is Qt. 

If you are new to PyQt, I recommend this course: 
[Create Desktop Apps with Python PyQt5](https://gumroad.com/l/pysqtsamples)

In my opinion, PyQt is the best way to make GUI apps with Python. Tkinter is very minimal in terms of widgets.

## Why PyQt? 

Qt is powerful, mature, and easy to learn. [PyQt](https://pythonpyqt.com/), the Python binding of Qt, gives Python programmers access to **hundreds of ready-made user interface components**, without forcing them to learn C++.

Using Python instead of C++ means that you can write GUI applications without having to know all the ins and outs of Qt and its class hierarchy. It also allows you to quickly create bindings for libraries like NumPy and SciPy.

![pyqt widgets](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/dqlabqu0ncz2ocbymful.png)

Besides the widgets shown here, there are many more. There's even a [video widget](https://pythonprogramminglanguage.com/pyqt5-video-widget/)

PyQt is a very complete port of the Qt library, and supports all of its features: QGraphicsView, Quick, QML, and many widgets. The library has everything necessary to build complete user interfaces and programs in Python.

On top of that, you can design your GUI with drag-and-drop using Designer and Creator.

![qtcreator](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/006agpkrf9tso5gdh0kg.png)

Qt Designer is a cross-platform WYSIWYG GUI editor based on Qt. Qt designer allows you to connect a UI to your code by dragging and dropping widgets around your form and then connecting up signals and slots.

To do that with designer you:

* Create a UI in Qt Designer
* Load it into Python
* Then connect it up using the PyQt5 code
Awesome Button Hover Using CSS
Tags: html, css, webdev, beginners
Published: 2021-05-05 13:25:48

Today I created a Simple Button Hover Effect Like Accenture Using HTML & CSS. this hover effect is simple but it looks amazing when you hover on the button then box-shadow comes in the background also transform the button position. I hope you like this also comments about your thoughts.

For more content follow me on Instagram  [@developer_nikhil27](https://www.instagram.com/developer_nikhil27/).

Thank you!

{% codepen https://codepen.io/NikhilBobade/pen/WNpeqmJ %}
GPT-3 and CSS Frameworks
Tags: gpt3, css, webdev, machinelearning
Published: 2021-05-05 13:17:54

Recently I gained access to the OpenAI GPT-3 API. I tried different things like content creation, code translation and other experiments. One of the amazing things of GPT-3 is the capacity to learn from simple textual examples.

Programming is one of the most complex and problem solving tasks. But I wasn’t interested in training GPT-3 to program. For me it was more interesting how GPT-3 can speed up some boring repetitive code creation.

GPT-3 works great with well structured code that has clear naming logic. I tried to train it to generate layout HTML with clear class syntax. 

I used my Smart CSS Grid Framework because it has simple naming logic. CSS Classes are named from one to twelve because it is a 12 grid system. 

The logic is the total of each row should be always 12 or something like this 3 + 3 + 4 + 2 = 12

The idea was, when I write something like this: 

 3 | 3 | 6 

To receive something like this:
<div class="three"> </div> <div class="three"> </div> <div class="six"> </div>

After a couple examples GPT-3 started to work almost perfectly even with more complex layouts.

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

Here is the text I used to train GPT-3:

```
text: 4 | 4 | 4
code: <div class="four"> </div> <div class="four"> </div> <div class="four"> </div>

text: 3 | 3 | 3 | 3
code: <div class="three"> </div> <div class="three"> </div> <div class="three"> </div> <div class="three"> </div>

text: 2 | 2 | 2 | 6
code: <div class="two"> </div> <div class="two"> </div> <div class="two"> </div> <div class="six"> 

text: 3 | 2 | 4 | 3
code: <div class="three"> </div> <div class="two"> </div> <div class="four"> </div> <div class="three"> </div>

text: 3 | 2 | 4 | 3 | 4 | 8
code: <div class="three"> </div> <div class="two"> </div> <div class="four"> </div> <div class="three"> </div> <div class="four"> </div> <div class="eight"> </div>

text: 3 | 2 | 4 | 2 | 2 | 8
code: <div class="three"> </div> <div class="two"> </div> <div class="four"> </div> <div class="two"> </div> <div class="two"> </div> <div class="eight"> </div>

text: 3 | 2 | 9 | 
4 | 4 | 12 | 
5 | 2 | 4
code: <div class="three"> </div> <div class="two"> </div> <div class="nine"> </div> <div class="four"> </div> <div class="four"> </div> <div class="twelve"> </div> <div class="five"> </div> <div class="two"> </div> <div class="four"> </div>

text: 3 | 2 | 9 | 
4 | 4 | 11 | 
5 | 2 | 4
code: <div class="three"> </div> <div class="two"> </div> <div class="nine"> </div> <div class="four"> </div> <div class="four"> </div> <div class="eleven"> </div> <div class="five"> </div> <div class="two"> </div> <div class="four"> </div>

text:
``` 

Important to keep the “temperature” to 0, we don’t want GPT-3 to be creative. 

![Alt Text](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/y8hnox1bdq7xfweoyr6f.gif)

This is a super simple example of how GPT-3 can be used to generate repetitive HTML code. Basically all CSS Frameworks follow certain rules that can be easily used for GPT-3 training.
Top 14 Flutter App Development Tools
Tags: flutter, tooling, android, uiweekly
Published: 2021-05-05 13:11:54

At present, approximately 55% of digital media usage comes from mobile applications. It has been found that around 20% of millennials tend to open applications at least 55 times regularly as well. This fact depicts an appropriate image for the upcoming days of <a href="https://www.rlogical.com/mobile-app-development">mobile application development</a>. We have become dependent on mobile devices and smartphones for our daily chores, thanks to the enhanced technological developments right now.

There happens to be a mobile app for virtually every business and job. The extensive usage of mobile applications in our daily lives has resulted in sophisticated software solutions such as Flutter, which has transformed the application development industry completely.

<b>Why go for Flutter?</b>

Flutter is the appropriate choice for developing a cost-effective mobile app, given that it does not require massive investment. Almost identical performance and speed are delivered by Flutter apps similar to a standard native application. Nevertheless, they are likewise fantastic for developing gaming apps. It will be possible to reuse the same code on multiple platforms as well.

Flutter helps you to accumulate various features into a comprehensive design for an application. Flutter has turned out to be among the most effective options for cross-platform mobile application development. Furthermore, Flutter allows the <a href="https://www.rlogical.com/hire-dedicated-developers/hire-flutter-app-developer/">hire flutter developers</a> to build an app comfortably as well as quickly.

Lists of Top 14 Flutter App Development tools:
1. Panache
2. Supernova
3. Test Magic
4. Count.ly
5. Adobe Plugins
6. Instabug
7. Codemagic
8. RevenueCat
9. Sylph
10. Android Studio
11. Visual Studio Code
12. Appetize
13. Screenshots
14. Amplitude

Let's check out here Essential Flutter App Development Tools:https://vocal.media/01/top-14-flutter-app-development-tools
World of products! - Startups to follow #3
Tags: startup, design
Published: 2021-05-05 13:09:05

Hi community 👋
Let’s have a look on new startups from second part of April. The rules the same as recently. Products are grouped in two categories - featured and added by Owwly’s users. Let’s dive into it!

## Featured:
[Toggl](https://toggl.com/?ref=owwly)
Simple time tracking. Powerful reporting
✂️ Productivity 

[Lingo](https://www.lingoapp.com/?ref=owwly)
A modern digital asset manager for brand and product
💬 Collaboration

[Paddle](https://paddle.com/?ref=owwly)
Subscription and commerce platform that enables SaaS businesses to grow faster
💰 Money

[Supernotes](https://supernotes.app/?ref=owwly)
Collect Your Thoughts
✂️ Productivity

[Letter](https://letter.so/?ref=owwly)
Create beautiful newsletters in minutes, not hours
📧 Email

## From users:

[SOAX](https://soax.com/)
Data scrapping made easy with soax-com

[Peritus](https://peritus.ai/)
Recommendation assistant extension - cloud native questions

[Notch](https://notchteam.com/)
Hire trusted remote developers at scale

[ImgDownloader](https://imgdownloader.com/)
Bulk download images from any urls

[Freeble](https://freeble.site/)
Discover the amazing list of free online products & services

—-

Want more? Visit [Owwly](https://owwly.com) and dive into world of products! 
If you want promote your app/website, just login and add it. It’s always free!
Feedback on the UX for my startup's viral marketing strategy?
Tags: startup, twitter, ux, saas
Published: 2021-05-05 13:03:46

Hi All!

Over the past few months I have been building a newsletter platform, https://postheat.com, and I just released a new feature that is itself a marketing strategy.

Let me tell you about the feature…

I read an article a while back about using the power of other networks to market your startup (i.e. leveraging Twitter, Facebook, and LinkedIn connections). In the article, the author used Twitter to create a viral marketing strategy by letting users create tweets with a link back to the authors startup as part of the product.

I have decided to apply this idea to postheat.com.

The key idea is to align my users incentives (growing and promoting their newsletters), with my incentives (growing and promoting my startup).

So, I’m adding a new feature to postheat.com that will allow my users to do just that – quickly promote and grow their newsletters on Twitter, while simultaneously helping me to grow and promote my startup.

This is how I am planning it out:

• I have added an “Insert Tweet” button that lets users import tweets from their twitter feeds directly into their newsletters while they are writing

![alt text](https://postheat.com/Insert_Tweet_Photo_1.png)

• When a user finds a tweet they want to import, they will have the option to automatically create a re-tweet, notifying the original tweet author (and everybody else who sees the re-tweet) that they are adding that tweet into their newsletter hosted on postheat.com, with a link to their subscriber sign up page.

Ex. A user finds a Product Hunt tweet to add to their newsletter, so they click the mail icon.
![alt text](https://postheat.com/Insert_Tweet_Photo_2.png)

The Tweet is added to their newsletter...
![alt text](https://postheat.com/Insert_Tweet_Photo_3.png)

A tweet is then created with a notification to Product Hunt indicating where they can subscribe to the newsletter that is writing about their tweet. Here I’m using the PostHeat twitter account, but Tweets will be sent from each users respective Twitter account.
![alt text](https://postheat.com/Insert_Tweet_Photo_4.png)

A percentage of Twitter users who see the tweet will sign up for the newsletter, and another percentage will start their own newsletters on PostHeat.com, repeating the marketing cycle.
![alt text](https://postheat.com/PostHeat_Cycle_Diagram.png)

I’m hoping that this will help to serve my users by providing them an easy way to promote their newsletters, as well as, an organic / viral marketing strategy for my startup. However, right now the retweet checkbox is checked by default when users choose to import a tweet into their newsletter, and I’m not sure if this is crossing the line with my users. Although I do provide an explanation of what happens if the box is checked, I am trying to decide if this should be more of an opt-in feature.

How would you feel if you ran into this as a user? I’d appreciate any thoughts, as I really do believe this feature will benefit both my users and my startup.
Quickly explore your data with `uniq` and `tally`
Tags: ruby, rails, webdev
Published: 2021-05-05 13:58:09

---
title: Quickly explore your data with `uniq` and `tally`
published: true
date: 2021-05-05 13:00:00 UTC
tags: ruby,rails,webdev
canonical_url: https://boringrails.com/tips/explore-data-ruby-uniq-tally-count
---

A common question you may want to answer on user-input data is: what values have been entered and how many times is each one used?

Maybe you have a list of dropdown options and you want to investigate removing a rare-used option.

Ruby has two handy methods that I reach for often: `uniq` and `tally`.

## Usage

The `uniq` method operates on an enumerable and compresses your data down to unique values.

```ruby
Outreach::Task.all.map(&:status).uniq
=> ["Confirmed w/o Outreach",
 "Awaiting Outreach",
 "Responded",
 "No Response Expected",
 "Follow-up",
 "Awaiting Reply"]
```

While most developers are familiar with `uniq`, the `tally` method is one of the best kept secrets in Ruby. The `tally` method takes an enumerable of values and returns a hash where the keys are unique values and the values are the number of times the value appeared in the list.

```ruby
Outreach::Task.all.map(&:status).tally
=> {"Confirmed w/o Outreach"=>106,
 "Awaiting Outreach"=>28,
 "Responded"=>48,
 "No Response Expected"=>10,
 "Follow-up"=>4,
 "Awaiting Reply"=>8}
```

These two methods are great to have in your toolbox to quickly explore your data in a Rails console.

## Additional Resources

Ruby API: [Enumerable#uniq](https://ruby-doc.org/core-3.0.0/Enumerable.html#method-i-uniq)

Ruby API: [Enumerable#tally](https://ruby-doc.org/core-3.0.0/Enumerable.html#method-i-tally)

* * *
[![](https://boringrails.com/images/twitter-banner.png)](https://twitter.com/_swanson)
Hamiltonian Cycle Design Analysis and Algoritm
Published: 2021-05-05 12:52:15

The cycles which cover all the nodes in a graph once without repeating any node is called a Hamiltonian Cycle.

It is similar to the graph we get in Travelling salesman problem

Hamiltonian cycles are not possible in graphs which have articulation point in them or have pendent vertices

Articulation point is a node in the graph whose removal can cause the graph to be divided into two or more parts independent of each other .

Code:

#include<iostream>

using namespace std;

int graph[NODE][NODE];
int path[NODE];

void displayCycle() {    //Function to display the cycle obtained
   cout<<"The Hamilton Cycle : " << endl;

   for (int i = 0; i < NODE; i++)
      cout << path[i] << "  ";
   cout << path[0] << endl;      //print the first vertex again
}

bool isValid(int v, int k) {
   if (graph [path[k-1]][v] == 0)   //if there is no edge
      return false;

   for (int i = 0; i < k; i++)   //if vertex is already taken, skip that
      if (path[i] == v)
         return false;
   return true;
}

bool cycleFound(int k) {
   if (k == NODE) {             //when all vertices are in the path
      if (graph[path[k-1]][ path[0] ] == 1 )
         return true;
      else
         return false;
   }

   for (int v = 1; v < NODE; v++) {       //for all vertices except starting point
      if (isValid(v,k)) {                //if possible to add v in the path
         path[k] = v;
         if (cycleFound (k+1) == true)
            return true;
         path[k] = -1;               //when k vertex will not in the solution
      }
   }
   return false;
}

bool hamiltonianCycle() {
   for (int i = 0; i < NODE; i++)
      path[i] = -1;
   path[0] = 0;     //first vertex as 0

   if ( cycleFound(1) == false ) {
      cout << "Solution does not exist"<<endl;
      return false;
   }

   displayCycle();
   return true;
}

int main() {
	int i,j;
	cout << "Enter the Graph : " << endl;
	for (i=0;i<NODE;i++){
		for (j=0;j<NODE;j++){
			cout << "Graph G(" << (i+1) << "," << (j+1) << ") = ";
			cin >> graph[i][j];
		}
	}
	cout << endl;
	cout << "The Graph :" << endl;
	for (i=0;i<NODE;i++){
		for (j=0;j<NODE;j++){
			cout << graph [i][j] << "\t";
		}
		cout << endl;
	}
	
	cout << endl;
	
   	hamiltonianCycle();
  }
How I Use Vim to Code (Productivity Tips)
Tags: vim, productivity, linux
Published: 2021-05-05 12:42:25

There’s a lot of good stuff being written about Vim and the way it can help you become a more productive programmer. Here’s my perspective on how Vim has made me a better programmer. :zap:

For those who don’t know, Vim is a powerful text editor that is often used in terminal environments. Since it is primarily designed for typing commands quickly into a shell, the keyboard-only interface can take a little time to learn.

I use **vim-mode** inside Visual Studio Code and vim inside the terminal for small files. If you want to [learn vim](vim.is/) try these exercises.

Vim allows me to code everywhere, on any operating system. Regardless of whether it's in an SSH session, in the terminal, on Mac, Windows, Linux or in a mobile phone.

It was one of the best productivity decisions I have ever made and my experience using it has been so positive and fun. 

## Productivity Tips :rocket:

**The Why of Better Productivity**

Why do I use vim? Well, first off I’d like to talk about productivity and efficiency. I used to be a huge fan of /Sublime Text in the past but that has all changed since I’ve picked up vim. Why? Well, let me just give you a few examples.


**Jump to line**

Whenever you encounter an error, it shows a line number. For example line 5072. You can press the keys `5072G` to immediately jump to the line instead of scrolling endlessly.

With one key press, you can also move to the beginning or end of the file. 

**Record and replay keystrokes**

I use keyboard macros a lot. Vim lets you record and replay your keystrokes. Let's say you want to turn this into an HTML list:

```
spiderman
batman
x-men
superman
heman
wonderwoman
...
..
```

All you need is to record keystrokes `qx` for one item, and replay them `@qx`. Even if that is for hundreds of lines. Saves you a lot of typing.

Sure, you don't have to use keyboard macros. But if you have a lot of repetitive work, do you really want to waste your life on that?

![typing on keyboard](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/n0wiy56bb49gaf3sf188.gif)

**jumping the cursor**

Vim allows you to jump between words. You can quickly navigates the cursor, much faster than pressing the cursor keys x times. With one key press you can move to the beginning or end of the line.
 
**multiple panes**

You can view multiple code files in parallel by typing `:sp` or `:vs`. This works both in Visual Studio and in the terminal.

You can still use tabs at the same time if you want, but it's makes coding much more efficient :smile:
Capture Keyboard Input with a TextInput - React Native Basics
Tags: reactnative, reactnativebasics, mobile
Published: 2021-05-05 12:34:20

---
title: Capture Keyboard Input with a TextInput - React Native Basics
published: true
description: Learn how to use the core TextInput component to capture user input via the keyboard.
tags: reactnative, reactnativebasics, mobile
cover_image: https://dev-to-uploads.s3.amazonaws.com/uploads/articles/zjirroc2moe7mednfpg9.jpg
canonical_url: https://www.reactnativeschool.com/capture-keyboard-input-with-a-textinput-react-native-basics
---

Learn how to use the core TextInput component to capture user input via the keyboard.

{% youtube 21VI9LVshvc %}
CSS Heartbeat using an Infinite Animation Count
Tags: css, html, webdev
Published: 2021-05-05 12:25:41

![Alt Text](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/ts7wbb1q7ncxjx3dukug.PNG)
`CSS Styling:`
Here is another amazing shape of heartbeat. It's really interesting. You can try it as well. 
*CSS Code:*
```
.back {
    position: fixed;
    padding: 0;
    margin: 0;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: white;
    animation-name: backdiv;
    animation-duration: 1s;
    animation-iteration-count:infinite;
  }

  .heart {
    position: absolute;
    margin: auto;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    background-color: red;
    height: 50px;
    width: 50px;
    transform: rotate(-45deg);
    animation-name: beat;
    animation-duration: 1s;
    animation-iteration-count:infinite;
  }
  .heart:after {
    background-color: red;
    content: "";
    border-radius: 50%;
    position: absolute;
    width: 50px;
    height: 50px;
    top: 0px;
    left: 25px;
  }
  .heart:before {
    background-color: red;
    content: "";
    border-radius: 50%;
    position: absolute;
    width: 50px;
    height: 50px;
    top: -25px;
    left: 0px;
  }

  @keyframes backdiv {
    50% {
      background: #ffe6f2;
    }
  }

  @keyframes beat {
    0% {
      transform: scale(1) rotate(-45deg);
    }
    50% {
      transform: scale(0.6) rotate(-45deg);
    }
  }
```
*HTML Code:*
```html
<div class="back"></div>
<div class="heart"></div>
```
Boger - my new React project, an alternative to Omegle 
Tags: showdev, react, javascript
Published: 2021-05-05 12:21:21


Hello, dev comunity! :)
Today I wanted to show my new project created in React, Redux and NodeJS, it's a quite unusual alternative to the popular Omegle.

You can not only talk via text or video chat, but you can also randomize the topic of conversation by pressing the "Break the Ice" button or send each other photos.

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

The site always tries to choose first a random stranger who speaks the same language as you, you can change the language in the settings.

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

Recently I added also creation of Space rooms, where you can talk with chosen person after giving link, as well as creation of Space groups, where there can be many strangers in one group.

In settings you can also change displaying messages style from text to bubbles or turn off automatic changing of smileys to Emoji :)

Both photo and video chat are sent via WebRTC, which means that no server is affected.

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

What do you think about my little project? 
Any suggestions what I can change, add or improve?
If you have found a bug, please report it to me here, or in the form on the site.

My project can be found at: [boger.js.org](https://boger.js.org/)

If anyone wants to help translate the site, they can do so via Pull Request to GitHub:
https://github.com/skorotkiewicz/Boger-Translations