teleren/devto huggingface dataset:
Footer Ad Sticky No Close (x)
Tags: adsense, css, javascript, stickyads
Published: 2022-07-22 21:40:00

I'm trying to experiment with making Sticky footer Ads without Close "X" and it's very simple and easy to implement on a blog or wordpress. To see an example, you can visit [**here**](https://sensasi.net). Hopefully useful and good luck :)

**Happy coding!**

```
<style>
.Bianity-ads {
	position: fixed;
	bottom: 0;
	left: 0;
	width: 100%;
	min-height: 70px;
	max-height: 90px; /* www.bianity.net*/
	padding: 5px 0;
	box-shadow: 0 -6px 18px 0 rgba(9,32,76,.1);
	-webkit-transition: all .1s ease-in;
	transition: all .1s ease-in;
	display: flex;
	align-items: center;
	justify-content: center;
	background-color: #161616;
	z-index: 20;
}

.Bianity-ads .Bianity-ads-content {
	overflow: hidden;
	display: block;
	position: relative;
	text-align:center;
	height: 70px;
	width: 100%;
	margin-right: 10px;
	margin-left: 10px;
}
</style>

<div class='Bianity-ads' id='Bianity-ads'>
	<div class='Bianity-ads-simple' onclick='document.getElementById("Bianity-ads").style.display="none"'>
		
	</div>
	<div class='Bianity-ads-content'>

Here Your Code Ads

</div>
</div>
```
Software and IT Infrastructure
Tags: infrastructure, decoupling, refactoring, architecture
Published: 2022-07-22 21:38:28

> From IT perspective, Infrastructure refers to all components, libraries, tools, etc that are connected to an actual physical infrastructure (hardware) or external service (software), through specific programs, drivers or other libraries which will enable such connection in order to operate or manage services or environments.

With that in mind, infrastructure is considered to be our storage systems of preference such as Databases or Cache, also Logging systems or Message brokers that are supporting our software applications, even external services to your application like Email messaging, external logging services or external reporting tools are considered infrastructure.

> It is crucial to realize that also your favorite application framework is also part or considered to be infrastructure.

Software engineers that take architectural design principles into account when developing their systems, tend to guarantee, among others, these software characteristics:

- Flexibility
- Extensibility
- Reliability
- Maintainability
- Reusability
- Testability

And these features are very important for systems to last a long time and to require less resources to keep them up to date with latest technologies and keep them solid (secure, testable) and open for integrability and/or portability against new business requirements.

In order to achieve this objectives we need solid [Software Architecture and Design principles](https://dev.to/franckweb/software-architecture-and-software-design-3m81), be conscious of when to apply [Software Architecture Design Patterns](https://dev.to/franckweb/software-architecture-design-patterns-516j) available, as well as [Software Architecture Patterns for Common Problems](https://dev.to/franckweb/software-architecture-patterns-for-common-problems-1k18) and proven industry techniques that help us keep our Software Domain **decoupled** from Infrastructure, solid and extensible allowing as to fulfill above mentioned software characteristics.
Day 599 : Advantage
Tags: lifelongdev, hiphop, code, coding
Published: 2022-07-22 21:34:00

_liner notes_:
- Professional : So the company has said that we can do half days on the next few Fridays to help with work life balance stuff. So that made me speed up the stuff I wanted to get done. haha I got some answers I asked some folks for a project I'm working on. I made the appropriate updates and submitted it for review. Hopefully hear back early next week so I can mark it done. Also helped a person with a demo application they are working on. Not a bad day and a good way to start the weekend.

- Personal : Last night, I went through a bunch of tracks for the radio show. I studied some Japanese and then finished watching the new season of "The Rising of the Shield Hero". Pretty good night.

![Looking through an opening in reeds with a canoe on a river with a field on the other side a canoe right next ](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/56gh7v0vfsan5djkzmxf.jpg)

Trying to take advantage of the extra time I got for the half day. I pretty much finished prepping tracks for the radio show. I'm actually ahead. I think I have enough tracks prepped for the next 3 shows. Going to try and stay ahead. I'm going to finish prepping for the radio show and finish the night studying Japanese and watch an anime. Also thought about a new feature to add to https://doingstuff.in and did a quick wireframe. May see what I can throw together this weekend.

Have a great night and weekend!

peace piece
Dwane / conshus
https://dwane.io / https://HIPHOPandCODE.com
{% youtube RJlS8ed-9zw %}
Software Design Patterns
Tags: software, architecture, design, patterns
Published: 2022-07-22 21:20:00

## Creational Patterns

- Factory Pattern
- Builder Pattern
- Prototype Pattern
- Singleton Pattern
- Abstract Factory Pattern

## Structural Patterns

- Adapter Pattern
- Bridge Pattern
- Composite Pattern
- Decorator Pattern
- Facade Pattern
- Flyweight Pattern
- Proxy Pattern

## Behavioral Patterns

- Chain of Responsibility Pattern
- Command Pattern
- Iterator Pattern
- Mediator Pattern
- Observer Pattern
- State Pattern
- Strategy Pattern
- Template Method Pattern
- Visitor Pattern
Object Oriented Programming (OOP)
Tags: javascript, beginners, programming, tutorial
Published: 2022-07-22 20:21:42

I know you are wondering what OOP is right??.

The key notion of OOP is an object, an object consists of two things: data and methods(functions) that work with the data.


## class

A class is a template for objects. It contains the code for all the objects method.

_Basic example of class_

```
class className {
    constructor (name) {
        this.name = name
      }
    method (){
        function body
     }
```

A class must contain;

- _class_ Keyword

- _className_, It should be nouns because classes represent concrete objects. e.g Investment.

- Most classes have a method called _constructor_. The constructor is usually used to set up the class variables.

- The class method

There we have the basics of OOP.
Go Scrapper API
Tags: go, api, webdev, heroku
Published: 2022-07-03 09:46:26

As I was exploring further about Go, I came across APIs in Go, which was very easy to build. So instead of going the traditional way and building a CRUD API, I decided to write a simple scrapper API. The API scraps Goodreads quotes page and returns a JSON of quotes with their authors.

Here I am using 2 modules,

* [Gin](github.com/gin-gonic/gin) - For quickly building the API
* [Colly](github.com/gocolly/colly) - For web scrapping.

I have built it and deployed it on Heroku. 

Commands I ran from start to finish

### To initiate the current folder/project as a module
```bash
go mod init vigneshm.me/go-quotes-api
```
This creates a file called go.mod. This has the name of the project and the version of Go it uses.

### To import modules
```bash
go get github.com/gin-gonic/gin
go get github.com/gocolly/colly
```
This imports the modules and creates a go.sum file to add checksums for the modules it downloads. Also, the go.mod page gets filled with all the dependent modules info.

Next, I filled in the main.go with my code.

Now, for the part where I deploy the app in Heroku.

### Install Heroku CLI
```bash
npm install -g heroku
```
### Login to Heroku
```bash
heroku login -i
```

### Initate a Git repo and commit the code
```bash
git init
git add .
git commit -m "initial commit"
```

### Create a Procfile for Heroku
```bash
touch Procfile
echo "web: bin/go-quotes-api" > Procfile
```
This tells Heroku to run the command on startup.

### Create Heroku App
```bash
heroku create go-quote-api
git push heroku master
```
This creates the Heroku app and pushes the code.

Heroku takes this code runs the build and exposes the app at https://app-name.herokuapp.com/

My app is available at https://go-quote-api.herokuapp.com/quotes/dumbledore

The last word can be replaced with any search criteria to search for quotes from your favorite character or book. Code can be found at https://github.com/vigneshm243/go-quotes-api.

Happy Coding!

---

Thanks for reading. Leave a ❤️ if you liked it and comment and let me know what you think. 
Originally published at [vigneshm.me](https://vigneshm.me/posts/go_api/)
Find jobs from your CLI
Tags: jobs, terminal, cli, go
Published: 2022-07-22 20:08:40

At Dorse ([dorse.io](https://dorse.io)) we want people to be able to find the best job in the world. We also want our community to be able to easily help a friend get jobs by endorsing them.

Why not create a CLI tool in Go for that? That way, you can just be coding (using vim, nano, emacs...), looking at the logs, etc. And suddenly, you feel the urge for seeing what the market has for you - or any of your colleagues perhaps?

Enter [**dorsie**](https://github.com/madrugada-labs/dorsie)

Just run:
```sh
go install github.com/madrugada-labs/dorsie@latest
```
and start browsing for roles from the comfort of your chain and terminal (zsh perhaps?). If you're feeling adventurous try searching for `mario bross` and see what happens!? 

Good luck, and see you around!
Trello Clone with Drag and Drop functionality (No external library used)
Tags: react, typescript, trelloclone, javascript
Published: 2022-07-22 19:56:00

Hey guys, I have made a trello clone using React and typescript. There is drag and drop functionality too which does not use any external library.

Here is the Github link: [Code](https://github.com/rak-shit/trello-clone)

Here is the link to the app: [Trello Clone](https://stately-cucurucho-922810.netlify.app/)

I would love to write a detailed article on this in the future depending on the reach.

I hope this helps. If you have any questions and suggestions reach me out on [Github](https://github.com/rak-shit) and [LinkedIn](https://www.linkedin.com/in/mrakshit/).

Follow me on [Twitter](https://twitter.com/mRakshit_)

Have a nice day :)
How to fix "The link you followed has expired" when uploading wordpress theme
Tags: wordpress, webdev, beginners, tutorial
Published: 2022-07-22 19:54:06

I was recently working on a wordpress website and I was having issues uploading a new theme because I kept seeing "The link you followed has expired" error. 
This error does not give much clues about what’s actually wrong, which is why it's quite difficult to debug. It is ususally caused by a small "maximum upload file size", generally, the size is usually 2MB, this is usually not enough as some wordpress themes are much larger than this 2MB limit.

There are 2 ways to fix this:

**Method 1: Edit .htaccess file**

The .htaccess file is a core file used by WordPress, to edit the file, you need to access the WordPress files in your server through an FTP or cPanel file manager. 

To edit it through cpanel file manager
**Step 1:** Login to your cpanel and select file manager
![Image of cpanel highlighting file manager](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/zrdkz5mz3opbt7mm05ru.png)

**Step 2:** Select the .htaccess file shown below and paste the following code at the end of the file.
```
php_value upload_max_filesize 64M
php_value post_max_size 64M
php_value max_execution_time 300
php_value max_input_time 300
```
![Image showing .htaccess file on cpanel file manager](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/311fdys2ao8fydclsz78.png)
**Step 3**: Once you're done click save and then reload your wordpress site.

sometimes the file manager might not be configured to show hidden files automatically, you'll need to do that yourself before you can view the .htaccess file for editing.
To show hidden files, follow these steps:
- Go to settings as shown below
 ![Image showing how to view hidden files on cpanel file manager](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/sqkb732p50y6az9xax88.png)
- Select the show hidden files option and save
![Image showing how to view hidden files on cpanel file manager](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/x84v3jx6a1631rdaqwkr.png)
then go back to step 2.

**Method 2: Create A PHP.ini File**

The php.ini file is a configuration file used by PHP and WordPress. It is usually located in the root directory of the site.

Most users are on a shared hosting account, so they may not find it in their site’s root folder. In that case, you need to create a blank php.ini file and edit the content.

**Step 1:** Login to your cpanel and select file manager
![Image of cpanel highlighting file manager](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/zrdkz5mz3opbt7mm05ru.png)

**Step 2:** Create a new file and name it "php.ini"
![Image showing creation process of php.ini file](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/iumzlfwasktcs623ab0u.png)

**Step 3:** Open the php.ini file you just created and paste the following codes in it:
```
upload_max_filesize = 64M
post_max_size = 64M
max_execution_time = 300
```
Save and then reload your wordpress site.
This increases your upload size limits to 64MB and fixes the error.

Thank you for reading.
The 10 JS Projects You Need to Build in order to become a PRO !
Tags: javascript, 100daysofcode, codenewbie, programming
Published: 2022-07-22 18:34:14

In this video, we will be coding 10 JavaScript Projects in 2 Hours. 
The code for the video can be found on GitHub along with the link to course files. 

{% youtube KTGfHmyje5A %}

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

⏱ Timestamps ⏱

📌 Let's start (0:00)
📌 Creating a Full Featured Modal using Classes (0:35)
📌 Creating a Tabs System using Classes (10:42)
📌 Changing Background using Range Sliders (24:07)
📌 Creating a Full Featured Slideshow using Classes (30:27)
📌 Creating a Salary Calculator (MVC) (49:44)
📌 Creating a Scroll Indicator using JavaScript (1:06:56)
📌 Creating an Infinite Scroll App using Intersection Observer API(1:12:13)
📌 Playing with Text (1:19:13)
📌 Creating a Custom Search Filter using JavaScript (1:31:32)
📌 Creating a Sticky Navigation Bar(1:44:20)

🐱‍💻 🐱‍💻 Course Links:

Starter Files - https://github.com/The-Nerdy-Dev/Starter-Files-10-Projects-In-2-Hours
Visual Studio Code - https://code.visualstudio.com
Git - https://git-scm.com/downloads

--- 
Support my channel:
💜 Join the Discord community 👨‍👩‍👧‍👦: https://discord.gg/fgbtN2a 
💜 One time donations via PayPal
Thank you! 🙏

---
Follow me on:
👉 My Blog: https://www.the-nerdy-dev.com
👉 Twitter: https://twitter.com/thenerdydev
👉 Instagram: https://instagram.com/thenerdydev
An Introduction To React && Hooks
Tags: javascript, react, css, visualstudio
Published: 2022-07-22 19:37:00

**Introduction To React**

React is a JavaScript library that is typically used to create the user interfaces of websites and applications. As a matter of fact, it makes it easier for software developers like myself to create interactive and responsive user interfaces. It efficiently updates the state of your application using "**hooks**" and renders just the right components whenever your data changes.

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

**Rendering Data**

To render, react components implement a render function that takes input data(which could possibly be a prop passed down) and returns what is displayed which could very well be JSX. JSX is what is known to be a combination of HTML and JavaScript languages together.

**What are Hooks?**
![Image description](https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcRJXyJ94MDHYA_RFz51j_NrqSnMc7p8nZfh2A&usqp=CAU)

Hooks are a new addition in React which came alongside the version 16.8 of react. They allow you to use and update state and other React features such as effect without writing a class as shown in the image above.

**Below depicts an example of using state**


![Image description](https://miro.medium.com/max/1400/1*MGlrNmHUaT_2Gku11LLfLw.png)

![Image description](https://overreacted.io/04a90dcbacb01105d634964880ebed19/exhaustive-deps.gif)

**Benefits Of Using Hooks**

In using Hooks, you can extract data from a component so as to make your code more dynamic. They allow you to reuse stateful logic without changing the hierarchy of your components. React is relatively a new library but definitely makes the lives of software developers much easier. I 100% recommend to all relevant parties to learn it.
ทะลุ Chrome เข้าเว็บที่ถูกปิดกั้น (สำหรับการทดสอบเท่านั้น)
Published: 2022-07-22 19:34:25

ถ้าเข้าเว็บที่เราต้องการทดสอบในแบบ https แล้วโดน Chrome ปิดกั้น ให้พิมพ์สูตรลับว่า 
```
thisisunsafe 
```
แล้วจะสามารถเข้าใช้งานเว็บนั้นได้ แต่ไม่ควรใช้กับเว็บอื่นที่โดยไม่จำเป็นเพราะอาจเป็นอันตรายได้

เมื่อใช้งานเสร็จแล้วให้กลับมาเปิดการปิดกั้น ด้วยการกดคำว่า Not Secure ตรง Address Bar แล้วกดคำว่า Turn on warnings
Unicode Characters
Tags: webdev, beginners, programming, html
Published: 2022-07-22 19:16:54

We are going to discuss Unicode. As we all know that computer understands the number language. It assigns every character a number that is how it works but unfortunately, the encoding method was only for English alphabets, so for other languages, it was difficult to understand if we write any other language alphabets or symbols so it prints a block or square type symbol which means nothing but strange.

## Unicode Characters Table

These are the characters that we can use in place of the space key. It is a hidden space in your text, you can use it to send or type an [invisible character unicode](https://invisiblecharacter.net/). 

A list of a few Unicode and Characters is here at [Unicode Characters](https://phperrorcode.com/unicode-characters/).

## UTF & It’s Types

The Unicode is called the universal standard for character encoding, 

Unicode follows UTF the abbreviation of UTF is “Unicode Transformation Format”. 

UTF defines how to represent Unicode code. UTF has 4 types which are explained below.

### UFT-7

The UFT-7 was designed to show the ASCII codes. As we know ASCII works on 7 bits encoding so basically UTF-7 is used to show the ASCII in our emails and texts which use UTF-7.

### UFT-8

The UTF-8 is the widely used scheme in encoding moreover UTF-8 has a special ability it can use almost 4 bits for showing characters.

Let’s see how it works:

It takes 1 byte for showing English Alphabet or symbols. 
2 bytes for Latin or middle east alphabets or symbols. 
3 bytes for Asian alphabets or symbols.
And 4 bytes for other special symbols.

### UFT-16

The UTF-16 is an extension for encoding, UTF-16 is used to show 65536 characters and it is also supported by 4 bytes for showing special characters.


### UFT-32

We can say UTF-32 is a multi-byte scheme for encoding it also supports bytes for showing [special characters](https://invisiblecharacter.net/special-characters/).
freeCodeCamp Recursion Example Explained
Tags: javascript, recursion, beginners, freecodecamp
Published: 2022-07-22 19:22:01

```javascript
/*
Note that the below recursion challenge can be found here:
https://www.freecodecamp.org/learn/javascript-algorithms-and-data-structures/basic-javascript/use-recursion-to-create-a-countdown.
But it's the *example* provided, not the challenge itself.
*/


function countup(n) {
    if (n < 1) { // the base case
        return []
    } else {
        const countArray = countup(n - 1) // remember that, on the way "down", each call is added to the stack
        countArray.push(n)
        // console.log(countArray) // just a helpful line
        return countArray
    }
}

console.log(countup(5)) // [1, 2, 3, 4, 5]


/*
fCC: "At first, this seems counterintuitive since the value of n decreases but the values in the final array are increasing.
This happens because the push happens last, after the recursive call has returned.
At the point where n is pushed into the array, countup(n - 1) has already been evaluated and returned [1, 2, ..., n - 1]."
*/


// The way "down":
    // countup(5 - 1) // added to stack first
    // countup(4 - 1) // added to stack second
    // countup(3 - 1) // added to stack third
    // countup(2 - 1) // added to stack fourth
    // countup(1 - 1) // added to stack fifth
  
// So the stack looks like this, top to bottom:
    // countup(1 - 1)
    // countup(2 - 1)
    // countup(3 - 1)
    // countup(4 - 1)
    // countup(5 - 1)
  
// The base case is reached:
    // countup(1 - 1) evaluates to countup(0)
    // ...which means n is 0
    // ...which means n < 1 is true
    // ...which means [] is returned to countup()
    // ...which means countArray = []
  
// The way "back up":
    // It is now that 'control' moves on to the 'countArray.push(n)' line
    // countArray = [1] // the 1 comes from the top of the stack (and then the 2 is at the top of the stack)
    // countArray = [1, 2] // the 2 comes from the top of the stack (and then the 3 is at the top of the stack)
    // countArray = [1, 2, 3] // the 3 comes from the top of the stack (and then the 4 is at the top of the stack)
    // countArray = [1, 2, 3, 4] // the 4 comes from the top of the stack (and then the 5 is at the top of the stack)
    // countArray = [1, 2, 3, 4, 5] // the 5 comes from the top of the stack (and then the stack is empty and countArray is returned)
```
Solidity: What You Need to Know to Start Developing Smart Contracts
Tags: javascript, programming, python
Published: 2022-07-22 19:05:00

Solidity is a programming language that was designed for developing smart contracts on the Ethereum blockchain. If you’re looking to get into blockchain development, then you’ll need to learn Solidity. In this blog post, we will provide an introduction to Solidity and teach you everything you need to start coding your own smart contracts.

Solidity is a contract-oriented, high-level language for implementing smart contracts. It was influenced by C++, Python, and JavaScript and is designed to target the Ethereum Virtual Machine (EVM). Solidity is statically typed and supports inheritance, libraries, and complex user-defined types among other features.

Contracts written in Solidity are stored as code on the blockchain. They can be used to represent digital assets, decentralized applications, or even financial contracts. When a contract is executed, it runs on the EVM and has access to all of Ethereum’s features including messaging, accounts, and blockchain data.

Solidity is a fairly new language and is still undergoing active development. As such, it is subject to change and is not yet considered production-ready. However, that doesn’t mean you can’t start learning it today!

## Explore Solidity Features

Solidity is a key language for developers looking to get into blockchain development. Here are eight reasons why you should learn Solidity:

It Is The Native Language For Developing Smart Contracts On The Ethereum Blockchain.
If you want to develop for Ethereum, then you need to know Solidity. It is the only language that can be used to write smart contracts on Ethereum.

## Solidity Is A Contract-Oriented Language.

This means that everything in Solidity is defined as a contract. This makes it easy to reason about your code and helps to enforce modularity and security.

## It Is Statically Typed.

Solidity uses a static type system, which means that you need to explicitly declare the type of each variable. This can help to prevent errors in your code and make it easier to refactor and optimize your contracts.

## It Supports Inheritance.

In Solidity, contracts can inherit from other contracts. This allows you to reuse code and avoid duplication.

## It Has A Rich Set Of Features.

Solidity includes many important features for innovative contract development, such as libraries, complex user-defined types, and access to Ethereum’s messaging, accounts, and blockchain data.

## It Is Under Active Development.

Because Solidity is still a new language, it is constantly evolving. This can be both good and bad, but it means that there is a lot of excitement and activity around Solidity development.

## It Is Not Yet Production-Ready.

Solidity is still in development and has not yet reached a stable state. This means there may be breaking changes between versions and the language is not yet suitable for production use.