teleren/devto huggingface dataset:
Jozef Behr : How to Improve Your Programming Skills fast ?
Published: 2022-04-20 12:14:04

**1 Reading code**

It goes without saying ... If you want to become a better writer, you have to become a better reader - that means you read more books, as well as more books.

Similarly, if you want to become a better programmer, which is actually different writing, you should strive to read much more code, especially code from very good programmers.

2 **Set aside repair time**

To be honest, I initially adopted the mindset "if it works, then it's good". Refactoring code will always be set off. In retrospect, it's actually ridiculous. I would never publish an article without repeating it once or twice to make sure I am conveying the message I want.

# **3 Practice doing**

If you want to become a better writer, you need to write more. If you want to be a better chef, you have to cook more. If you want to become a better programmer, you need to write more programs.

A little hack that you might steal to write more programs is to start by writing lots of small programs. This allows you to increase the amount of code you are writing every day which allows you to create many more programs.
What helps you with creative block?
Tags: webdev, discuss, productivity
Published: 2022-04-20 12:10:11

**I recently found myself in a creative jam..**

It all started a few weeks ago when I started building my own personal website, It was all very exciting! I had a TON of ideas, colours, illustrations, and I started building the base but then.. I was just staring at the front home page and the about me thinking, crap, what do I even write here? I then wasn’t sure on the colours I had chosen as even though they’re bright and vibrant they're terrible for accessibility, I then started questioning the layout.. I had all these ideas swimming in my mind but it was like I couldn’t put them to use, I didn’t know how to begin to write them down, code them, draw them so I put everything down and stepped away.

In that time I’ve done tons of research, reading articles, listened to podcasts, even been working on small coding challenges (_see my frontend mentors post 📝_). But I feel like I’m now putting off my original project but I just don’t know how to get back into it, where to even begin. 

Do you have any tips that help you in these situations? Any apps you use to collect your ideas?
Android - How to do Screenshot Testing in Jetpack Compose
Tags: android, screenshot, javascript, programming
Published: 2022-04-20 12:09:36

Wondering how to write screenshot tests of Jetpack compose?

Checkout this video to get started on screenshot testing in 5 minutes.

