teleren/devto huggingface dataset:
I have built a minimal blog template with Astro. Feel free to clone it, star it ... it is 100% free
Tags: astro, tailwindcss, webdev
Published: 2022-08-06 10:59:03

Hello everyone, I am learning how to use Astro and at the same time I am building some free templates so everyone can enjoy them.

If you have any questions, feel free to reach me on twitter at:

[@Mike_Andreuzza](https://twitter.com/Mike_Andreuzza)

![Thumbnail](https://github.com/michael-andreuzza/astro-build-minimal-blog-starter/raw/main/thumbnail.png).
Unwrapped minimal blog template with Astro
# Repo:
- https://github.com/michael-andreuzza/astro-build-minimal-blog-starter
# Preview:
- https://unwrapped-minimal-blog-template.netlify.app/
# Unwrapped minimal Blog template.
Features:
- ✅ SEO-friendly setup with canonical URLs and OpenGraph data
- ✅ Full Markdown support
## 🚀 Project Structure
Inside of your Astro project, you'll see the following folders and files:
```
├── README.md
├── astro.config.mjs
├── package.json
├── public
│   ├── favicon.ico
│   ├── social.jpg
│   └── social.png
├── src
│   ├── components
│   │   ├── Author.astro
│   │   ├── BlogHead.astro
│   │   ├── BlogPost.astro
│   │   ├── BlogPostPreview.astro
│   │   ├── Heading.astro
│   │   └── Paragraph.astro
│   ├── layouts
│   │   └── BlogPost.astro
│   ├── pages
│   │   ├── index.astro
│  
└── tsconfig.json  
└── tailwind.config
```
Astro looks for `.astro` or `.md` files in the `src/pages/` directory. Each page is exposed as a route based on its file name.
There's nothing special about `src/components/`, but that's where we like to put any Astro/React/Vue/Svelte/Preact components.
Any static assets, like images, can be placed in the `public/` directory.
## 🧞 Commands
All commands are run from the root of the project, from a terminal:
| Command           | Action                                       |
|:----------------  |:-------------------------------------------- |
| `npm install`     | Installs dependencies                        |
| `npm run dev`     | Starts local dev server at `localhost:3000`  |
| `npm run build`   | Build your production site to `./dist/`      |
| `npm run preview` | Preview your build locally, before deploying |
## 👀 Want to learn more?
Feel free to check [Astro's documentation](https://docs.astro.build) or jump into their [Discord server](https://astro.build/chat).
Starting Over: Why I'm learning to code!
Tags: 100daysofcode, beginners, webdev, firstpost
Published: 2022-08-06 10:57:33

For the past 3 years, I’ve been on a coding journey that has been full of ups-and-downs. Mostly downs. I have serious procrastination problems that has hindered me during my school life and I am trying to rectify it. This procrastination has cost me to waste precious hours that could’ve made be a better person and led to a better life.

I have decided to start the 30 days of code challenge. Why? It is more manageable than 100 days of code. So, I have decided to do this in 3 sets because bite-size chunks are easier for me to digest and complete an objective.

Right now I’m trying to build a web app and would like focus myself on HTML, CSS, JavaScript, React, API and MySQL. Being a front end developer is a priority. I hope to get hired this time next year.

See you guys then.
Cloud Inventory: The High Interest Credit Card of Technical Debt
Tags: kubernetes, terraform, cloudnative
Published: 2022-08-06 10:35:59

Does the title sound familiar? Probably yes, because ... 👇

... it was the title of a 2014 Google paper, except the paper was about Machine Learning.

But the title also easily applies to today's cloud-native infrastructure.

👀 Today, developers face pressure to ship new products and services.

As a result, they run lots of experiments. They adopt new cloud services that drive forward innovation, combined with accelerated deployment through infrastructure-as-code and CI/CD pipelines.

😱 The flip side of that innovation is that companies now have an inventory problem

👉 It's much easier to deploy new resources than figuring out which ones are running and why. The result is a growing number of resources that run in your cloud.

It's a new type of technical debt, where you lose track of the assets running in your infrastructure and how they relate to your business.

Ward Cunningham first defined the metaphor of technical debt in 1992.

💸 Just like financial debt, inventory debt compounds.

💰With modern cloud-native infrastructure, it's remarkably easy to incur massive recurring cloud spend - without understanding what you're actually spending it on.

A Cloud Asset Inventory has a lot of the answers. It's also a forward-looking tool that allows platform teams to stay in control while giving developers liberal permissions.

In a post "[What is Cloud Asset Inventory?](https://resoto.com/blog/2022/07/28/what-is-cloud-asset-inventory)", I summarize the challenges that come along with adoption of cloud-native infrastructure, and how a cloud asset inventory is a strategic tool to

📉 pay off you inventory debt,

🚀 increase development velocity, and

📈 grow infrastructure's contribution to profitability.

💪 ✌️ 👌

#cloud #infrastructure #shiftleft
Day 2/100 day of SwiftUI
Tags: swift, ios, apple, 100daysofcode
Published: 2022-08-06 10:08:00

Mission log 2, _and i apologize if i wont be able to go into details_.

It's day 2 of 100 days of **swiftui** course offered by [**HWS**](https://www.hackingwithswift.com/100/swiftui) + and yes it has been interesting so far.

Day 2 is all about **Booleans, string interpolation**

i learn't the following:

- How to store truth with boolean

```Swift
var isItRaining = false
```

- How to join two strings together
In swift there are two ways to join strings

1. by using + operator
2. by using interpolation

```Swift
// Interpolation

var name = "Opeyemi"
var introduction = "My name is \(name)"

//output : My name is Opeyemi
```
NOTE: I noticed how + operator can be used for multiple operation, and this is referred to as **OPERATOR OVERLOADING**
Spring Boot CRUD Example with Mysql React JS
Tags: react, java, springboot, webdev
Published: 2022-08-06 09:54:13

Hello,
Today we will create a spring boot CRUD application. In, this example, we are using the MySQL database to store data, to view and manage the data we will use react Js library in the frontend part. For API testing we will use Postman.

An easy way to understand, from scratch:

[Part 1](https://codesnipeet.com/spring-boot-crud-example-with-mysql-react-js-part-1/)
[Part 2](https://codesnipeet.com/spring-boot-crud-example-with-mysql-react-js-part-2/)
[Part 3](https://codesnipeet.com/spring-boot-crud-example-with-mysql-react-js-part-3/)
[Part 4](https://codesnipeet.com/spring-boot-crud-example-with-mysql-react-js-part-4/)

More parts will be added soon. Stay tuned.....
Web Standards: A Declaration (Doctypes and Charsets)
Published: 2022-08-06 09:53:00

Doctype and charset are two meta tags that declare to the browser the type of document the browser is to expert. Doctype declares to the browser about the author's view about a document such as whether a document is XHTML or HTML and it also dictates the code that a browser should proceed with. The charset is used by the browser so that it knows which character encoding should be read by it.


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

 The doctype declaration is the first line of a document and contains information about the type of document being used. It is also known as the Document Type Declaration or DTD.

The most common doctypes are HTML5 and XHTML 1.1. The HTML5 doctype has been around since 2004, but it was not supported by all browsers until sometime around 2010/2011. The XHTML 1.1 doctype is also widely used today.

There are many other types of doctypes that can be used for different purposes, such as for XML documents or even for CSS stylesheets.

The main reason why you should use a doctype declaration is to inform the browser what type of document it should expect to receive from you (in case there's no content-type header sent). Without a doctype declaration, browsers would simply assume that they were receiving plain text and would render your page differently (and probably incorrectly) than expected.

In addition to informing the browser about what kind of document it should expect, a doctype declaration usually also provides some additional information about how it should interpret your markup (things like which elements can be used and what attributes they may have).

Without a doctype declaration, the browser will assume that you don't care about how it renders your page (and therefore don't care about the markup being valid or not). 

The doctype declaration for HTML5 is pretty simple:

```
<!DOCTYPE html>

```
This basically informs the browser that it should interpret any markup it finds as HTML5. This makes sense since it's likely that you're using HTML5 to build your page in the first place.

In the end, which doctype you chose will depend on which one best fits your website and your audience. Is it a blog, a portfolio site, or a news site? This will help determine which doctype you choose. But in the end, there is no wrong answer—each doctype has its own positives and negatives. It's easy to get caught up in doctype wars with developers—but really, neither side is right or wrong. Ultimately, it comes down to what works for you.
javascript - Uncaught TypeError: Cannot read property 'msie' of undefined - jQuery tools
Tags: javascript, jquery
Published: 2022-08-06 09:51:34

Question:

I am getting the following error in Chrome dev console:

Uncaught TypeError: Cannot read property 'msie' of undefined
My understanding is that it is because .browser is now deprecated in jQuery however I am using the latest version of jQuery tools and it is still giving the error, I checked in the js file and it is there.

How can I get around this so it does not give the error?

[Solution](https://www.worcraft-algeria-dz.com/howto/2467/javascript---Uncaught-TypeError:-Cannot-read-property-'msie'-of-undefined---jQuery-tools#javascript---Uncaught-TypeError:-Cannot-read-property-'msie'-of-undefined---jQuery-tools) 1:

You can check out this solution by AJ. It’s pretty straightforward, just copy and paste the following lines of code.

jQuery.browser = {};
(function () {
    jQuery.browser.msie = false;
    jQuery.browser.version = 0;
    if (navigator.userAgent.match(/MSIE ([0-9]+)\./)) {
        jQuery.browser.msie = true;
        jQuery.browser.version = RegExp.$1;
    }
})();
Reference:

$.browser on jQuery 1.9.x for legacy IE detection
Solution 2:

The $.browser method has been removed as of jQuery 1.9.

jQuery.browser() removed

The jQuery.browser() method has been deprecated since jQuery 1.3 and is removed in 1.9. If needed, it is available as part of the jQuery Migrate plugin. We recommend using feature detection with a library such as Modernizr.

— jQuery Core 1.9 Upgrade Guide.

As stated in the Upgrade Guide you can try using the jQuery Migrate plugin to restore this functionality and let jQuery Tools work.

Solution 3:

Use the following script tag in your jsp/js file:

<script src="http://code.jquery.com/jquery-1.9.0.js"></script>
<script src="http://code.jquery.com/jquery-migrate-1.2.1.js"></script>
this will work for sure.
Do you know the #1 skill you can learn in 2022?
Tags: writing, skill, tutorial, beginners
Published: 2022-08-06 09:23:58

Do you know the #1 skill you can learn in 2022?

## It is writing, Why?

Learn to write because, 

Ads = Writing
SEO = Writing
DMs = Writing
Blogs = Writing
Books = Writing
Emails = Writing
Twitter = Writing
[Websites](www.liveupx.com) = Writing
Writing = $$$

You don't need a new 2022 MacBook Pro to start writing online. 

You don't need an audience of 100K followers to start writing online. 

You need wifi, a computer, and something to say.  Quit the excuses. 

You don't need an English degree to start writing online. But study psychology so you can actually make money from it. 

## Use psychology in your writing. Write about: 

1) Sex 
2) Family 
3) Superiority 
4) Social approval 
5) Increasing comfort 
6) Improving life quality 
7) Decreasing fear and pain 

These desires are built into humans. Use the power of Mother Nature. 

## 11 words to use in your headlines to steal attention: 

1. Fast 
2. new 
3. sale 
4. save 
5. easy 
6. quick 
7. results 
8. proven 
9. how to 
10. guarantee 
11. Last chance 

## 7 books | recommend on writing:
 

1. Writing Tools 
2. Cashvertising 
3. Wired for Story 
4. On Writing Well 
5. The Ultimate Sales Letter 
6. 100 Ways to Improve Your Writing 
7. Advertising Secrets of the Written Word
Fuchsia and Future of Flutter.
Tags: flutter, discuss, android, news
Published: 2022-08-06 09:22:38

Both **Flutter** and **Fuchsia** are developed by Google and both support Dart.
.
.
.
.
Google Fuchsia operating system is designed to provide the most effective and efficient functionalities on all the platforms.
Flutter allows developers to build apps with just one base of code. They work perfectly on various platforms, and it won't be different in the case of Fuchsia. Google is actually endorsing Flutter as the main technology to build Fuchsia applications and user interfaces.
.
.
If in the future, developers are able to use the double power Flutter and Fuchsia together, they can release apps on any platform like smart home with minimum investment and in record time.

Why Flutter is so Powerful?
✔️ Same UI and Business Logic in All Platforms.
✔️ Reduced Code Development Time.
✔️ Increased Time-to-Market Speed.
✔️ Similar to Native App Performance.
✔️ Custom, Animated UI of Any Complexity Available.
✔️ Own Rendering Engine.
✔️ Simple Platform-Specific Logic Implementation.
✔️ The Potential Ability to Go Beyond Mobile.

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

You can also find Fuchsia's complete documentation here:
**[Link](https://lnkd.in/dhjuEu8n)**
.
.
.
You can also find Dart's complete documentation here:
**[Link](https://dart.dev/guides)**
⭐ Client Side Rendering vs Server Side Rendering⭐
Tags: webdev, frontend, backend
Published: 2022-08-06 09:12:50

An important difference web developers must know 🔥
⭐ Client Side Rendering⭐
Is about rendering content in the browser mostly using JavaScript. Instead of getting all the content from the HTML document itself, a JS file renders the most of the site.

🟢 Fast website rendering after the initial load.
🟢 Great for web applications.
🔴 Initial load takes more time
⭐ In Server Side Rendering⭐
User makes a request to the webpage, the server prepares the HTML page by fetching the required data from the database and sends to the user’s machine over the internet while the JavaScript page is fetched to control interactivity.

🟢 The initial page load is faster.
🟢 Great for static sites.
🟢 Helps in SEO by allowing Search Engines to crawl the site
🔴 Frequent server requests take time for subsequent pages

Keep growing. Keep learning💪
Save scroll state in React when visiting another page
Tags: javascript, react, tutorial, webdev
Published: 2022-08-06 08:41:00

## The problem:

Saving scroll state is very important for a good user experience especially when the page in your React web application is really long and has a lot of content. It can be quite annoying when a user visits another page and comes back to the previous page only to find out that they have to scroll from the top of the page all over again. Well we can save them this pain by adding a little code that saves the scroll position of the page the user was at before.

### Create two separate functions as follows:

```javascript
// Object in which we will save our scroll position state
const state = {}

// Function to save the scroll state
export const saveState = (page, object) => {
    state[page] = object
}

// Function to get the scroll position state
export const getState = (page) => {
    return state[page]
}
```
### In the main component where you want to retain the scroll position add the following code:

```javascript

import {getState, saveState} from "./Util";

// Get stored scroll position state
const scrollPoint = getState('scrollState')
const scrollY = scrollPoint?.scrollY

/* useEffect to get and set the scroll position in the 
current page */
useEffect(() => {
    if (scrollY) {

/* setTimeout used to set the scroll position as the
useEffect triggers before the actual page renders */
        setTimeout(() => {
            window.scrollTo(0, scrollY);
        }, 50)
    }
}, [scrollY])

// useEffect to store the scroll position in the current page 
useEffect(() => {
    const save = () => {
        saveState('scrollState', {
// accessing the vertical scroll position in the window object
            scrollY: window.scrollY
        })
    }
    
/* Firing the save function whenever the event listener 
picks up a scroll event */
    window.addEventListener('scroll', save)
    return () => window.removeEventListener('scroll', save)

}, [])
```
You can also use this separately as a custom hook and then use it in every component/page where you intend to save the scroll position. See [here](https://dev.to/renegadedev/save-scroll-state-in-react-when-visiting-other-page-with-a-custom-hook-57nk) in my other article where I use the same logic in a custom hook.

There you go, you have now successfully set the scroll state of your component.

<img width="100%" style="width:100%" src="https://media.giphy.com/media/l0Iyl55kTeh71nTXy/giphy.gif">
Nâng mũi cấu trúc 4D là gì? Có tốt không? Ai nên thực hiện?
Published: 2022-08-06 08:12:00

Nâng mũi cấu trúc là xu hướng thẩm mỹ hiện đại cải thiện mọi khuyết điểm về dáng mũi, tăng cường sự ấn tượng cho vẻ ngoài. Xem ngay thông tin dưới đây. 
Website : https://seoulcenter.vn/dich-vu/nang-mui-cau-truc 
Thu nhỏ cánh mũi : https://seoulcenter.vn/dich-vu/thu-nho-canh-mui-giai-phap-toi-uu-danh-cho-mui-to-be 
Nâng mũi Hàn Quốc Korea : https://seoulcenter.vn/dich-vu/nang-mui-han-quoc-korea 
Nâng mũi S-Line : https://seoulcenter.vn/tin-tuc/nang-mui-s-line 
Nâng mũi bọc sụn : https://seoulcenter.vn/dich-vu/nang-mui-boc-sun 
Twitter : https://twitter.com/muicautruc4d 
Pinterest : https://www.pinterest.com/nangmuicautruc/ 
Linkedin : https://www.linkedin.com/in/nangmuicautruc/ 
Flickr : https://www.flickr.com/people/nangmuicautruc/ 
Tumblr : https://nangmuicautruc.tumblr.com/ 
Behance : https://www.behance.net/nangmuicautruc4d/ 
Dribbble :  https://dribbble.com/nangmuicautruc/about 
#nangmuicautruc 
#nangmuicautruc4D 
#thammymui 
#nangmuiseoulcenter
Automating your mouse and keyboard with an auto clicker
Published: 2022-08-06 08:05:00

By automating your mouse and keyboard, you can reduce time spent on tedious tasks. This can save you a lot of frustration, which is great news if you’re looking to [improve productivity](https://www.techradar.com/in/best/best-productivity-apps). If you’re using a computer that comes with an auto clicker, it’s easy to get started. All you need are some basic supplies and a few minutes of your time. Let’s take a look.
 

## What is an Auto Clicker.

An auto clicker is a device that helps you automate your mouse and keyboard operations. The device sends a signal to the computer when you make a specific move, such as clicking on a button. This allows you to quickly and easily perform actions with your mouse and keyboard, without having to worry about trying to do them one by one.
 

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


## How Does an Auto Clicker Work

The auto clicker works by sending a signal to the computer whenever you make a specific move, such as clicking on a button. The computer then uses this signal to automatically execute the action you specify. For example, if you press the left arrow key on your keyboard, the computer will send a signal that will cause your cursor to move left on the screen.
 

### Tips for Successful Automatic Clicker Games Playing.

One of the most popular and successful ways to add fun and excitement to your games is by using automatic clickers. For example, you can use [Clicker Games](https://www.pcgamesn.com/best-idle-games-clicker-games-pc) to add a new challenge or level to your game, or to increase the difficulty of an existing one. In addition, you can use automatic clickers to keep players engaged by awarding them rewards for completing challenges.
 
Use Automatic Clicker Games to Increase Your Gaming Results
As mentioned earlier, another key way to improve your gaming results is by using automatic clickers. By rewarding players on a regular basis, you can help keep them engaged and interested in your game. Additionally, by giving players different tasks and challenges as they play, you can create a feeling of urgency and excitement that will generate more gaming sessions. 

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

### Use Automatic Clicker Games To Improve Your Gameplay.

In order to improve both your gameplay skills and your overall experience with an automated clicker game, it’s important to learn how to use these devices effectively. By following these tips, you should be able to enjoy more satisfying automatic clicker games without any effort on your part!
Enjoy Programming-Themed Humor? Here's today's daily developer joke!
Tags: jokes, dailydeveloperjokes
Published: 2022-08-06 08:00:26

---
title: "Enjoy Programming-Themed Humor? Here's today's daily developer joke!"
description: "Check out today's daily developer joke! (a project by Fred Adams at xtrp.io)"
series: "Daily Developer Jokes"
published: true
tags: #jokes, #dailydeveloperjokes
---

Hi there! Here's today's Daily Developer Joke. We hope you enjoy it; it's a good one.

![Joke Image](https://private.xtrp.io/projects/DailyDeveloperJokes/public_image_server/images/5e12593d119ae.png)

---

For more jokes, and to submit your own joke to get featured, check out the [Daily Developer Jokes Website](https://dailydeveloperjokes.github.io/). We're also open sourced, so feel free to view [our GitHub Profile](https://github.com/dailydeveloperjokes).

### Leave this post a ❤️ if you liked today's joke, and stay tuned for tomorrow's joke too!

_This joke comes from [Dad-Jokes GitHub Repo by Wes Bos](https://github.com/wesbos/dad-jokes) (thank you!), whose owner has given me permission to use this joke with credit._

<!--
Joke text:
There are 10 types of people in this world, those who understand binary and those who don't.
 -->
Int Object is Not Iterable – Python Error [Solved]
Tags: python, programming, oop, javascript
Published: 2022-08-06 07:47:09

If you are running your Python code and you see the error “TypeError: 'int' object is not iterable”, it means you are trying to loop through an integer or other data type that loops cannot work on.

In Python, iterable data are lists, tuples, sets, dictionaries, and so on.

In addition, this error being a “TypeError” means you’re trying to perform an operation on an inappropriate data type. For example, adding a string with an integer.

Today is the last day you should get this error while running your Python code. Because in this article, I will not just show you how to fix it, I will also show you how to check for the __iter__ magic methods so you can see if an object is iterable.

## How to Fix Int Object is Not Iterable

If you are trying to loop through an integer, you will get this error:
```
count = 14

for i in count:
    print(i)
# Output: TypeError: 'int' object is not iterable
```
One way to fix it is to pass the variable into the range() function.

In Python, the range function checks the variable passed into it and returns a series of numbers starting from 0 and stopping right before the specified number.

The loop will now run:

```
count = 14

for i in range(count):
    print(i)
    
# Output: 0
# 1
# 2
# 3
# 4
# 5
# 6
# 7
# 8
# 9
# 10
# 11
# 12
# 13
```
Another example that uses this solution is in the snippet below:

**[read more](https://professional-writer0.blogspot.com/2022/08/what-does-not-iterable-mean-in-python.html)**