teleren/devto huggingface dataset:
OpenAI Codex - The Model behind GitHub Copilot
Tags: github, opensource, programming, ai
Published: 2021-07-08 06:15:44

OpenAI has released the research paper,

>**"Evaluating Large Language Models Trained on Code"**

Which powers **Codex**, a highly improved **Autoregressive language model** than the 3rd generation **Generative Pre-trained Transformer** (GPT-3) language model.

**Codex** is much improved than GPT-3 due to its model been trained on a dataset that includes a much larger concentration of public source code from GitHub.

**Codex** has been fine-tuned on publicly available code from GitHub, and study its Python code-writing capabilities.

An evaluation harness for the **HumanEval problem solving dataset** from the research paper is also available on **OpenAI Github repository**.

>**"A distinct production version of Codex powers GitHub Copilot" says the paper**

Which explains that the sucessor of **Codex** is used to train on code dataset from **GitHub** repositories for the **GitHub Copilot** project.

![image](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/1doiga28dxjnwyd32o7v.png)
 

**The paper claims it has solved 10,000 competitive programming problems and problems from open source projects related to Continuous Integration.**

The paper concludes,

>**"We found that our models displayed strong performance on a dataset of human-written problems with difficulty level comparable to easy interview problems"**

About data collection, the paper says,

>**"Our training dataset was collected in May 2020 from 54 million public software repositories hosted on GitHub, containing 179 GB of unique Python files under 1 MB. We filtered out files which were likely auto-generated, had average line length greater than 100, had maximum line length greater than 1000, or contained a small percentage of alphanumeric characters. After filtering, our final dataset totaled 159 GB"**

**The economic impact that CODEX going to do will be observed in programming related jobs in future by improving productivity of the coder and also a change in Competitive Programming World.**

**Where may be the difficulty level of coding questions will be increased or may be Competitive Programming will be left alone to AI and Humans have to focus on much higher level of problem solving than that of just writing repeatable codes.**

Check out the following resources,

