teleren/devto huggingface dataset:
Starting Coding? Here are Tips to make you Better at Coding
Tags: webmaster, career, bettercoding, codinglanguages
Published: 2023-06-27 11:41:21

---
title: Starting Coding? Here are Tips to make you Better at Coding
published: true
date: 2022-11-05 03:23:48 UTC
tags: Webmaster,Career,bettercoding,codinglanguages
canonical_url: 
---

As a new developer, you probably want to improve your skills constantly. You want to be the best developer you can possibly be. But how you can actually improve is a tricky question to answer.

We have curated top tips to make you get better in coding. Happy read!

## **Be a problemsolver**

Youtube can be great, but it is easy to get stuck watching tutorials and substitute than for building yourself.

It’s important to know how you would solve a problem by yourself. Problem-solving is 99% of coding.

## **Build something small every day.** 

This is a real shortcut to really up your skill level.

Working on projects is also a great way to build your portfolio.

## **Learn how to read documentation early on**

This will open many doors, and it will be easier for you to update your knowledge as technology changes.

## **Concepts > Syntax**

Concepts for example OOP, functional programming and separating the Render Logic (visual) from the data / business logic.

Syntax can be Googled anytime.

## **Coding should be the last step.**

Break the problem down first , how would you solve the problem as a human? This can give you clues as how to implement in code.