{% embed https://youtu.be/gs5emroV5Io %}.

Full source code is available on our company's [github](https://github.com/canopas/yTech-screenshot-testing-compose) page.
Week 3 - Toggle App
Tags: react, hook, usestate
Published: 2022-04-20 11:49:04

---
title: Week 3 - Toggle App
published: true
description: creating small UI component to build large scale projects
tags: reactjs, hook, useState
cover_image: https://i.imgur.com/p3vk2Nj.jpg
key: 1
series: React Curve
---

## Welcome to Week 3 of React Curve

Hello developer!, glad to see you again.

This is a react-curve, open source project where I can share and start creating small UI components in the way I understood the concepts to build large scale projects .

----------------

## Toggle App

![toggle app](https://i.imgur.com/Qy3uMCl.gif)
This week we created a toggle app that show and hide content when click on button in react.

To create a toggle component; We have to :

* Create a state that holds the button status.
* The button status either is shown or not.
* When clicking on the button, fire the setShow method.
* setShow method reverses the current show state.
* if the show state is true, show &lt;h2&gt; on the screen and toggle "Hide Welcome" on the button.
* if the show state is false, Don't show the message on the screen and toggle "Show Welcome" on the button

## Code
```react
import React, {useState} from 'react';

const Toggle = () => {
    const [show, setShow] = useState(true);

    return (
        <div className="showHide">
            <h2>Toggle</h2>
            <div>
                <button onClick={() => setShow(!show)}>
                    {show ? "Hide Welcome" : "Show Welcome"}
                </button>
                {show && <h2>Hi, How are you ? </h2>}
            </div>
        </div>
    );
}

export default Toggle;

```
### Conclusion
Thank you for reading and any contribution is more than welcome in the threads below!

[Live Preview](https://this-react-curve.vercel.app/toggle)
[Source Code](https://github.com/this-mkhy/react-curve)
Coding is Not Enough
Published: 2022-04-19 18:53:30

SEO is a technique that can have multiple benefits. For instance, it could drive more traffic to your own website. Additionally, SEO could help you get more job opportunities - either in your career or as a freelance writer. 





## What Is SEO and Why Does It matter?

Search engine optimization is the process of improving your website’s visibility in [search engine results pages (SERPs)](https://blog.seosniffer.com/posts/serp).

It’s the process of making your website’s content, design, and overall experience more visible in the SERPs so that more people are able to find and come to your site. SERPs are the front page of the internet, and the best way to get there is through an optimized website. 
think of it like, you interrogate your database and apply filters to the results. This way, you can get a more accurate portrayal of the data at your fingertips. 



The best results from Google comes from websites that are written with deliberate SEO in mind. In order to get the best results from Google, your website must be optimized for the top seeds in each search query. The best way to do this is with a focused focus on improving the content, design, and overall experience of your site.


## How Does SEO Work?

To achieve success with SEO, you need a general understanding of the process, as well as a few SEO-specific terms. The following are some of the most important terms you need to know to optimize your site for success on the internet.



[Keyword research](https://seosniffer.com/keyword-explorer): During the content writing process, it’s important to know what search queries your audience is asking for. You can do this by using keywords research to discover what topics your potential customers are interested in.



[Keyword gaps](https://try.alexa.com/seo-tutorials/keyword-gap-analysis): When you know what topics are popular, it’s time to start filling in the gaps. This can be done through keyword research or through in-depth content analysis.

In the next article, I will discuss how I combined my knowledge of SEO and coding to create a successful website.
API Security with Software AG and Cequence Security
Tags: webmethods, apimanagement, apigateway
Published: 2022-04-25 09:51:56

---
title: API Security with Software AG and Cequence Security
published: true
date: 2022-04-20 11:22:43 UTC
tags: webMethods, APIManagement, APIGateway
canonical_url: https://tech.forums.softwareag.com/t/api-security-with-software-ag-and-cequence-security/256796
---
![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/xhdoca5ahnipb8j6zelx.png)
  
[https://www.youtube.com/embed/b2zzn5egjlU](https://www.youtube.com/embed/b2zzn5egjlU?autoplay=1&feature=oembed&wmode=opaque)


[Visit original post](https://tech.forums.softwareag.com/t/api-security-with-software-ag-and-cequence-security/256796)
React 18, Next 12.1 and other Releases - Frontend News #24
Tags: react, frontend, javascript, strapi
Published: 2022-04-20 11:19:36

{% youtube _Lt4GIerzwc %}
Guess who’s back? 😎 Watch the newest Frontend News and check what happened in the world of frontend in the last weeks 👇

What’s in Frontend News #24?
🟣 React 18 
🟣 Next 12.1 
🟣 Strapi v4 
🟣 Deno 1.20 
🟣 CSS News 
🟣 Safari 15.4 and Chrome 100
🟣 Electron 18.0 

Enjoy, you can read the article at [Frontend House](https://frontendhouse.com/frontend-news/react-18-next-update-and-other-releases-frontend-news-24)
B2B Lead Generation
Tags: b2b, leadgeneration, theleadmarket, bussiness
Published: 2022-04-20 11:05:43

The Lead Market is a renowned India-based [B2B lead generation](https://www.tlminsidesales.com/lead-generation) company established in 2016. The company offers its services to growing and small businesses. The firm has helped many international clients across the world, including the USA, Australia, and Canada. They also offer inside sales consulting, contact discovery, and campaign designing. TLM is known to invest in Human Resources to ensure that the data is well collected from the online world. At TLM, our expert team ensure that the prospecting sheet is shared with the client from the first day.
VideoCall App With WebRTC and Socket.IO
Tags: javascript, react, programming, tutorial
Published: 2022-04-20 11:00:24

This is probably the simplest solution to building your own Full-Stack Zoom Clone with Socket.IO and WebRTC.

Fork the Video-Call App hosted on GitH, and then the job’s done.

**Deployed: 🤯**
https://preeminent-lebkuchen-30de3f.netlify.app/

**Version Control + Documentation 🤐**
https://github.com/hr21don/Zoom-VideoCall-App

**License: 📝**
This project is under The BSD Zero Clause License (0BSD). See the LICENSE for more information.

**Contributions**
Contributions are always welcome...

🔹 Fork the repository
🔹 Improve current program by
🔹 improving functionality
🔹 adding a new feature
🔹 bug fixes
🔹 Push your work and Create a Pull Request
Configure Pre-commit Hook Prettier in your React Application in 1 Minute
Tags: react, javascript
Published: 2022-04-20 10:55:41

Code styling and formating are important when writing software. It's more important to make sure that your JavaScript code is readable, because well you can format the whole JavaScript code on one line.

Prettier is a code formatted compatible with languages such as JavaScript, HTML, CSS, YAML, Markdown and GraphQL, and a lot more.

It's also great if the formatting is done automatically, mostly when you are staging changes using `git`.

In the React project, install the following dependencies: 

```shell
yarn add -D prettier
```
After that, add the `.prettierrc` configuration file.

```json
{
  "arrowParens": "always",
  "bracketSpacing": true,
  "embeddedLanguageFormatting": "auto",
  "htmlWhitespaceSensitivity": "css",
  "insertPragma": false,
  "jsxBracketSameLine": false,
  "jsxSingleQuote": true,
  "printWidth": 80,
  "proseWrap": "preserve",
  "semi": true,
  "singleQuote": true,
  "tabWidth": 2,
  "trailingComma": "es5",
  "useTabs": false
}
```

If you are working with a team, make sure to agree on the rules of the configuration file. 

Next, let's add husky which simplifies the setup to use run scripts on specific git hooks. Here's an example of the `pre-commit` git hook.

```json
{
  "scripts": {
    "prepare": "husky install",
    "format": "prettier --write .",
    "test": "jest"
  },
  "devDependencies": {
    "husky": "^6.0.0",
    "jest": "^26.6.3",
    "precise-commits": "^1.0.2",
    "prettier": "^2.3.0"
  }
}
```

Create a directory called `.husky` and inside this directory add the following file called `pre-commit`

```bash
#!/bin/sh
. "$(dirname "$0")/_/husky.sh"

yarn precise-commits
```

The `yarn precise-commits` will reformat the exact code and will only deal with code formatting with `prettier`.

And the configuration is done. 

To test the configuration, try the following commands: 

```shell
git add.
git commit -m 'test commit with husky'
```

And Voilà.

*Article posted using [bloggu.io](https://bloggu.io). Try it for free.*
TemplatesKart | Free Chakra UI Components and Projects
Tags: react, webdev, showdev, chakraui
Published: 2022-04-20 10:52:43

## Project Overview
**TemplatesKart** is a powerful set of fully responsive and accessible React components and projects.

**Demo**: [TemplatesKart](https://templateskart.com)
**Github Repo**: [TemplatesKart Code](https://github.com/MA-Ahmad/templateskart)

## How I built it
- **Framework**: Next.js
- **Styling**: Chakra UI
- **Animations**: Framer Motion
- **Deployment**: Vercel

There are 2 main sections in **TemplatesKart**
### 1. ProjectsKart (6 projects)
Currently there are 6 projects. ProjectsKart provides an easy solution to getting the look you want for your website without having to mess around with too much code. User can view project pages and copy code of components.

*ProjectsKart Page*
![ProjectsKart Page](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/gqscfh2gwixlj35ig3fv.png)

*Project Page*
![Project detail page](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/9i38lluhbqoyb6qzyuup.png)


### 2. ComponentsKart (40 components)
It is a list of beautiful and responsive React components to build your application. Some of these components are extracted from **ProjectsKart** and some are built separately.

*ComponentsKart Page*
![ComponentsKart Page](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/29wcbhz4qxw9emtnv6uf.png)

*Component Page*
![Component detail page](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/d6oh62c9oz1hjwoiln3i.png)

## Why I built TemplatesKart
In 2020, I started learning **Reactjs** and I explored multiple React component libraries like **AntDesign, MaterialUI, Tailwindcss and ChakraUI**. All those libraries are great. But I found **ChakraUI** the best React component library although **ChakraUI** was new at that time. It Provides just enough to get started, implements sensible defaults, but is also very extensible and customisable. So I started using it and created multiple small projects with it. So far I built 5 to 10 projects with ChakraUI. Some projects are open source. In my new projects, sometimes i need to copy old components code from my previous projects. But it was time consuming process. Because I always need to open codebase of that specific project. So as per my needs and to make copy code process more convenient I created a **[TemplatesKart](https://templateskart.com)** website. I added all my previous open source **ChakraUI** projects and most commonly used components.  

**TemplatesKart** website is open source. Feel free to like and contribute.

**Website link:** https://templateskart.com
**Github repo:** https://github.com/MA-Ahmad/templateskart

## Screenshots

*Reviews component*
![Review component](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/gj60lxsdf4iru28iaezn.png)

*Stacked lists component*

![stacked list component](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/upm4e71xcoycwqb2p7ws.png)

## Inspiration & Thanks
[Chakra Templates️](https://chakra-templates.dev)
The open internet: The Fediverse
Tags: opensource, opendata, fediverse, openinternet
Published: 2022-04-20 10:46:13

Do you know about "The Federation", or perhaps more commonly known as "The Fediverse"? The word is a contraction of the words "Federated" and "Universe". Until very recently, I didn't know what it was, but I've come to realise that it could very well be a stepping stone towards a more open and diverse internet. 

The Fediverse consists of several independent servers known as instances. They communicate with each other via several open protocols, such as OStatus and the more recent W3C [ActivityPub](https://www.w3.org/TR/activitypub/) protocol. Trying to grasp the official W3C documents on the subject can be a bit hard despite the great use of illustrations, so I dug up a more brief explanation on the Go-Fed page: [Activity Pub at a Glance](https://go-fed.org/activitypub-glance) 

The ActivityPub protocol allow the services to publish and consume data from other instances, so even though the instances operate independently, they know about the existence of the others, working much like a DNS server.

If you take a look at the [Wikipedia](https://en.wikipedia.org/wiki/Fediverse) page about the Fediverse, you'll find that there are already a great number of Fediverse software platforms. You might already know some of them like [Diaspora](https://diaspora.social/), [Mastodon](https://joinmastodon.org/), [NextCloud](https://nextcloud.com/) and [Peertube](https://joinpeertube.org/). The software powering these platforms are free and open source, so without too much of a hassle and if you have a server at hand, you can become a social media owner, if you so desire.

# So what is it like from the user side?
I've tried visiting some of the homes of the platforms, and while I've been greatly impressed by the Fediverse idea as a whole, the software and the numbers of online instances, I've been somewhat underwhelmed by the way the instances present themselves

As an example I visited [Friendica](https://friendi.ca/) and [Mastodon](https://joinmastodon.org/), which both have nice listings of public instances (there's also [FOSStodon](https://fosstodon.org/) for FOSS - Free and/or Open Source topics). The problem is, you have no idea about what's going on inside an instance, apart from the description. 

Instead they should give people a taste of what to expect, like showing the public messages from a group of select (randomized) users. A minor tweak, but more welcoming to a potential user. Another nice thing would be, if you could choose to *push* your user to other instances, removing the need to create an account on each instance. 

But overall, I think this is so cool! I want to "Fediverse all the things!" (at least until I start worrying about server costs, heh).

Nevertheless, can't wait to dig deeper in the ActivityPub protocol once I have taken a better look at it, stay tuned :)

Links: 
[ActivityPub.rocks](https://socialhub.activitypub.rocks/)
[ActivityPub @ W3C ](https://www.w3.org/TR/activitypub/)
Today's Daily Dose of Programming Humor
Tags: jokes, dailydeveloperjokes
Published: 2022-04-20 08:00:24

---
title: "Today's Daily Dose of Programming Humor"
description: "Check out today's daily developer joke! (a project by Fred Adams at xtrp.io)"
series: "Daily Developer Jokes"
published: true
tags: #jokes, #dailydeveloperjokes
---

Hi there! Here's today's Daily Developer Joke. We hope you enjoy it; it's a good one.

![Joke Image](https://private.xtrp.io/projects/DailyDeveloperJokes/public_image_server/images/5e1258999910d.png)

---

For more jokes, and to submit your own joke to get featured, check out the [Daily Developer Jokes Website](https://dailydeveloperjokes.github.io/). We're also open sourced, so feel free to view [our GitHub Profile](https://github.com/dailydeveloperjokes).

### Leave this post a ❤️ if you liked today's joke, and stay tuned for tomorrow's joke too!

_This joke comes from [Dad-Jokes GitHub Repo by Wes Bos](https://github.com/wesbos/dad-jokes) (thank you!), whose owner has given me permission to use this joke with credit._

<!--
Joke text:
___Q:___ Why did 10 get paid less than "10"?

___A:___ There was workplace inequality.
 -->
HackerRank | Count max concurrency of a word in given list of sentences
Tags: python, programming, solutions, discuss
Published: 2022-04-20 10:19:00

Hi Programmers,

I hope you are doing well, so in todays session we are again back with a list question of python. So let's understand the problem first then we will move further.

> input = ["i am a good programmer", "i am also a good person", "Passing with good marks is my hobby"]

> output = good : 3 times


```
new_lst = []
new_dict = {}

for sentence in input_data:
    new_lst += sentence.split()

for word in new_lst:
    if word in new_dict:
        new_dict[word] += 1
    else:
        new_dict[word] = 1
        
word_name = max(new_dict, key=new_dict.get)
word_count = new_dict[word_name]
print(word_name, word_count)
```

I hope you have got the idea how you can solve this problem. There might be more solutions for this problem if I will get any idea, i will surely update this post.

Thanks for your valuable time. You can like my post 
you can,

[By me a Coffee](https://www.buymeacoffee.com/saim783)

[My other Blog Website over Technology](https://www.saimtechnews.in)

[My YouTube Vlog Channel](https://www.youtube.com/c/abdullavlogs)
LEARNING A NEW PROGRAMMING LANGUAGE.
Tags: beginners, programming, codenewbie, leadership
Published: 2022-04-20 10:17:05

Programming, it turns out, is hard. The fundamental rules are simple
and clear, but programs built on top of these rules tend to become complex
enough to introduce their own rules and complexity.  in a way, You’re building your own
maze and you might just get lost in it.


There will be times when reading a book feels terribly frustrating. If you
are new to programming, there will be a lot of new material to digest. Much of
this material will then be combined in ways that require you to make additional
connections.
It is up to you to make the necessary effort.
 When you are struggling to follow
the book, do not jump to any conclusions about your own capabilities. You are
fine—you just need to keep at it. Take a break, reread some material, and make
sure you read and understand the example programs and exercises. Learning is
hard work, but everything you learn is yours and will make subsequent learning
easier.
 The art of programming is the skill of controlling complexity. 

A good programming language helps the programmer by allowing them to
talk about the actions that the computer has to perform on a higher level, while taking care of the unintresting details for us.
Create Minesweeper in JavaScript
Tags: html, css, javascript, webdev
Published: 2022-04-20 10:14:20

This is an ASMR coding session for a beautifully designed Minesweeper Game. You won't find a lot of videos or tutorials on how to create a duplicate of Minesweeper, and I believe that this ASMR fast keyboard typing video will teach you how to do it.

I made this video, writing the code and demonstrating the game and nothing more, and in the process I used a Perriboard 106M keyboard made in Germany and it has a gray and white colors exactly like the one I used to use in the nineties and early 2000s 

What's used in this video is only HTML, CSS and JavaScript.
No Frameworks are used.

{% youtube Yjzmu8ObY1I %}

GitHub source code : https://github.com/BekBrace/minesweeper


Social Media  
----------------------
Facebook : https://www.facebook.com/bekbrace​​​​/ 
Twitter : https://twitter.com/BekBrace/
Instagram : https://www.instagram.com/bek_brace/
DEV profile : https://dev.to/bekbrace​​​​/
GitHub profile : https://github.com/BekBrace/​​​

Reach out  : info@bekbrace.com

Tools used in video:
---------------------------------
Microphone used in recording Blue Yeti
Amazon link : https://amzn.to/3lh6GdA

Coding on PERIBOARD-106 M Keyboard
Amazon link : https://amzn.to/3qsJRWh