teleren/devto huggingface dataset:
How to download s3 object and save to file
Tags: aws, typescript, javascript, node
Published: 2022-09-30 21:06:59

```
import * as fs from "fs";
import * as AWS from "aws-sdk";

const BUCKET_NAME = "<<bucket-name>>";
const IAM_USER_KEY = "<<user-key>>";
const IAM_USER_SECRET = "<<user-secret>>";

const s3bucket = new AWS.S3({
  accessKeyId: IAM_USER_KEY,
  secretAccessKey: IAM_USER_SECRET
});

export function downloadToS3(fileName: string): Promise<any> {

  const params = {
    Bucket: BUCKET_NAME,
    Key: "myapp" + "/" + filename,
  };


  s3bucket.getObject(params, function (err, data) {
    if (err) {
        console.log("error!");
    }
    else {
        fs.createWriteStream(filename).write(data.Body);
        console.log(data.Body);
    }
  });  

  return new Promise((resolve, reject) => {

  });
}


downloadToS3("<<filename>>")
```
Apache Spark architecture
Tags: apachespark, spark
Published: 2022-09-30 21:02:07

#apachespark #spark #sparkarchitecture
01 - Spark Architecture Basics in 6 mins. Concepts explained
📓 Application
📓 Driver
📓 Executor
📓 Partition
📓 Job 
📓 Stage
📓 Tasks
📓 Slots
📓 Lazy evaluation
📓 Narrow and wide Transformations
📓 Actions
{% embed https://youtu.be/dSZ8-Ounnvs %}
What is Astro.build
Tags: astro, javascript, webdev, beginners
Published: 2022-09-30 20:53:14

[Astro](https://css-tricks.com/a-look-at-building-with-astro/#:~:text=Astro%20is%20a%20brand%20new,clever%20options%20for%20doing%20so.) is a brand new framework for building websites. Astro is built by the team of open source developers behind Snowpack and Skypack, with additional contributions from the community. 

Astro is a tool for building static websites with your favorite JavaScript framework. But it will ship zero JavaScript to the browser 🤯. End-users love fast-loading websites but developers love to build them with heavy JavaScript frameworks. 

[Astro Islands](https://astro.build/) represent a leading paradigm shift for frontend web architecture. Astro extracts your UI into smaller, isolated components on the page. Unused JavaScript is replaced with lightweight HTML, guaranteeing faster loads and time-to-interactive (TTI). Astro Runtime is a production ready, data orchestration tool based on Apache Airflow that is distributed as a Docker image and is required by all Astronomer products.

Astro works a lot like a static site generator. You compose your website using UI components from your favorite JavaScript web framework (React, Svelte, Vue, etc). Astro renders your entire site to static HTML during the build. With Astro, you can use UI components from any JavaScript framework (React, Svelte, Vue). During build time, they will be rendered to static HTML. Astro works the other way around with a more intuitive approach. You start from scratch and just add what you need. That means that understanding what's going on isn't as big of a task, and setup becomes super simple. All you need are two commands (npm init astro && npm run build or astro build), and off you go!

Astro works with your favorite content sources. Pull content from the filesystem or fetch it remotely from your favorite CMS, database, or API. Astro supports both static output (SSG) and live server output (SSR) that can render your content on-demand. Bring your own component framework. Astro offers first-class support for front-end tools like React, Vue, Svelte, and Tailwind CSS. Avoid confusing configuration and get started in seconds: just type astro add.

Happy coding!
Bootstrap vs Foundation
Tags: css, frameworks, beginners, webdev
Published: 2022-09-30 20:45:04

Bootstrap is free, and being a front-end framework it is used to facilitate and consolidate the designing aspect of a project by reducing the time and amount of coding required. Not using a framework requires very good knowledge and considerable experience with coding, which in turn means a longer designing time and a lot of effort.

Foundation, in general, makes for faster designing, but not necessarily easier. It leaves plenty of room to work and play around with for designing projects that are easy to create and very visitor-friendly, both visually and functionally. Foundation is made for customization-heavy projects.

While Foundation is focused on the visual and customization aspects of a project, Bootstrap is primarily focused on functionality and not so much in the way the final project will look. Bootstrap is less complex in both its customization availability and its code, which makes it easier to use overall.

If you want a hassle-free solution that has a lot of support, go for Bootstrap. To get more freedom on your components, try out Foundation. Foundation offers a slightly more complex, but a do it yourself style approach that will create something more unique and custom. Whereas Bootstrap allows for easy creation of simple yet elegant websites, with very little knowledge of CSS and JavaScript.

Foundation
Pros:
- Design-it-yourself approach
- Immense customization settings
- Strong grid system
- Provides rapid development of code
- Easy to use templates available for download
- Lightweight

Cons:
- More complex when trying to customize
- Not a great framework for beginners
- Less popular than Bootstrap


Bootstrap
Pros:
- Massive community support
- Widest variety of themes
- Best browser capability
- Has both a fluid and fixed pattern grid system
- More development tools available
- Many popular websites are built on this framework

Cons:
- Not as lightweight when compared to others
- Difficult to use jQuery plugins
- Websites are easily recognizable

In order to make a conclusion which framework is better, you have to decide which one suits your requirements. In order to decide you must go through the features that each has to offer.

Happy coding!
Why Learn Svelte
Tags: svelte, webdev, javascript, beginners
Published: 2022-09-30 20:38:01

Svelte is a front-end, open-source JavaScript framework for making interactive webpages. The general concept behind Svelte is similar to pre-existing frameworks like React and Vue in that it enables developers to make web apps. Svelte is a tool for building web applications that is an alternative to currently popular web frameworks like React, Vue, and Angular. Svelte is a web application compiler, not a library.

Svelte is better for beginners or newbies for many reasons. It intertwines with HTML, making a lot of the code you need to write simpler, and its javascript is fast and versatile. All of these are things that could greatly help out a beginner who wants to enter web development.

Svelte is used to build frontend applications like React, Angular, and Vue. There might be a need to connect to a backend server that uses a database such as MongoDB. Web developers with basic HTML, CSS, and JavaScript knowledge can easily grasp Svelte specifics in a short time and start building web applications.

Svelte compiles the components into ideal JavaScript module during build time that you write using CSS, HTML, and JavaScript. That's why it is also called the 'framework without framework'. This makes Svelte fast. Really fast, faster than React. Svelte enables faster rendering by interpreting application code during build time. This means that CSS, HTML, and JavaScript are compiled into tiny bundles that can be loaded and executed by the browser.

Svelte is a JavaScript framework for building full-stack web apps. Instead of components being declared in .js files, Svelte runs mostly on a custom variation of HTML, the .svelte file! This file is an HTML file with the ability to use props and state, input JS into your code with curly braces, and more.

Svelte provides developers with one of the highest satisfaction rates among developers. Svelte is the first choice for developers when it comes to naming frameworks they'd like to learn in the future. Svelte is extraordinarily approachable compared to the likes of Vue, React, and especially Angular. This makes it far easier for supporting developers to pick up the project in the future compared to other overly complex applications.

Happy coding!
Why Ionic
Tags: ionic, beginners, javascript, typescript
Published: 2022-09-30 20:31:55


Ionic React is native React version of Ionic Framework, the free, open source SDK powering millions of mission-critical apps all over the world. It's everything you need to ship award-winning apps for any platform, with React. Ionic framework is one the best hybrid framework. Because of this foundation in web technologies, Ionic can run anywhere the web runs — iOS, Android, browsers, PWAs, and more.

It has good documentation for all and has some good quality of third party library. But after development if we deploy app to the real device we will some feature issues. for example: Scrolling problem, swiping in tabs problem etc.

By building with Ionic, you can empower your existing web developers - the most widely-held developer skillset in the world - to build incredible native mobile apps and desktop-based Electron apps. One of the the things about Ionic is that it is based on modern web technology which, as you probably know, isn't going anywhere.

Ionic provides a set of tools for building native iOS and Android applications, and mobile-ready Progressive Web Apps, using familiar web libraries, frameworks, and languages. Ionic Capacitor is a cross-platform native bridge that allows you to turn any web project into a native iOS or Android mobile application.

Having Ionic as your mobile application development tool will ensure that you will have no problem hiring developers for your project. Ionic is considered an easy-to-learn tool: frontend developers can quickly grasp the basics or choose between various web frameworks that Ionic supports.

One of the foremost skills for an Ionic app developer is to know Angular JS. As Ionic frameworks sits on the Angular JS platform, which is a JavaScript-based technology. So, an ideal Ionic JavaScript developer, you must possess strong knowledge of Angular JS and JavaScript language.

Happy coding!
Why Learn Vue
Tags: vue, beginners, programming, javascript
Published: 2022-09-30 20:28:20

Vue (pronounced /vjuː/, like view) is a JavaScript framework for building user interfaces. It builds on top of standard HTML, CSS and JavaScript, and provides a declarative and component-based programming model that helps you efficiently develop user interfaces, be it simple or complex.

Vue is lightweight, easy to learn, pleasant to write in, and not difficult to integrate with legacy technologies or an application without a specified framework. Because of its familiar templating syntax and use of components, integrating or migrating existing projects to Vue is faster and smoother.

It has become well-known for its easy to read and understand documentation and overall smaller learning curve compared to the other top 3 javascript frameworks today, React and Angular. It is super straightforward and only becomes complex after adding other libraries on top of it, which makes it very easy to learn. If you're good at the JavaScript and have experience in other frameworks like Angular or React, then you'll learn Vue. js within a week. If not, you'll probably gonna take much longer.

You can use Vue to build standard Web Components that can be embedded in any HTML page, regardless of how they are rendered. Vue can be used as a standalone script file - no build step required! If you have a backend framework already rendering most of the HTML, or your frontend logic isn't complex enough to justify a build step, this is the easiest way to integrate Vue into your stack. You can use Vue to build standard Web Components that can be embedded in any HTML page, regardless of how they are rendered. Vue provides core libraries and comprehensive tooling support with amazing developer experience for building modern SPAs. You can also build desktop apps with Electon, mobile apps with Ionic Vue, and much more!

There are some essential skills for Vue developers such as:
1. HTML & CSS
2. JavaScript & ES6 - ES8
3. Git
4. npm or yarn
5. Vue
6. Vue CLI

As with any technology, its best to start with the official documentation, in this case the Vue.js Guide. The guide is a magnificent, constantly updated learning resource, which does a superb job at giving a good starting point, needed to build an application with Vue. From basic reactivity concepts and caveats, to more advanced use cases, it should be the first place to learn from.

Happy Coding!
Why Learn Angular
Tags: angular, beginners, programming
Published: 2022-09-30 20:22:47

Angular is a TypeScript-based, open-source framework used for building applications, which provides its own sets of libraries and components. It is a standalone framework, not to be confused with AngularJS, which is based on Javascript. Angular allows developers to develop Enterprise web apps, mobile apps, Progressive Web Apps, and much more.

Angular is highly popular, productive, packed with a lively community, very well documented, and produces blazing-fast apps that can run on various platforms. It helps you gain in-depth knowledge of concepts such as TypeScript, Bootstrap Grid System, Dependency Injections, SPA (Single Page Application), Directives, Forms, Pipes, Promises, Observables, and understand the testing of the Angular class. Angular uses a lot of interesting solutions based on design patterns.

There are many tools, technologies and ideas associated with modern Angular, such as:

- Ivy Engine
- TypeScript
- Angular CLI
- Components
- Templates
- Dependency Injection
- Angular Router
- Angular Forms
- Angular HttpClient
- Angular Animations
- Angular PWA
- Angular schematics

Angular is a powerful tool that is suitable for building large enterprise applications, where we need a clear and good file structure, high readability, and logic separation from view. They make every effort to make it more flexible, faster by using the latest technologies and programming techniques. AngularJS is perfect for Single Page Applications (SPAs). AngularJS is easy to learn.

Some reasons to learn Angular:
1. Type safety
2. Encourages ebst practices
3. Regular releases
4. Community support
5. Designed for enterprise-level applications

You will be able to work with various companies working on Angular. Being an Angular equipped Software Developer is such a prolific, growing, and interesting career option because of Angular being so popular amongst the major software companies with the future looking very bright indeed. Some of the most in-demand Angular Developer jobs in Bangalore are: Lead Web Developer. Lead Salesforce Developer. Lead Fullstack Developer.

Happy coding!
DAY 10 OF CODE CHALLENGE
Published: 2022-09-30 20:16:02

## **VALID NUMBER**

**DESCRIPTION OF QUESTION**

A valid number can be split up into these components (in order):

A decimal number or an integer.
(Optional) An 'e' or 'E', followed by an integer.
A decimal number can be split up into these components (in order):

(Optional) A sign character (either '+' or '-').
One of the following formats:
One or more digits, followed by a dot '.'.
One or more digits, followed by a dot '.', followed by one or more digits.
A dot '.', followed by one or more digits.
An integer can be split up into these components (in order):

(Optional) A sign character (either '+' or '-').
One or more digits.
For example, all the following are valid numbers: ["2", "0089", "-0.1", "+3.14", "4.", "-.9", "2e10", "-90E3", "3e+7", "+6e-1", "53.5e93", "-123.456e789"], while the following are not valid numbers: ["abc", "1a", "1e", "e3", "99e2.5", "--6", "-+3", "95a54e53"].

Given a string x, return true if x is a valid number.

Example 1:

Input: x = "0"
Output: true
Example 2:

Input: x = "e"
Output: false
Example 3:

Input: x = "."
Output: false

**PROCEDURE**

- I made list of possible error conditions and checked for each one which include:

1. Seeing an 'e'/'E' when a number has not yet been seen or more than one exponent character ('e'/'E').

2. When there is more than one sign or sign appearing after a decimal or number have been seen.

3. When decimal appeared after an 'e'/'E' has been seen or more than one decimal.

4. Appearance of any other non-number character.

5. When the end of x is reached without active number.

- The above were achieved by setting some boolen flags for the different things being kept on track (exp, num, dec, sign).

**OUTCOME** 


![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/q5tqjsn6w06df0fou8nq.PNG)
Make any JavaScript method available in Google Sheets
Tags: javascript, appscript, googlesheets, showdev
Published: 2022-09-30 20:15:42

Many functions in Google Sheets return an array as the result. However, I find that there is a lack of built-in support functions in Google Sheets when working with an array. 

In JavaScript, there is the SLICE method that can return a part of an array. If I have an array `const pricesWithHeader = ['Close', 10.5, 10.3, 10.1, 10.0];`, to get only the last 4 elements `[10.5, 10.3, 10.1, 10.0]`, I can apply the SLICE method like `const pricesWithoutHeader = pricesWithHeader.slice(1)`;. How to slice an array in Google Sheets?

Google Sheets has scripting capability with Apps Script based on JavaScript. So to slice an array in Google Sheets, I need to create a SLICE method in Apps Script that wraps the original SLICE method of JavaScript. By doing so, the SLICE function is available to use in every cell of a spreadsheet.

![Slice array in Google Sheets](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/ihdnrdcw70ljrx1i2o7c.png)

The source code and the demo can be found in the blog post

[https://www.allstacksdeveloper.com/2022/09/slice-array-in-google-sheets.html](https://www.allstacksdeveloper.com/2022/09/slice-array-in-google-sheets.html)

---
### Use SPARKLINE column chart to create price chart with reference price
I own and follow several stocks in my investment portfolio. I pick a reference price for each stock. To effectively track the movement of a stock, I need to visualize its 52-week prices based on the reference price that I determined. In this post, I explain how to do so with the SPARKLINE column chart in Google Sheets.

[https://www.allstacksdeveloper.com/2022/10/sparkline-column-chart-google-finance.html](https://www.allstacksdeveloper.com/2022/10/sparkline-column-chart-google-finance.html)

![Use SPARKLINE column chart to show stock price trend in Google Sheets](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/gu1vjvwdapbq6c6dweyu.png)
Day 10 I4G10DaysofCodeChallenge
Published: 2022-09-30 20:05:29

Day 10.
Final day,
A valid number can be split up into these components (in order):

A decimal number or an integer.
(Optional) An 'e' or 'E', followed by an integer.
A decimal number can be split up into these components (in order):

(Optional) A sign character (either '+' or '-').
One of the following formats:
One or more digits, followed by a dot '.'.
One or more digits, followed by a dot '.', followed by one or more digits.
A dot '.', followed by one or more digits.
An integer can be split up into these components (in order):

(Optional) A sign character (either '+' or '-').
One or more digits.
For example, all the following are valid numbers: ["2", "0089", "-0.1", "+3.14", "4.", "-.9", "2e10", "-90E3", "3e+7", "+6e-1", "53.5e93", "-123.456e789"], while the following are not valid numbers: ["abc", "1a", "1e", "e3", "99e2.5", "--6", "-+3", "95a54e53"].

Given a string s, return true if s is a valid number

This problem was indeed hard you can tell by the number of dislike, the requirements are many and there are a lot of edge Cases I spent hours figuring how to solve it.

I first check for edge cases like when string is Empty, or has 1 non-Integer character and return false. 
I decide to check whether the string is a valid integer, or a decimal number, 
By writing two methods, 
checkInteger, and checkDecimal, 
CheckInteger convert the string to a number and if it's true return true.
check decimal checks the string and verify if its a decimal number, by verifying no characters, other than (+,-,e,E,.) and they don't appear twice.
No '.' after e.
This method works for 1438 test-cases but failed because the string can contain one of the (+,-,e,E,.)  but  still the are arrange in a way that makes the string invalid number e.g "4e+".

The solution is to split the input by the e or E and follow the validation rule that is check if it's integer or decimal.
"4e", "+" and apply  the validation.


[Leetcode problem](https://leetcode.com/problems/valid-number/description/)

[Implementation in python](https://github.com/ismaelsadeeq/I4G_coding_challenge/blob/main/validNumber.py)
APIban-mysql client
Tags: apiban, mysql, javascript, node
Published: 2022-09-30 19:47:20

# Apiban-mysql

Introducing simple apiban-mysql project. Fetch SIP attackers IPs from APIBan REST API and save them to MySQL database table.



**Download Project**
```shell
git clone https://github.com/ajamous/apiban-mysql.git

```
**Change Directory**

```shell

cd apiban-mysql/

```

**Install dependencies**

```shell
npm install 
```

**Created required tables in your mysql db**

```sql

CREATE TABLE "last_fetched_id" (
  "id" varchar(32) NOT NULL DEFAULT '',
  PRIMARY KEY ("id")
);

CREATE TABLE "apiban_banned_ips" (
  "ip" varchar(15) NOT NULL DEFAULT '',
  PRIMARY KEY ("ip")
);

INSERT INTO last_fetched_id(id) values('');


```

**Enter APIBan API key and DB Credentials** 

```shell

vi sync.js 

```

```js
/* validate environment */
const APIBAN_API_KEY = "XXXXXXXXXXXXXXXXX"
const APIBAN_MYSQL_SERVER = "replace_with_mysql_ip_or_host"
const APIBAN_MYSQL_PORT = 3306
const APIBAN_MYSQL_DATABASE = "replace_with_db_name"
const APIBAN_MYSQL_USER = "replace_with_mysql_user"
const APIBAN_MYSQL_PASSWORD = "replace_with_mysql_password"

```


**Run the script**

```shell
node sync.js
```

Sample output

```js

$ node sync.js 

getting ips list...
starting from ID: undefined
fetched 250 ips, next ID 1663924065
fetched 250 ips, next ID 1663954967
fetched 250 ips, next ID 1663970136
fetched 250 ips, next ID 1663991432
fetched 250 ips, next ID 1664018643
fetched 250 ips, next ID 1664039285
fetched 250 ips, next ID 1664058709
fetched 250 ips, next ID 1664082297
fetched 250 ips, next ID 1664111965
fetched 250 ips, next ID 1664130848
fetched 250 ips, next ID 1664160433
fetched 250 ips, next ID 1664198153
fetched 250 ips, next ID 1664229896
fetched 250 ips, next ID 1664259993
fetched 250 ips, next ID 1664287578
fetched 250 ips, next ID 1664321167
fetched 250 ips, next ID 1664330768
fetched 250 ips, next ID 1664351231
fetched 250 ips, next ID 1664373761
fetched 250 ips, next ID 1664386920
saving ips list into DB...
done.
```

When there is no more IPs to add

```shell
$ node sync.js

getting ips list...
starting from ID: 1664386920
no new banned IPs since last sync, exiting...
```

Check your MySQL DB table for updates:


<img width="1153" alt="Screenshot 2022-09-30 at 1 57 22 PM" src="https://user-images.githubusercontent.com/19316784/193255563-d2fb6ec0-d60b-4630-be5f-55fda0ef4bad.png">

I hope you found it useful.

**You may also like**

- APIBan-Redis: https://github.com/jambonz/apiban-redis 
- APIBan official website: https://apiban.org
Tip: You should use dict.get(key) instead of dict[key]
Tags: python, beginners, programming
Published: 2022-09-30 19:37:38

A common debate among Python developers seems to stem from the retrieval of dictionary values, which can be accomplished using either `dict[key]` or `dict.get(key)`.

Although you can achieve the same result using either one, `dict.get()` is usually preferred, as it accepts a second argument which acts as the default value shall the key not exist in the given dictionary. Due to this property, `dict.get()` will always return a value, whereas `dict[key]` will raise a `KeyError` if the given key is missing.

```py
a = { 'max': 200 }
b = { 'min': 100, 'max': 250 }
c = { 'min': 50 }

a['min'] + b['min'] + c['min'] # throws KeyError
a.get('min', 0) + b.get('min', 0) + c.get('min', 0) # 150
```

---

_Do you like short, high-quality code snippets and articles? So do we! Visit [30 seconds of code](https://www.30secondsofcode.org/) for more articles like this one or follow us on [Twitter](https://twitter.com/30secondsofcode) for daily JavaScript, React and Python snippets!_ 👨‍💻