teleren/devto huggingface dataset:
Tic Tac Toe
Tags: codepen, javascript, programming, tutorial
Published: 2022-08-22 13:38:37

`<p>After these changes, we’re again able to click on the Squares to fill them, the same as we had before. However, now the state is stored in the Board component instead of the individual Square components. When the Board’s state changes, the Square components re-render automatically. Keeping the state of all squares in the Board component will allow it to determine the winner in the future.</p>
<p>Since the Square components no longer maintain state, the Square components receive values from the Board component and inform the Board component when they’re clicked. In React terms, the Square components are now controlled components. The Board has full control over them.</p>
<p>Note how in handleClick, we call .slice() to create a copy of the squares array to modify instead of modifying the existing array. We will explain why we create a copy of the squares array in the next section.</p>
{% codepen https://codepen.io/samthatcode/pen/PoRVVYV %}`
How to make a Twitter-like Header in NextJS and TailwindCSS?
Tags: tailwindcss, nextjs, twitter, css
Published: 2022-08-22 13:23:48

I am making a website with a header like Twitter. I've seen that Twitter in mobile, has it's navigation panel in bottom and user panel in top and in large screen device, everything is in left. How do I do that with NextJs and Tailwind CSS ?.

This is how navbar like in large screen ==>> https://i.stack.imgur.com/XZ6QZ.jpg

And this is how navbar looks like in mobile ==>> https://i.stack.imgur.com/EmLrK.jpg

Please help me !
Code Review: Necessary Evil in Codebase and Open Source
Tags: opensource, github, javascript, codereview
Published: 2022-08-22 13:16:00

I’m sure we’ve had instances where we felt we’ve written the next best thing… just to have your lead break it down on the other side of the call, and show you a simpler way you could have gone about it. Moments like this are a pain in the ass.

The aim of the collaboration is to solve problems, while we all have different approaches to problem-solving some approaches need to be checked and inspected by either a better-experienced colleague or a peer that could help refactor. Half of the time we want to ship fast, which is understandable but we later realise the due process has not to be taken and will cost a lot more to refactor and review. 

Code review can be described as working with a fellow developer, colleague or better-experienced developer to check the code to correct the flow, process and sometimes syntax.

The Unending loop of Technical debt:

Technical debt is the cost or amount of time used to reiterate an incomplete solution or limited solution. In most cases, we ship the fastest solution but we could also take a step back and review the code and use cases for the issue.

In other cases, there would be a different approach to solving the said issue.

Code review in open source projects is critical, firstly because there are lots of contributors and what goes to the code base is really important. Poorly reviewed code could crash important services and cost the users many resources. First-time issues should also have much attention, they might have a low contribution but a lack of familiarity with the code base could ruin the previous work that’s been done by previous contributors.

## What to look out for in  Peer code review

- Functionality
- Complexity
- Separation of concerns
- Depreciated syntaxes
- Styling
- Context
- Comments
- Reusability
- Each line of code
- Enforce best practices

Tips for reviewing a teammate’s code or Open source Contribution

- Explain the problem explicitly
- Be positive and kind
- Anybody’s code can be reviewed regardless of how Senior the person is
- Give everyone a chance to learn concepts and grow
- Automate some processes
- Enforce testing before building
- Tabs > Space

Doing this due diligence will save your team a lot of time, and the negligence will also cost a lot of time. 

One of the most common tools for code review is Github pull request comment section on Github, when PR is sent every commit and line can be commented on using this section of Github. 

After every code review, the reviewer and the reviewed should make sure there’s proper functionality, UI changes are appropriate, the code is written with the best practices and the code passes all the set tests. In the case where the task is not successfully done the review should return and fix the issues then schedule another code review.
Meet New ODBC Drivers for Cloud Data Warehouses and Services
Tags: odbc
Published: 2022-08-22 13:04:53