Link to the paper : [https://arxiv.org/abs/2107.03374](https://arxiv.org/abs/2107.03374)

OpenAI Github repository : [https://github.com/openai/human-eval](https://github.com/openai/human-eval)

Personal Blog @ [danyson.github.io](https://danyson.github.io)
Top Challenges of Remote Working and their Solutions
Tags: productivity
Published: 2021-07-08 06:10:17

Remote working is the need of the hour in this pandemic age. But, this method is not free of challenges. A recent report from the United Nations International Labor Organization has revealed that though employees are more productive during remote working, they are more vulnerable to working for more time, interference between work and home, and even more stress. A remote work tool is helpful in addressing these challenges. But, it is necessary to understand the impact of these challenges to overcome them more effectively.

As a remote worker, you can remain more productive by meeting these challenges. Let’s go through the major challenges of remote working and their solutions.

<h2>Biggest Challenges of Remote Working for Your Enterprise</h2>
<h3>1. Overworking</h3>
Too much working is the reality of the remote work concept. When personal and professional lives coincide under the same roof, chances are high that your team members may find it hard to switch off. When to start and end the workday is a difficult question for remote workers. It is possible that several members forget to take breaks and stop work after a specific time.

Remote workers can set appointments for the end of the day on their calendars or schedules. Also, it is better to set up reminders to take necessary breaks at specific intervals. Thanks to advancing technology, a team task management tool can show all the team members the status of every member’s work.

<h3>2. Distractions</h3>
When people work from home, they get multiple interruptions including very young kids and pets. It is almost impossible to make them understand that you are not available to play, and therefore, it becomes a cumbersome task to stay away from them during working hours. All remote workers or working from home employees face such distractions all the time.

<b>Original Source : <a href="https://www.taskopad.com/blog/remote-work-challenges-and-solutions/">Remote Work Tool</a> </b>
HTML tags | main
Tags: html, tags, main
Published: 2021-07-08 06:07:28

It is used to **indicate the main content** of a document. There can only be one per document (unless it has the `hidden` attribute) and **it cannot descend** from an `<article>`, `<aside>`, `<footer>`, `<header>` or `<nav>`.

Its **content must be unique**, it must not include elements that are repeated in other documents such as sidebars, links to navigate, copyright information, site logos, search forms ...

It does not contribute to the outline of the document, so it is purely informative.

It has an **implicit ARIA role** `main`, although to maintain compatibility with older browsers the redundant formula of `<main role="main">` can be used.

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

[Definition and example](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/main) | [Support](https://caniuse.com/mdn-html_elements_main)
Using loading animation on websites : Blazor Examples
Tags: blazor, spinner, webdev, webassembly
Published: 2021-07-08 05:53:12

In this video we will discuss how to display loading animation in a Blazor web application.

In a real world there are many usecases where we need a loading spinner or indicator. For example

Your app is processing a report and it takes a few seconds to complete or
A server-side REST API is being called and it's taking a few seconds to retrieve data maybe because of a slow network connection, server busy or just because you are retrieving lots and lost of data.
Whatever maybe the case, if your app is taking a bit of time to do something it's better to display a loading indicator so the enduser knows the application is busy processing the request and not frozen.

[Syncfusion Blazor Spinner Component](https://www.syncfusion.com/blazor-components/blazor-spinner "Syncfusion Blazor Spinner Component")

Blazor Spinner - Simple, Animated Circular Progress Indicator
1. Show indeterminate progress indicators.
1. Utilize built-in support for theme-based spinners.
1. Customize spinners’ appearance, labels, size, type, z-index, and overlay.

{% youtube tERsRtmRAe0 %}
GrandNode 2.0 - versatile e-commerce designed for the next-gen companies
Tags: dotnet, html, mongodb, ecommerce
Published: 2021-07-08 05:47:14

---
title: GrandNode 2.0 - versatile e-commerce designed for the next-gen companies
published: true
description: Our versatile, next-generation e-commerce platform is finally ready to be used in production. Modern codebase, layered product architecture, headless, modern tech-stack. Take benefits from the most advanced and the best e-commerce platform based on .NET Core 5 and MongoDB.
tags: dotnet, html, mongodb, ecommerce
cover_image: https://grandnode.com/content/images/thumbs/60e2c26e38881d3844c262ff_grandnode-20-versatile-e-commerce-designed-for-the-next-gen-companies.jpeg
---

Our versatile, next-generation e-commerce platform is finally ready to be used in production. Modern codebase, layered product architecture, headless, modern tech-stack. Take benefits from the most advanced and the best e-commerce platform based on .NET Core 5 and MongoDB.

If you want to be involved in open-source community, join us at [the project site](https://grandnode.com/downloads).

We are very proud to introduce our new project - we've been working on it for a long time - it's one of the most important projects in our history. As GrandNode is a versatile e-commerce platform, we needed to have freedom in its development and the direction of it. It was possible only with a platform written from scratch. And that is how GrandNode 2.0 was born.

You can get it directly from the Download page on our website or from our GitHub profile.

###Why GrandNode 2.0?
* Open-source - It's still one of the most important values. It is and will always be free and open-source without hidden costs, license terms, etc.
* Modular codebase - Limitless flexibility in the case of customization, personalization. Possibility to bring tailored, advanced projects.
* Layered Product Architecture - GrandNode 2.0 is divided into smaller, logical projects. Separation of the business layer, separation of the back from the frontend.
* Headless - Frontend & Backend WebAPI. Separated admin panel from the public store and implementation of different APIs.
* Modern tech-stack - .NET Core 5, MongoDB, Vue.js, Docker, MongoDB, Open API, Redis, RabbitMQ.

###What can we expect from GrandNode 2.0 in practice?
* Frontend & Backend API 
* Multi-tenant
* Advanced order & inventory management
* MongoDB, AWS DocumentDB & Azure CosmosDB support
* .NET Core 5.0 support

GrandNode 2.0 comes with a lot of changes. Starting from July, we will release a bunch of white papers that will bring new light to the project. Those white papers will show proof of what we write in the press releases. In the next few days, we will release a new documentation page for GrandNode 2.0. After store owners docs, we will release a new docs for developers with simple plugins examples and the new Backend & Frontend API docs.
The Pomodoro technique
Tags: productivity, learning, career, beginners
Published: 2021-07-08 05:08:16

You must have heard about it a lot. You must have tried. You may have found it too much. You may have stopped. But the Pomodoro technique is timeless and scientifically backed. So I'm here to remind you about it again with a very bite sized summary. And if you have read the previous posts in this series, you will have a general idea how regular reminders are helpful.

###Pomodoro
* **25 mins of focus, 5 mins of rest** - together known as 1 round of Pomodoro 
- no hard rule, go slightly longer if it suits you but not too long. Some studies show that **52-17 works pretty well too**.
- use a timer/stopwatch to repeat. Or use [Tomatoes](http://www.tomato.es/). For people like me who are on the laptop all day, websites are better than any stopwatch or mobile app.
- good way to prevent procrastination as its difficult to lose focus in 25 mins
- **start with the hardest task** in every Pomodoro and then move on to easier tasks. You will be at the peak of your focus after that short much needed rest.
- **Rest time** means you **do not do anything brain intensive**. Do not look at your phone or read articles on the web. Maybe close your eyes or get something to eat or walk around in the house. Try to **avoid pen, paper and screen at all costs**.
- You do not have to do Pomodoro all day. You **only do it when you need to work** and its fine to do other stuff in between. E.g. you can work for 1 hour doing 2 rounds of Pomodoro - watch an episode of your favorite show - get back to work
- Just know that 25 mins of focus and 5 mins of complete rest is your strategy whenever you sit down to work.
- Sometimes your brain will not stop thinking about the work in those 5 mins. Its fine. **Practice will make it perfect.**

---

My timer ends.

![Timer](https://miro.medium.com/max/1400/1*ZB91m3uEJ51nPNBCwSrpkA.gif)
---

You can connect with me at &nbsp;
[LinkedIn](https://www.linkedin.com/in/abh1navv)
[Twitter/@abh1navv]
(https://www.twitter.com/abh1navv)
Difference between API and Web Service
Tags: webdev, systems, architecture, functional
Published: 2021-07-08 04:24:10

Let's see what definitions says.
- API (Application Programming Interface) is a software interface that permits two applications to interact directly with each other without any user intervention.
- Web service is a collection of some open protocols and standards which are used to exchange data between systems or applications.
<hr>
Now Let's understand the differences between them.

  Web services and APIs are two of these overlapping tech terms that often get confused. you would possibly have even heard these words used interchangeably, but are they even an equivalent thing?

Here is the answer:
   An API is an interface that permits you to build on the data and functionality of potentially another application, while a web service is a network-based resource that fulfills a specific task.
   Yes, they overlap on each other: all web services are APIs, but not all APIs are web services.
 

 Contrary to what you would possibly think, APIs and web services aren't mutually exclusive. One is a subset of the other: every web service is an API — since it exposes an application’s data and it's functionality — but not every API is a web service. this is often because the definition of a web service is sort of restrictive when it involves implementation:

- <strong>Web services require a network</strong>. While APIs can be offline or online, web services must use a network.
- <strong>APIs are generally protocol agnostic</strong>. Web services usually use SOAP (but sometimes REST, UDDI, and XML-RPC), whereas APIs can use any protocols or design styles.

![API vs WebServices](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/8l2ibhi15ksgsjq8eazr.jpg)

Some of the key differences are:
- API is used for any style of communication, whereas Web service is used for only REST, SOAP and XML-RPC for communication.
- API supports both HTTP and HTTPS protocol, whereas Web service supports only HTTP protocol.
- API supports XML and JSON, whereas Web service only supports XML.
Angular Dev's first React project - Netflix clone
Tags: react, webdev, javascript, angular
Published: 2021-07-08 03:36:34

I am an angular collaborator and an avid user of Angular this is my first react project a netflix clone using react, styled components, jest tests. It uses firebase firestore as the DB if you want to run it you have to set it up using the seed data already given. To setup follow the instruction in readme and firebase.prod.js. You can also fork my [repo](https://github.com/ajitsinghkaler/netflix) or set it upto learn more.

## Few of my positive experiences

1. Creating a component in React.js is a dream components cannot be created easier than this.

1. Hooks for state management - Hooks are a really easy paradigm for state management 

## Neutral experiences

1. Styled components - Suffers from scalability problems writing styles again and again seemed weird but the scoping was great.

## Negative experiences

1. Context was weird Calling use context again and again seemed odd somehow. Maybe I'm not accustomed to it.

1. How to find right tools for the job you are trying to do. React has so many options which is great but it makes choosing the right tool that much harder.

1. How to scale react could not find good resources on it. 

## Angular apparent short comings after using React

1. State Management- It has nothing compared to hooks

1. Component creation is so hard in Angular

1. Why do we need modules. Why?

1. Angular team giving every package has taken its toll on angular innovation. Not much is tried by the community in angular.

## Angular strong suit

1. Angular basics will always be same because of the same lib use so easy to work on multiple projects

1. Angular directives there is nothing like them 

1. Angular schematics setting up libs for you is great

1. Angular Cli is the best

## CSS Management

I don't know how we got to this place in frontend but there is no great way in Angular or react to manage your CSS is important in frontend but not much attention or tooling is there for managing it

Let me know in the comments if I'm wrong about something or I need to study more I'm trying to learn other frameworks so that I know more paradigms in frontend development.
How to Create a Flutter SignaturePad Widget in 10 Minutes
Tags: flutter, dart, webdev, widget
Published: 2021-07-08 03:13:53

Get an overview of the Syncfusion [Flutter SignaturePad](https://www.syncfusion.com/flutter-widgets/flutter-signaturepad "Flutter SignaturePad") widget. This video explains how to add the Syncfusion Flutter SignaturePad package and add a SignaturePad widget to a Flutter project. It also explains how to set the background color, stroke color, stroke width, and clear the signature in the Signature Pad. You will also see how to save and open the signature as an image in mobile, web, and desktop.

SYNCFUSION FLUTTER SIGNATUREPAD
--------------------------------------------------------
Product overview: https://www.syncfusion.com/flutter-widgets/flutter-signaturepad
Documentation: https://bit.ly/3xaDAR5
API documentation: https://bit.ly/2Qw1JBa
Examples—GitHub: https://bit.ly/3cG5f57
Tutorial videos: https://bit.ly/2SK0IqG
Download free trial: https://bit.ly/3qH86zK
Package in pub.dev: https://bit.ly/3jA6ea7

{% youtube z2fx1Vg518Q %}
Project 88 of 100 - Lorem Ipsum Generator
Tags: react, javascript, 100daysofcode
Published: 2021-07-08 03:10:27

*Hey! I'm on a mission to make 100 React.js projects. Please follow my dev.to profile or my [twitter](https://www.twitter.com/jwhubert91) for updates and feel free to reach out if you have questions. Thanks for your support!*

Link to today's deployed app: [Link](https://100-react-projects-day-88-lorem-ipsum-generator.netlify.app/)
Link to the repo: [github](https://github.com/jwhubert91/100daysofreact/tree/master/day-88-lorem-ipsum)

This is part 8 of 15 in a series on building React projects by John Smilga, covered in [this 10 hour video](https://www.youtube.com/watch?v=a_7Z7C_JCyo) on Youtube.

**If you like projects like this and want to stay up to date with more, check out my Twitter [@jwhubert91](https://twitter.com/jwhubert91), I follow back! See you tomorrow for another project.**
DEV Protip: Set the Slug of your posts
Published: 2021-07-08 02:57:07

## TL;DR

When creating a post, set it's title to the slug you like and then publish it. You can change the title to the desired one later.

---

Check out the slug of this post ^ up there. Do you see it? 

The slug should have been `dev-protip-set-the-slug-of-your-posts` or something like that. But instead, it is `dev-tip-set-slug`, which is much more readable. Here, I'll show you how to set the slugs of any post.

> Note: This won't work for published posts. You have to do this when you create a new post or edit a draft.

1. **Create a Post**

    ![create-post](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/zd327wxordp2wt0yba8i.png)
    <figcaption>Click on that button at the top right</figcaption>
  

2. **Set the title of the post as the slug**

    ![set-slug](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/1762g5raj53vypysbchr.png)
    <figcaption>Choose a small, appropriate slug</figcaption> 

3. **Write your content and publish the post**

    You can continue writing your post's contents. Just make sure to not change the title. Once you finish, you can publish the post.

    Now, the slug will be generated from the post title.

    ![view-slug](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/nh48z2mi2qeoahumfsge.png) 

4. **Fix the title**

    Now, you edit the post and set the proper title, then you can click `Save Changes`. The trick here is that if you edit the title, the [slug will not be recalculated](https://github.com/forem/forem/issues/5653).

5. **Done!**

    You can continue making changes to the title, body and tags, but the slug will never change. This is supposed to be a bug, but it can be sort of useful.

    If you want, you can view the post which I showed you in this post [here](https://dev.to/siddharthshyniben/this-is-the-slug-3079)
im getting below error" Uncaught TypeError: Cannot read property 'replace' of undefined 
 while using replace() method
Tags: javascript
Published: 2021-07-08 02:55:08

document.body.append(document.createElement("textarea"));
document.body.append(document.createElement("button"));

console.log("execution started");

document.querySelector('button').addEventListener('click',function(){
  const iptext=document.querySelector('textarea').value
  console.log(iptext);
  
  const rows=iptext.split("\n");
  console.log(rows);
  
  for(const row of rows){
    const[first, second]=row.toLowerCase().trim().split("_");
    console.log(row, first, second);
    const output = `${first}${second.replace(
      second[0],
      second[0].toUpperCase()
    )}`;
    
  }console.log(output);
  
})
Creating Dark Mode
Published: 2021-07-08 02:47:19

Hi guys! 
Not sure if this is just me, but nowadays I see tonns of content and websites talking about/using a dark mode style. It is kind of on a hype side but I thought this could be a nice addition to my project and great improvement of my skills, besides the fact that this is somehow good for the eyes of my visitors and maybe is going to help me to get more visits. My website looks like this now: https://www.extremefliers.com/, it is very light and bright because of the white background.
So my question is how to create a dark mode or a day/night toggle without javaskript? Is it possible to do this by my own?
Weekly Check-In #3: Fourth Week
Tags: weeklyretro, python, opensource, gsoc
Published: 2021-07-08 02:09:20

Hi again! This is my fourth weekly check-in of my GSoC ‘21 internship in the Python Software Foundation, a little bit late I know but it will be the last time. If it is the first time reading one of my posts about my internship, you could get more information by checking the previous posts of the series.

The last week was finished the second sprint, in the meeting with all team discuss all achievements that we got and we planned how it will the next sprint, before the GSoC's first evaluation. The first evaluation is going to be next week, so this week is important to review all lessons and quizzes for any problems that may be found.

## What did you do this week?

As I said in my second blog post I was working on finishing the lessons, this time I only made   [2 PRs](https://github.com/PyAr/PyZombis/pulls?q=is%3Apr+author%3Ay-martinez+created%3A2021-06-28..2021-07-04+), but keep in mind that quantity is not meaning quality, so is still valuable if you made 1, 2 or 100 PR's, all is contribution.

## What is coming up next?

I was writing this post and I figured out that all the PR's were successfully merged, so with this I finished my [first milestone](https://github.com/y-martinez/PyZombis/milestone/2) of the internship, so it is great.

<img src="https://media.giphy.com/media/KYElw07kzDspaBOwf9/giphy.gif" alt="Celebration michael scott" />

Now that I finished it with a week grace, as I said above I am going to review all the lessons and quizzes if I will found a problem I will make a PR to solve it in the meantime also I am going to reformulate my second milestone and the issues taking account the new Brython module created.

## Did you get stuck anywhere?

For luck I didn't, I hope to maintain a rhythm like this for the rest of my internship, so see you soon. 

<img src="https://media.giphy.com/media/IwAZ6dvvvaTtdI8SD5/giphy.gif"/>
First post
Published: 2021-07-08 01:28:49

I'm a junior software engineer who has been working for around 1 and a half years now. In that time I’ve worked on different projects and learnt alot of stuff but since my memory is bad I have a tough time looking back at past things I’ve learnt and recently have lost confidence as software engineer as I can feel myself getting comfortable and complacent as time goes by. I definitely suffer from a bit of imposter syndrome as there are many experienced developers in my team and I know I still have so much to learn. I hope that I can develop a more positive mindset to overcome this.

This post is the first step for me to start documenting my journey and will hopefully help me set goals for myself in the future. If you are reading this and am in a similar position then hopefully it might give you some ideas that you can apply to your own situation as well.