![Sketch first before coding](https://blog.tuplea.com.ng/wp-content/uploads/2022/11/Sketch-first.jpg)
_Sketch first before coding_

## **Learn about the hardware.**

How do computers work? How code gets translated to CPU instructions, HTTP, GPU parallelism etc. This will help you to understand why the code works the way it does.

## **Resist the urge to switch to new frameworks.** 

Initially avoid using new shiny frameworks until you have a good foundational understanding of how programming languages and platform technologies work.

## **Sample different aspect of software engineering** 

![backend development](https://blog.tuplea.com.ng/wp-content/uploads/2020/11/backend-development.jpg)

Explore software engineering in separate contexts: Graphics, Audio, CRUD, Games, Machine Learning. Understanding multiple areas can help you generalise concepts and apply them anywhere.

## – **Be consistent.**

The most important thing is to be consistent. Coding is difficult and progress will not happen overnight.

Don’t be afraid to make mistakes and experiment!

Have any question or in need of any help? We are always here for you. Drop it in the comment section.

<p>The post [Starting Coding? Here are Tips to make you Better at Coding](https://blog.tuplea.com.ng/starting-coding-here-are-tips-to-make-you-better-at-coding/) first appeared on [Tuplea ICT Concepts Blog](https://blog.tuplea.com.ng).</p>
The Underpinnings of Data Analysis
Published: 2022-11-05 00:44:32

**<u>The basics of data analysis: what it is and why it's important.
</u>**
Data analysis is the process of inspecting, cleansing, transforming, and modelling data with the goal of discovering useful information. As organisations increasingly rely on data-driven decision-making, a basic understanding of data analysis techniques is essential for anyone looking to make sense of data and use it to improve their organisation's performance. There are a variety of different data analysis techniques, each with its own strengths and weaknesses. Understanding the basics of data analysis can help you choose the right technique for your specific needs and goals.



**<u>The data analysis process: how to go about conducting effective analyses.</u>**

Before you can begin any data analysis, you first need to understand what you are hoping to achieve. Are you looking for specific trends in your data? Trying to identify relationships between variables? Figuring out how a certain event impacted another variable? Defining the problem and the goals of the analysis will help guide you in collecting and organizing your data.

Once you have collected all of the relevant data sets, it's time to start sorting and organizing them into useful pieces. Try to group related data, separate extraneous information, and make sure that each piece of data is as accurate as possible. It's also important to keep track of which variables were used in which analyses so that you can properly interpret your results.

Once your data has been sorted and organised, it's time to choose the right methods of analysis based on what type of data you have gathered and what type of information you are looking for. There are dozens (if not hundreds) of different statistical tests available, so it can be difficult to decide which one is best suited for your situation. However, understanding which types of analyses are available will help narrow down your options!

Finally, it's important to carry out your analysis and interpret your findings using context clues from the original question or hypothesis. Sometimes simply comparing two groups or analysing individual values can provide enough insight for a proper conclusion!


**<u>Essential skills for data analysts: what you need to know to be successful in this field.</u>**

In order to be successful as a data analyst, you need to have strong critical thinking skills, mathematical and statistical analysis abilities, and exposure to some computer science concepts could potentially prove beneficial. Additionally, you need to be able to effectively communicate your findings to those who may not have a background in data analysis. To work with large and complex data sets, problem-solving skills are essential. Finally, continuing learning is important for any field – especially for a field like data analysis which is constantly evolving and changing.
Bootstrap-Italia Design Kit with NextJS app
Tags: bootstrap, designkit, nextjs
Published: 2022-12-28 10:03:49

---
title: Bootstrap-Italia Design Kit with NextJS app
published: true
date: 2022-11-05 00:00:00 UTC
tags: bootstrap, designkit, nextjs
canonical_url: https://blog.robertoconterosito.it/posts/bootstrap-italia-design-kit-with-nextjs/
---

This guide will help you throught the process of configuring [bootstrap-italia](https://github.com/italia/bootstrap-italia/) in your NextJS app

> During this process you will probably face errors related to unrecognized static assets (csv, svg, fonts etc.) that can be solved quite simply in NextJS app using specific webpack config and NextJS components.

## Install Bootstrap-Italia

First of all, install bootstrap-italia in your NextJS app:

```
npm i -S bootstrap-italia

```

## Configure Webpack

Now you have to install a plugin, `copy-webpack-plugin`, required to move static assets from the `node_modules` folder (boostrap-italia) in to the project build folder using webpack:

```
npm i --save-dev copy-webpack-plugin

```

This will install a new plugin that we have to use inside our next.config.js:

```
const CopyPlugin = require("copy-webpack-plugin");
const path = require("path");
// Prepare from/to
const from = "node_modules/bootstrap-italia/dist/";
const to = path.join(__dirname, "./public/bootstrap-italia/dist");
const nextConfig = {
 webpack: (config, { buildId, dev, isServer, defaultLoaders, webpack }) => {
 config.plugins.push(
 new CopyPlugin({
 patterns: [{ from, to }],
 })
 );
 return config;
 },
};
module.exports = nextConfig;

```

Next time you run your app you will see a new folder, inside public, called bootstrap-italia with all assets required to work with NextJS app.

You can choose to copy these files statically executing a Copy/Paste operation but I prefer this solution to automatically include updates when necessary (when the bootstrap-italia package will be updated).

## Configure \_app.js

Import basic CSS globally in \_app.js adding this code on top of the file:

```
import "bootstrap-italia/dist/css/bootstrap-italia.min.css";

const App = ({ Component, pageProps }) => {
 return <Component {...pageProps} />;
};
export default App;

```

## Configure Script TAG

Supposing you have a common set of elements necessary to display your page and there exists a file called Layout where all the UX logic starts, you have to add a link to the javascript bundle required by bootstrap-italia to work correctly with you project, like in the example below:

```
import Header from "./Header";
import React from "react";
import Script from "next/script";
const Layout = ({ children }) => (
 <div>
 <Header />
 {children}
 <Script src="bootstrap-italia/dist/js/bootstrap-italia.bundle.min.js" />
 </div>
);
export default Layout;

```

Now you are ready to see a running NextJS app with bootstrap-italia UX.
03.03 - State & Props - Send counter data through multiple components (class components)
Tags: react, webdev, tutorial, programming
Published: 2022-11-04 22:29:25

App preview:
![The way the app will look like](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/y27zhxaup1bc6zsepm1n.gif)



Project files:
![An image of project file structure](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/5am75fayf4vjmfp16e71.png)



<hr/>
src/App.js
```react
import React from "react"
import ParentComponent from './components/ParentComponent';
import './App.css';

class App extends React.Component{
  constructor(props){
    super(props);
    this.state = {
      count: 0,
    }
  }

  handleClick = () => {
    this.setState((prevState)=>({count: prevState.count + 1}))
  }
  
  render(){
    return(
      <div className="App">
        <h1>App.js</h1>
        <button onClick={()=>{this.handleClick()}}>Click Me</button>
        <ParentComponent count={this.state.count}/>
      </div>
      
    )
  }
}

export default App;
```
<hr/>
src/App.css
```css
.App{
  background-color: lightskyblue;
  padding: 20px 10px;
}

h1{
  margin-top: 0px; 
  margin-bottom: 6px 
}

button{
  margin-bottom: 6px; 
}
```
<hr/>
<hr/>
src/components/ParentComponent.jsx
```react
import React from "react"
import ChildComponent from "./ChildComponent"
import "./ParentComponent.css"

class ParentComponent extends React.Component{
    constructor(props){
        super(props);
    }

    render(){
        const {count} = this.props

        return(
            <div>
                <div className="ParentComponent">
                    <h2>ParentComponent.jsx</h2>
                    <ChildComponent count={count}/>
                </div>
                
            </div>
        )
    }

}

export default ParentComponent
```
<hr/>
src/components/ParentComponent.css
```css
.ParentComponent{
    background-color: lightsalmon;
    padding: 10px 10px;
}

h2{
    margin-top: 0px; 
    margin-bottom: 6px 
}
```
<hr/>
<hr/>
src/components/ChildComponent.jsx
```react
import React from "react";
import "./ChildComponent.css"

class ChildComponent extends React.Component{
    render(){
        const {count} = this.props;

        return (
            <div className="ChildComponent">
                <h3>ChildComponent.jsx</h3>
                <p>The value of count is {count}.</p>
            </div>
        );
    }
}

export default ChildComponent;
```
<hr/>
src/components/ChildComponent.css
```css
.ChildComponent{
    background-color: lightgreen;
    padding: 10px 10px;
}

h3{
    margin-top: 0px; 
    margin-bottom: 6px 
}
```
Flatiron School, Four Days Later
Tags: javascript, beginners, programming
Published: 2022-11-04 23:35:55

#If you have landed on this post, thank you for reading#



My name is Nathan. I live in a suburb of Southern Maryland, a few hours away from Annapolis, DC, and Baltimore (in that order). As a kid, I was always into technology. From the days of playing Pajama Sam and Space Cadet Pinball on Windows XP, to experimenting with pretty much every modern mainstream video game console that's been released in the 22 years I've been alive. That was a mouthful... I even remember being the unofficial IT guy for several of my teachers over the years. 

In High School, I began my technology journey by taking part in a Cisco Networking Academy class. I was even able to obtain the CCENT certification for entry-level networking (now known as the CCNA certification). Of course, I graduated High School right before the pandemic turned the world upside down. Having also dealt with the death of both my Grandma and Brother in that time, plus a slow start at two colleges and a short, crappy convenience store job, I was at a low point.

After starting a new IT job at the beginning of last year, I've opened myself up to all sorts of technology avenues. That is what lead me to coding bootcamps, with the New York-based Flatiron School catching my particular attention. This is why I write today, as it's a graduation requirement.

Of course, I am quite a wizard with words when it comes to writing this candidly. If you choose to join me on my journey, be aware that I do ramble and run-on in my writing quite a bit.

I unfortunately have no code to share today. I just wanted to share my thoughts while typing on this new MacBook I bought at Best Buy earlier today. Damn good keyboard, too.

Thank you for reading. I hope to be a bit more useful in my posts in the future.
How can I be the next Mark Zuckerberg?
Tags: help
Published: 2022-11-04 22:54:23

Hello there, I've an idea. I really want to work on it. So, It I will be very glad If any senior developer can help me out with some of my query and give a quick guide.

**I want to develop a website where a large number of users can sell and buy stuffs and also can have chat and post something.**

_Currently I'm familiar with_

- React.js

- Node.js

- mongodb

- firebase

Should this is enough to build such website for a large number users. If not then what else should I learn and if mongodb is enough for the database?
03.04 - State & Props - Send counter data through multiple components (functional components)
Tags: webdev, react, tutorial, programming
Published: 2022-11-04 22:29:31

App preview:
![The way the app will look like](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/3awlu6yenv2xp74tnr5q.gif)



Project files:
![An image of project file structure](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/azxr2x8feuh131hwvhr7.png)



<hr/>
src/App.js
```react
import React, {useState} from "react"
import './App.css';
import ParentComponent from './components/ParentComponent';


const App = () => {
  const [count, setCount] = useState(0);

  return(
    <div className="App">
      <h1>App.js</h1>
      <button onClick={()=>{setCount(count+1)}}>Click Me</button>
      <ParentComponent count={count}/>
    </div>
  )
}

export default App;
```
<hr/>
src/App.css
```css
.App{
  background-color: lightskyblue;
  padding: 20px 10px;
}

h1{
  margin-top: 0px; 
  margin-bottom: 6px 
}

button{
  margin-bottom: 6px; 
}
```
<hr/>
<hr/>
src/components/ParentComponent.jsx
```react
import React from "react"
import ChildComponent from "./ChildComponent"
import "./ParentComponent.css"

const ParentComponent = (props) => {
    const {count} = props;

    return(
        <div className="ParentComponent">
            <h2>ParentComponent.jsx</h2>
            <ChildComponent count={count}/>
        </div>
    )
}

export default ParentComponent
```
<hr/>
src/components/ParentComponent.css
```css
.ParentComponent{
    background-color: lightsalmon;
    padding: 10px 10px;
}

h2{
    margin-top: 0px; 
    margin-bottom: 6px 
}
```
<hr/>
<hr/>
src/components/ChildComponent.jsx
```react
import React from "react";
import "./ChildComponent.css"

const ChildComponent = (props) =>{
    const {count} = props;
    return (
        <div className="ChildComponent">
            <h3>ChildComponent.jsx</h3>
            <p>The value of count is {count}.</p>
        </div>
    );
}

export default ChildComponent;
```
<hr/>
src/components/ChildComponent.css
```css
.ChildComponent{
    background-color: lightgreen;
    padding: 10px 10px;
}

h3{
    margin-top: 0px; 
    margin-bottom: 6px 
}
```
03.02 - State & Props - Send counter data to child component (functional components)
Published: 2022-11-04 22:29:15

App preview:
![The way the app will look like](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/3cezuqd3stgc8ox4vb1f.gif)

Project files:
![An image of project file structure](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/bl36w6uiq7wcnrd8gs6i.png)



<hr/>

```react
import React from "react";
import './App.css';
import ParentComponent from "./components/ParentComponent";

function App(){
  return(
    <div className="App">
      <h1>App.js</h1>
      <ParentComponent/>
    </div>
  )
}

export default App;
```
<hr/>
src/App.css
```css
.App{
  background-color: lightskyblue;
  padding: 15px 10px;
}

h1, h2, h3{
  margin-top: 0px; 
  margin-bottom: 6px;
  padding-top: 0px;
  padding-bottom: 0px;

}
```
<hr/>
<hr/>
src/components/ParentComponent.jsx
```react
import React, { useState } from "react";
import ChildComponent from "./ChildComponent"
import "./ParentComponent.css"

function ParentComponent(){
    const [counter, handleClick] = useState(0);
  
    return (
      <div className="ParentComponent">
        <h2>ParentComponent.jsx</h2>
        <button onClick={()=>(handleClick(counter+1))}>Click me</button>
        <br/><br/>
        <ChildComponent count={counter}/>
      </div>
    );
  }

export default ParentComponent;
```
<hr/>
src/components/ParentComponent.css
```css
.ParentComponent{
    background-color: lightcoral;
    padding: 15px 10px;
  }
```
<hr/>
<hr/>
src/components/ChildComponent.jsx
```react
import React from "react";
import "./ChildComponent.css"

function ChildComponent(props){
    const {count} = props;

    return(
        <div className="ChildComponent">
            <h3>ChildComponent.jsx</h3>
            <p>The value of count is {count}.</p>
        </div>
    )
}

export default ChildComponent;
```
<hr/>
src/components/ChildComponent.css
```css
.ChildComponent {
    background-color: lightgreen;
    padding: 15px 10px;
}
```
Cryptopals #46: want a write-up?
Tags: node, cryptopals, rsa
Published: 2022-11-04 22:24:45

I wonder if anybody is interested in https://cryptopals.com/sets/6/challenges/46 write-up? I'm finishing it with Nodejs, and it seems like you can easily find code for the challenge, but no actual write-up in English.

It's mostly about how artificial it is (they warned) so I couldn't find a realistic something in OpenSSL or <Crates.io> to act as victim.
Day 651 : Travellin' Man
Tags: hiphop, code, coding, lifelongdev
Published: 2022-11-04 21:31:09

_liner notes_:
- Professional : Got up early to record a video presentation for my hackathon project. Recording the video was the hardest part of the whole project. haha The recording came out super crooked for some reason, but it was good enough. I was able to rotate the video so that it was straightened out, but looked a little funny. I got what I needed and submitted it. Rest of the day, worked on upcoming talk and other stuff. Pretty chill and productive day.

- Personal : Basically spent last night working on the script for my hackathon presentation and slides. Didn't even watch any anime!

![A pointed cliff with some grass on white stone sticking out into the ocean in Zarautz, Spain](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/a3appxcb24jf7z8sz541.png)

Going to work on the radio show and see if I can get caught up with my anime shows. I may work on my side project. Definitely want to take it easy. I'll be a travellin' man in the next couple of weeks, so there may not be any updates to the blog, but I'll be posting on my travel site: https://dwane.in .

Have a great night and weekend!

peace piece
Dwane / conshus
https://dwane.io / https://HIPHOPandCODE.com
{% youtube p2YUDZZV6H8 %}
Obsidian Desktop Editor File System Bundle Splitting
Published: 2022-11-04 21:50:40

The Obsidian Editor splits your bundle of files on the os based on the folders you specify in the editor.



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



![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/etu9alp7d3e5fp2zfdad.png)
TeoS3 package and s3cp utility
Tags: go, s3
Published: 2022-11-04 21:34:51

The TeoS3 package contains Golang features that make it easy to use S3 storage as a key-value database.

This project contain also the s3cp utility which copy files from disk to s3 storage and back.

https://github.com/teonet-go/teos3

There is a part of code with connect, set and get key value:

```go
// Connect to S3 storage
con, err := teos3.Connect(accessKey, secretKey, endpoint, secure)
if err != nil {
    log.Fatalln(err)
}

// Set key to teos3 Map
err = con.Map.Set(key, data)
if err != nil {
    log.Fatalln(err)
}

// Get key from TeoS3 Map
data, err := con.Map.Get(key)
if err != nil {
    log.Fatalln(err)
}
```

See the code and more descriptions and example at: https://github.com/teonet-go/teos3
Why "How to get an internship" question is wrong? Part 1.
Tags: internship, beginners, it, programming
Published: 2022-11-04 20:35:33

The economy is in a very sad state. Getting internship, which is still often unpaid, is getting more and more difficult.

What if I told you there is a much easier way?

You see, bombarding companies with your "well formatted" CV might work. But it takes time. A lot of time.

I do not suggest to stop applying.

I suggest to limit time you spent on applying, if not stop altogether.
Instead - start investing in yourself.

Even better, let’s build your very own internship, all about you and community, now.

Based on discussion with @DunsinWebDev 

Dunsin lives in Nigeria and finding classic internship is hard.
How can Dunsin build one?

Well, Dunsin is interested in Web Development.
Wait… What if we go to LinkedIn Jobs and filter them just by these:
* Nigeria
* Remote
* Web Developer

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


Wait, what are these 3 first companies? 
They smell… goood…

Let’s dig deeper and check which tech stack they are looking for.


Canonical: 
“
To be successful in this team you must be an expert in two or more of the following:
Backend web service programming in Python and Node.JS
CSS and front-end web programming with React
Data analytics and statistical analysis
Natural language processing, sentiment analysis, machine learning
Data visualisation
”

Station:
“
Firm grasp of the JavaScript and TypeScript language and its nuances, including ES6+ syntax
Understands ReactJS and NextJS specific components such as performance in virtualization, PWA developments and SSR
Knowledge of functional and object-oriented programming
Work with the React Native Expo SDK and libraries to develop a publishable app
…
”
Mana search:
“
You will be developing and maintaining back end services of the project. 
Synchronising data in the Ethereum blockchain with data in our DynamoDB database, 
for a better user experience. Also, looking over the React-based admin panel and application.
”

Did you notice?

Every cool job from the 3 top Web Developer jobs available in Nigeria mentions **React**.

Now, let’s see if React is OpenSource…


To be continued :)


P.S. I would really appreciate if you subscribe to my amazing friend, @DunsinWebDev on Twitter. For though she builds a bridge between hundreds of millions of people. Literally.