---
title: Meet New ODBC Drivers for Cloud Data Warehouses and Services 
published: true
description: Devart rolled out 14 new ODBC drivers for Cloud Data Warehouses and Services.
tags: odbc
# cover_image: https://direct_url_to_image.jpg
# Use a ratio of 100:42 for best results.
---
Devart, a recognized vendor of world-class data connectivity solutions for various data connection technologies and frameworks, released 14 new [ODBC drivers](https://www.devart.com/odbc/?utm_source=devto&utm_medium=referral&utm_campaign=pr_odbc_22.08.2022) for Cloud Data Warehouses and Services. These drivers allow easy access to the below data sources from various ETL, BI, reporting, and database management tools and programming languages. Data access is possible on x32-bit and x64-bit Windows, as well as Linux and macOS.

Also, the drivers fully support standard ODBC API functions and data types and enable fast access to live data from anywhere.

Here is the detailed list of the sources:
**1. Cloud Data Warehouses:** Azure Synapse Analytics, QuestDB, Snowflake;
**2. Cloud CRM:** PipeDrive;
**3. Communication:** Slack;
**4. E-commerce:** WooCommerce;
**5. Help Desk:** Zendesk;
**6. Marketing:** Active Campaign, EmailOctopus, Klaviyo, Marketo;
**7. Payment Processing:** Square;
**8. Project Management:** Asana;
**9. Other Applications:** WordPress.

To learn more about the recent release, visit: 
https://blog.devart.com/14-new-odbc-drivers-for-cloud-data-warehouses-and-services-released.html 

**ODBC Drivers** are high-performance connectivity solutions with enterprise-level features for accessing the most popular database management systems and cloud services from ODBC-compliant reporting, analytics, BI, and ETL tools on 32-bit and 64-bit Windows, macOS, and Linux.

**About Devart** 
 
Devart is one of the leading developers of database tools and administration software, ALM solutions, data providers for various database servers, data integration, and backup solutions. The company also implements Web and Mobile development projects. 
For additional information about Devart, visit https://www.devart.com/.
How can laravel help developers to build a scaleable mobile application?
Published: 2022-08-22 12:47:36

With thousands to millions of websites available on the web and most of the sites use the same functionalities. So that it is difficult to choose the most convenient and useful framework for development. Hence, Laravel is an excellent framework, it is a wonderful and most advanced platform for mobile application development. For any app development, one needs to verify the proper software that consumes less time resulting in an increased revenue cycle. For that reason, Laravel is the most likely option for developers because it is very rapid and smooth. In addition, Laravel is a renowned open source framework that can provide plenty of excellent opportunities and features to develop more complex applications faster.(https://www.iacquireexpert.com/how-does-laravel-assist-in-building-scalable-mobile-apps/)
Data Science for Beginners: How to Get Started
Tags: bussiness, data, science, python
Published: 2022-08-22 12:43:00

**Data Science**
Data science is a trendy topic these days and the field is expanding quickly, but many people are unsure of what the term actually means. In this post, we'll try to clarify what data science is and how to utilise it in business analytics.
**Data**
First of all, what exactly is data? Data is omnipresent, and people are terrified of it being stolen. Data, however, is something that can teach us a significant amount about a person, a company, and international businesses.
Using data effectively in data science means developing analytical models from the data and making decisions on them.
**Data Science**
Three words—analysis, statistics, and machine learning—combine to form the term data science.

- Analysis is performed to extract the data's practical insights.
- For identifying and interpreting data patterns, statistics is used.
- Machine learning is utilized to forecast data.
Approaching the literal definition:
 Data science is the application of data to enhance decision-making to accomplish three objectives,

1. Analysis
2. Statistics
3. Machine Learning

You now understand what data Science and its uses , moving toward Which prerequisites must be satisfied before you may begin with data science.

**Tools for Data Science**


**- Python**
Other programming languages, such R, are also utilised in data science. But we'll be talking about which one is easiest to put into practice.
Python is currently gaining popularity because of how simple the syntax is while writing code in it. It can also run on a variety of devices such as Windows and Mac

**- Anaconda**
It's convenient because most of the data science packages we need are already there and are free, so we don't have to install additional programmes.

**- Jupyter Notebook**
It is a web-based Python interface that makes learning Python very simple, You can use to generate and distribute documents with text, mathematics, and live code.

**- Numpy**
It is scientific computing toolkit in Python that we use whenever we need to perform calculations.

**- Pandas**
For me, it combines Excel and SQL. its for data manipulation and analysis tool

For Machine Learning portion and the model validation:

**- Scikit-learn**
It is Python's most practical and reliable machine learning library. It offers a variety of effective methods for statistical modelling and machine learning, including  dimensionality reduction, clustering, and regression, all through a Python interface.

**- Matplotlib**
A cross-platform library for Python's numerical extension NumPy and data visualisation and graphical charting

**- Seaborn**
Built upon Matplotlib, Seaborn uses single lines to create stunning data visualisations of statistical data.

These all are open source, free tools are a cornerstone of data science,
I hope you find this blog fascinating; I hope to see you again soon.
Progressing As A Junior Developer.
Tags: javascript, beginners, webdev, motivation
Published: 2022-08-22 12:37:37

'Little droplets of water make a mighty ocean', 'Start Small and Scale'.
These are phrases we often hear about life generally, but how do these relate to the tech industry & Programming in particular?

Software Engineering is a broad field with constant change, so it's difficult for beginners to keep afloat and not get discouraged.
With new technologies at the door of being shipped out, here are some tips to help you progress and maintain relevance in the industry:

1. **Always be open to learning:** When it comes to programming, satisfaction is not an option, never think you have known it all. You would always work with a team of developers, this gives you the platform to learn from others. Always remember "Alone we can do so little, together we can do so much"

2. **Follow structured courses, not random tutorials:** Following a well-structured online course provides more value than picking up random tutorials because most of these courses are structured to take your knowledge of the language from basic to advanced while building small projects along the way, random tutorials can be good if you want to learn particular concepts, asides that focus on structured courses. Here is a link to a well-taught JavaScript course taught by Jonas Schmedtmann. [The complete javascript course](https://www.udemy.com/course/the-complete-javascript-course/)

3. **Contribute to open source:** It’s never too early to start contributing to open source projects. Open source projects provide the platform to test your knowledge in building real-world applications. Whenever you learn a new concept try testing it out by collaborating on an open source project that requires a such skill set. Here is a resource on where to get engaging open source projects to contribute to [Opensource-guide](https://opensource.guide/how-to-contribute/)

4. **Build, Build & Build:** The only reliable way of testing your knowledge is by building projects, don't just watch tutorials alone, try to implement what you have learned in multiple ways. Try rebuilding the project taught in the tutorials without consulting the material itself. Try building something different using the knowledge gained from the tutorial, this helps determine if truly the concepts explained have been understood.

5. **Be open to failures:** Yes, you read that right! Studies have shown that when we repeatedly fail, our brains develop faster using the information from previous failures to avoid future recurrence. So it's okay not to understand the concepts at first read.

## **Maintain Grit & Keep at it!**
_"Success lies in doing the simple things well enough to succeed"_


Cover Image from [DreamLens Production](https://www.pexels.com/photo/man-wearing-blue-shirt-standing-on-cliff-while-watching-mountain-2450296/)
From in Formik unable to properly validate inputs
Tags: react, formik, yup, javascript
Published: 2022-08-22 12:34:39

Please find the attached code below,The main issue with the code is that the form isn't handling inputs properly. If the value of the input is valid, it constantly reads it as if there is no input to begin with. The form is done using Formik and validation on Yup. 

I believe the issue is with the onChange filed however i do not know how to fix this issue. 
[Codesandbox of the code](https://codesandbox.io/s/create-customer-form-using-formik-and-yup-zx7m3v)
Co-create a new Web 3.0 solution
Tags: web3, blockchain, ux
Published: 2022-08-22 12:33:00

A tech startup is looking to work with Web 3.0 Developers to co-create their new product and are looking to do interviews to understand your needs. 

The interview will take up to 45 minutes and has an incentive of $1 per minute.

[Join here](https://www.lightster.co/sign-up-web/)
How to size user stories
Tags: agile, productivity
Published: 2022-08-22 12:25:20

## For bulletproof user story sizing, there are two strategies. Estimate the size of user stories or, do not estimate the size of user stories.

Estimating story sizes suck. Do your teams use guesswork to estimate story sizes? Are estimates always way off? Is your sprint velocity erratic? Do your sprints never get completed? Do you struggle to get engagement from your team during estimation? All of these are not uncommon problems, you’re not alone.

Over 10 years, I’ve seen success in improving many of these issues, using the following strategy. Ask the team which they prefer;

1) Estimating user stories

-or-

2) Resizing user stories (not estimating, resizing)

Estimating user stories

If you are going to estimate the size of your well-groomed user stories, take it seriously. Get better at doing estimates. Emphasise getting more accurate over time. Use a consistent method to do estimates. Three things will help you get better estimates if you keep the method consistent.

1. A golden reference story that is 3 points. This stays with the team forever. Or until you find another golden reference story that is 3 points,
2. A reference story from the last sprint that was sized right, but not 3 points.
3. A matrix where the point size of a story is the intersection of complexity and effort, relative to story 1 and story 2. Use the matrix below;

![user story size matrix, where size is an intersection of complexity and effort coordinates](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/voy372cdwg6k8f53fxwe.png)

The axes on that matrix prompt thought and conversation when doing a relative comparison of one story to one already sized right. Try it out yourself, you’ll understand what I mean.

## Sizing user stories

This isn't estimating the size of a story. No estimating involved. The activity is resizing the stories. Put the effort into grooming and organising stories so all stories are small enough.

Let's say they are all "3 arbitrary points". Then we don't need to do estimates ever again - it's always 3ish points and that's fine. As long as the right amount of care and thought has been applied to breaking down stories into small, consistently sizes pieces.

You will know if you're sizing stories right based on regular metrics such as velocity.

I hope these ideas help you form your thoughts on how to make estimating story sizes suck less.

Next...

* [How to create better User Stories with a User Story Style Guide](https://deanburge.com/bulletproof-user-story-style-guide/)
* [The famouse Agile As F@#K T Shirt](https://deanburge.com/shop/)
JavaScript Full-Stack
Tags: javascript, node, express, mongodb
Published: 2022-08-22 12:16:55


So... you know how to program your backend using Ruby and SQL. Is there any other way to build a backend? There certainly is!

In this blog post I will explore, MERN, a web development stack that only requires knowledge of Javascript and JSON.


![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/qzadncacpd211ftt45vi.png)

## What is MERN?

MERN is an acronym that stands for mongoDB, Express.js, React, and Node.js. In other words--the database, the backend framework, the frontend library and the runtime environment.

## How does MERN work?

To understand how MERN works, we must take a more in depth look at each MERN element. Let's move through MERN back to front.

## Node.js

First comes Node.js, without it, JavaScript would only be allowed to run in the browser. Node allows for JS to exist in our files and open-source packages, awaiting the signal to execute.

"Node.js is an open-source, cross-platform, back-end JavaScript runtime environment that runs on a JavaScript Engine and executes JavaScript code outside a web browser, which was designed to build scalable network applications." - Wikipedia https://en.wikipedia.org/wiki/Node.js

where did node come from?

In 2009, software engineer Ryan Dahl took built a runtime environment for JS outside of the browser using C++ and Google's V8 JS engine.

## React

Second comes React, a JavaScript library that makes building a modern interactive front end easier. React allows for more dynamic and versatile applications through its ability to control state.

React can be run without Node.js, but if a developer wants to use dependent libraries, or dependencies, they must install them using node.

## Express.js

Third: Express.js, which is used as our backend framework. Express.js allows developers to create a fully featured server using JavaScript.

Familiar JS syntax can be used in a developer's code editor.


![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/dee17k1h92p9sevb8fyq.png)


## mongoDB

Finally, we have MongoDB which is MERN's database.

It's a no-sequel and non-relational database. This means that the database is not immediately configured for SQL or strictly predefining datatypes. Mongo is structured using objects with key/value pairs.


![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/m19ik025kcutqfrj0lq5.png)

The benefits to using MERN are:

1. Large node ecosystem for open source libraries

2. Constrains your web app to JS (React front end)

3. MongoDB essentially uses JSON


![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/zo0fwxkzyblxcbwbyzr2.png)
Deploying a Node.js App with AWS Elastic Beanstalk
Tags: aws, node
Published: 2022-08-22 11:41:30

Amazon's Elastic Beanstalk makes it easy to deploy and scale your applications with load balancing, health monitoring, & auto-scaling. In this blog, I will walk you through how to deploy a Node JS application with AWS Elastic Beanstalk.

**Step 1 - Creating a Simple Node JS Application**
We can use the **express-generator** tool to whip up a quick Node application by creating a new directory and running the following command inside it:
npx express-generator

![Uploading image](...)







class Human {
 protected name: string="person-one";
 protected age: 21;
  constructor(name: string="person-one", age : 21) {
    this.name= name;
    this.age = age;
}
}
class Employee extends Human {
   protected department:string="computer-science";
   protected batch:string="2019";
   protected role:string="Trainee";
 constructor(name:string="person-one",age:21,department:string="computer-science",batch:string="2019",role:string="Trainee"){
    super(name,age);
    this.department = department;
    this.batch=batch;
    this.role=role;
}
getInfo(){
console.log("Name: " +this.name);
console.log("Age: " +this.age);
console.log("Department: "+this.department);
console.log("Batch: "+this.batch);
console.log("Role: "+this.role);
}
}
I created an App to help you get/change jobs as a Dev
Tags: javascript, programming, career, flutter
Published: 2022-08-22 11:40:00

Hey Guys!

Recently, I have moved to this Mobile Developer job in Europe, and during this preparation and selection process I created an app to initially help me perform better in interviews and as it worked for me I decided to publish it in stores, and today I came to share it with you.

Well, with this idea of ​​performing better in interviews, I created Codict (Code + Addict) and it is basically a tool that helps you to:

- Practice technical challenges separated by difficulty and played directly from your cell phone, without internet (think of a code wars, which works offline and gives you xp that unlocks other levels if the answer is correct)

![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/2c5yxre3uefz2phx4bc4.png)

- Hundreds of questions with explanations, separated by seniority level, of what is the most asked in the market today, in addition to soft skills questions


![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/el8xesik4t3zb2ajdp13.png)
- Interview simulator, here you basically select the questions from the previous feature, and "simulate an interview" being able to choose what type of questions will "fall" in the interview, stack, question level, if you have already reviewed that question or not and etc. .

![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/1q2anv67bkismgmidpib.png)

If you are looking for your first job, or trying to get to a better place, I think Codict can help you a lot! As I said before I was his first "tester" haha ​​and it helped me a lot during my selection processes (I ended up passing on the X-Team and for this company I am now!)

He's still an MVP, so if you have any suggestions, you can send them to me here :)

Links:

[Google Play](https://play.google.com/store/apps/details?id=com.codict)

[App Store](https://apps.apple.com/br/app/codict-learn-code-interview/id1639553351)

[Video with a summary of the features](https://www.youtube.com/watch?v=ZGjufm6jByg)


tldr: I created an app to help me during my selection processes, which ended up helping me a lot and now I decided to publish it in stores.