teleren/devto huggingface dataset:
Self-Taught Developer Journal, Day 20: TOP Landing Page Cont.: The Fourth Section and Footer
Tags: webdev, beginners, codenewbie, devjournal
Published: 2021-12-18 05:59:54

Today...

## Thinking Through The Odin Project Landing Page cont.
![The Odin Project Project Landing Page Full Design Image](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/qcwlb2cle80pmz7kpksx.png) 

I added the background color for the inner call to action box so I could see where the container was. Then I made cta-section a flex container to use justify-content: center and align-items: center to quickly center the inner box.

I set the border radius of the inner call-to-action box to round the corners. Next, I realized I needed to arrange the items in the inner box and created class containers for the left and right elements in the HTML document. A similar approach to how I did the hero section.

![Add Containers](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/8acvcinm6cegqwwcwgwu.png)
 
Once that was completed, I set the inner call-to-action class into a flex container, centered the items, and added padding. 

I removed the margin and padding from the left text. I made a class for the call to action heading to select and style it since I used a div element. Lastly, I configured the button style and added margin-left to create space between the button and text.

![Completed Fourth Section and Footer](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/k4hwf54uz4catb4t8l6t.png)

I finally completed my first landing page! It was much harder than I imagined, but I could tell I was improving as I continued based on how much easier it was to recall what to do. Now onto JavaScript!

## Resources
[The Odin Project Landing Page Project](https://www.theodinproject.com/paths/foundations/courses/foundations/lessons/landing-page)

Day 19: https://dev.to/jennifer_tieu/self-taught-developer-journal-day-19-top-landing-page-cont-complete-the-third-section-2pbj
Please refer to [Starting My Self-Taught Developer Journey]( https://dev.to/jennifer_tieu/starting-my-self-taught-developer-journey-2dga) for context.
How to Change Business Address On Google?
Published: 2021-12-18 05:52:55

You just shifted your business to a new location, and your customers stopped visiting your shop or store.  So Don’t worry in this article I Explained **[How to Change Business Address On Google](https://www.citationbuilderpro.com/how-to-change-business-address-in-google-maps/)**.

If you shift your business without notifying your customers, you will most probably lose even the most loyal customers. The biggest mistake that businesses make when they are moving to a new location is not updating their location on Google Maps.

If you are a business owner, you must realize that you are dealing with modern clients, and they depend upon Google Maps and navigation. If you move but don't remember to update your location for Google Maps, you will have a great time with your loyal customers. While some businesses forget to update their address, there are some that fail to do it, and eventually, they give up.
Citation Builder Pro
Published: 2021-12-18 05:43:05

Local citations are any online mention of the name, address, and phone number for a local business. 

On different websites such as local business listing directories, websites, social platforms. Local SEO [citation building services](https://www.citationbuilderpro.com/)  help internet users to discover local businesses and can also impact local search engine rankings.

We list your business on free local business listings sites, Data Aggregators, high DA sites.
Twelve-Factor App Methodology
Tags: saas, microservices, cloudnative
Published: 2021-12-18 04:59:41

The Twelve-Factor App is a methodology that defines a set of steps (twelve steps) to building the software-as-a-service apps. Basically, when we create a microservices app and run it in a cloud environment, we are creating a software-as-a-service because our software is exposed as a service to the end-user. An application totally compliant with the cloud is called a cloud-native application.

The following are the twelve factors:

1. Codebase: One codebase is tracked in the revision control, while many deploy.

2. Dependencies: Explicitly declare and isolate dependencies.

3. Config: Store config in the environment.

4. Backing services: Treat the backing services as attached resources.

5. Build, release, run: Strictly separate the build and run stages.

6. Processes: Execute the app as one or more stateless processes.

7. Port-binding: Export the services via port binding.

8. Concurrency: Scale-out via the process model.

9. Disposability: Maximize robustness with a fast startup and graceful shutdown.

10. Dev/prod parity: Keep development, staging, and production as similar as possible.

11. Logs: Treat logs as event streams.

12. Admin processes: Run admin/management tasks as one-off processes.

The twelve-factors is a guide to develop applications capable to take advantage of cloud computing. In other words, when we follow all the steps of the twelve-factors guide, our applications or microservices are a cloud-native application and is totally compliant with the cloud computing approach.

Hope this was helpful.
Intro to HTML
Published: 2021-12-18 04:51:00

HTML stands for Hypertext Markup Language. It makes up the structure of content on the web. It is not a programming language like Ruby or Java because it can not process logic like programming languages can. For example you can not implement an if else conditional block in HTML. 

HTML is strictly just a markup language. An HTML document is made up of tags or markup elements that wrap it's content. These usually consist of an opening and closing tag, though some tags are self closing. A tag that defines the document called the doctype declaration tag is needed at the top of the document to tell the web browser the type of HTML being used. 

The HTML tag is used to tell the browser that everything in between these tags is HTML markup. Two other tags needed for your HTML document are the head tag and the body tag. The head tags contain the metadata between it which is data about the HTML document itself and it also contains other information for the web browser. The body tags contain the main content between it which usually includes other tags such as headers and paragraph tags. Headers range from h1 to h6 (largest to smallest), they change the way text appears and allow search engines to determine what the web page is about. A title tag is a tag that contains text which is displayed in the upper tab of the web page usually used to describe the page content.


```html
<!DOCTYPE html>

<html>
  <head>
	
    <title>Webpage</title>
    <meta charset="UTF-8" />

  </head>
  <body>
		
  </body>
</html>
```
##Attributes

HTML attributes are used to provide additional information to your elements such as links or properties like width and height. They are implemented with a `name="value"` in the opening tag of an HTML element, where name is the attribute name and value is the attribute value. 

##Comments

HTML comments are used as helpful notes in the HTML document. They do not get rendered to the browser with the other code.  `<!-- This is a comment -->`.

##Images and Lists

Images can be inserted into our web pages using the img tag along with the src attribute `<img src="image-url"  alt="description of image">` , the alt attribute is used to describe the image, it is useful for users with disabilities and for images that have trouble loading. In HTML lists are another common markup element. The types that are usually used are unordered lists and ordered lists. Unordered lists contain list item tags that appear bulleted. Ordered lists contain list item tags that appear numbered.

```html
<!-- Unordered Lists -->
<ul>
 <li></li>
 <li></li>
</ul>
```

```html
<!-- Ordered Lists -->
<ol>
 <li></li>
 <li></li>
</ol>
```

##Conclusion

In summary, HTML is needed to develop for the web as it is a necessary tool to build web pages and web apps. It makes up the structure  of our websites.
Download spotify music for no cost!
Tags: python, opensource, spotify
Published: 2021-12-18 04:44:33

Hey there!
Check out this little project I worked on that you might find useful :)

---
## Features
* Download single song
* Download Youtube Playlist
* Download Spotify playlist/album (searches on youtube and downloads the top result)
* Convert downloaded songs to mp3 or flac

---

## The final result
![https://open.spotify.com/playlist/4WtqLI6gaRFaWB4g6mDnAX](https://github.com/insaiyancvk/pymusicdl/raw/main/assets/downloads.jfif)

Check out the installation guide on [GitHub](https://github.com/insaiyancvk/pymusicdl)!
id() in python
Tags: python, memorymanagement
Published: 2021-12-18 04:28:59

In this post, I will try to improve your idea about memory in python using the in-built `id()` function. For those of you who don't know what `id()` is:

>  The `id()` function returns a unique ID of the object. All objects in python have a unique ID and no 2 different values correspond to the same ID.

So let us begin with a small example:

```py
a = b = 500
print(id(a) == id(b))
```

> **Fun fact:** In python, `id(a) == id(b)` is analogous to `a is b`.

The above code prints `True` because python creates the variable `b` with the value `500` and then creates a variable `a` pointing to the value of `b`. This implies that `a` and `b` are pointing towards the same memory location and hence the same ID.

<hr>

Now let us raise the bar:

```py
a = 500
b = 500
print(id(a) == id(b))
```

The above code prints `False` because: 

* Python creates a variable `a` pointing to the value `500` in the memory. 
* Then it creates another variable `b` pointing to another value `500` (yeah, both 500 are different).

Hence, both have different IDs because both point towards different memory locations.

<hr>

I hope this isn't confusing because there is more to come. Guess the output for this:

```py
a = 50
b = 50
print(id(a) == id(b))
```

Some of you may think _"This is the previous question with different values. I know the answer is `False`"_ but not so fast.

![Not so fast](https://c.tenor.com/zYO7NF-U234AAAAC/er-not-so-fast-hold-up.gif)

For small integers (The CPython range is -5 to 256, both inclusive), then integer objects (`<class 'int'>`) are shared. This is done entirely to save space. The memory imprint of the console would be significantly larger if these objects weren’t sharing their memory.

So the correct answer is `True`

<hr>

Okay, okay. Just one more to go. The last one:

```py
a = 500
id1 = id(a)
a = 500
id2 = id(a)
print(id1 == id2)
```

Well, even though I am re-declaring the same variable with the same value, the answer is **most likely** to be `False`. I'll explain to you why. When you re-declare a variable in python, the interpreter works in the same way as a declaration. i.e. It entirely deletes the before existing value and creates a variable with the new value. So when we give `a = 500`, the second time the interpreter deletes the previously existing value of `a` and create a new memory location for `500` where `a`  would point towards. Both these IDs are most likely to be different.

SO, the answer is `False`.

**NOTE:** If the above example had a number belonging to the inclusive range -5 to 256, the answer would have been `True`. this is because number belonging to the inclusive range have a fixed memory location.
Use raw socket in Dart
Tags: dart
Published: 2021-12-18 04:13:40

In the [previous post](https://dev.to/0xbf/use-dio-in-flutter-dart-307o) we showed how to use the `dio` lib in Dart to send http request, this one we will show an example of using the raw `Socket` object to send a http GET request.

```dart
import 'dart:convert';
import 'dart:io';

void main() async {
  var socket = await Socket.connect("httpbin.org", 80);
  socket.writeln("GET /get HTTP/1.1");
  socket.writeln("Host:httpbin.org");
  socket.writeln("Connection:close");
  socket.writeln();
  // send request
  await socket.flush();
  // now get response content and decode it with utf-8
  String resp = await utf8.decoder.bind(socket).join();
  await socket.close();
  print(resp);
}
```

Run it:
```bash
$ dart main.dart
HTTP/1.1 200 OK
Date: Sat, 18 Dec 2021 04:12:20 GMT
Content-Type: application/json
Content-Length: 197
Connection: close
Server: gunicorn/19.9.0
Access-Control-Allow-Origin: *
Access-Control-Allow-Credentials: true

{
  "args": {},
  "headers": {
    "Host": "httpbin.org",
    "X-Amzn-Trace-Id": "Root=1-61bd5fa4-17f8006279006770433cc1ec"
  },
  "origin": "67.83.127.85",
  "url": "http://httpbin.org/get"
}
```
Our entrepreneur virtual coworking space setup
Published: 2021-12-18 04:13:40

A virtual coworking space for entrepreneurs is a place where indie makers from all over the world can work together on their projects while supporting each other and feeling like part of a team.

I have been growing the [WBE space](https://wannabe-entrepreneur.com/coworking/) for the past 5 months to a community that has 40 members now and here is the setup that best works for us:

**Slack Channel**

This channel is the center of communication and the place where most of the indie makers hang out.  I have tried out multiple channels but here are the ones that have the most engagement:

**- what-i-am-doing-today:** Everyday members write down their daily goals and support each other with encouraging words or relevant tips. I am quite surprised with the fact that people not only share their business-related tasks but also more personal ones... Really cool!

**- victories-and-frustrations:** We celebrate each other victories and give support when needed. This channel is not used on a daily basis by every member but it's still very popular

**- introductions:** This is a classic but a must for every community. I set up an automatic message that asks every new member to introduce themselves in the channel. It works as an ice breaker for the newbie and the members are very welcoming.

We have a couple of other popular channels like the **looking-for-advice,** **feedback**, and **today-I-learned** which are used multiple times a week.


**Virtual Office Rooms**
Using jitsi and the slack API I created two virtual rooms that are available 24/7:

**- Work Room:** Entrepreneurs turn on the camera and work together in their individual tasks. Is like being in an office. I also implemented a shared Pomodoro timer 🍅 , so normally we work for 30min, have a 5min chat, and restart

**- Break Room:** Just a place to chill and drink a coffee or beer and chat about our projects and life in general. Once a month we also do a community event that gathers most of the members.


**Entrepreneurs Wiki**

I put it together using netlify cms and it works great! Is a place where members can document their favorite tools together with how they use them. I also use it to document all the community-only discounts that I have been able to get from SaaS founders.

**Pricing**
A member pays 4 euros per month to be part of the space, I use [buymeacoffee](https://www.buymeacoffee.com/) to manage the subscriptions. To be honest I haven't played much around the pricing but from what I gathered the members seem quite happy with it. One cool thing I noticed is that the paying members are much more active and engaged than the guests...

And here is what I have learned so far and how our setup looks like. If you have a community I would love to hear about your setup and let me know if you have any questions.

Cheers
Enforcing Custom Business Rules In RADZEN SERVER SIDE BLAZOR Using C# (Iya Elepo App Part 3)
Tags: csharp, blazor, radzen, businessrule
Published: 2021-12-18 03:59:42

In this video, I show you how to implement custom business rules in a RADZEN BLAZOR Page by using Visual Studio 2022 and RADZEN.
{% youtube _8RaLPff2IY %}


Source code and database files can be pulled from {% github benjaminsqlserver/IyaElepoAppLessonThree %}
Use-case for css `revert` value
Tags: css, webdev, beginners
Published: 2021-12-18 03:52:15

I know that css has `revert` value, but when to use? 🤔

## One of the use-case

When reseting the link decoration but want to have the decoration back when hovering the element.

![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/6fk6ipfrj3eapooewx05.gif)

```css
a {
  text-decoration: none;
  color: inherit;
}

a:hover {
  text-decoration: revert;
  /* text-decoration: underline; */
}
```

## What's good about it?

I think it is slightly better than giving `text-decoration: underline;` explicitly, in order to be flexible for changes.

## Any other use-cases??

Please leave a comment if you know other commonly used use-cases for `revert` 🙏
Public Solving: Matching smudged names
Tags: javascript
Published: 2021-12-18 03:29:06

Oh no, some packages fell off the sled, and the names are only partially readable.

[You can find the puzzle here.](https://github.com/devadvent/puzzle-7)

It's up to us to predict which name is on each smudged package.

We receive a list of all the children's names and a list of gifts with smudged names.

Let's get right into thinking out the solution to help Santa as soon as possible.

## Thinking about the solution

My initial thought is, great, we can use the filter method to filter the list of names with whatever name roughly matches the smudged name.

To do the rough matching, we can actually use Regex and not a super-advanced one, as you might think!

## Finding the smudged names

Alright, let's get right into it.

First of all, we need to import all the kids names.

```js
import names from '../data/names.js';
```

Then we can return the array of names using the [JavaScript `filter` method](https://daily-dev-tips.com/posts/javascript-filter-method/) to find the good ones.

```js
return names.filter((name) => {
	// Todo
});
```

Then inside this, we need to define a regex to match a part of the string.

Let's take a look at how the smudging looks like:

```js
// Some examples:

Fr#der##k
Jo#ann#
Patt#
```

For `Patt#`, we should get two potential hits: `Patti`, and `Patty`.

The cool part about this assignment is that it states a smudge is always one letter. 
And Regex comes with a great tool, the dot (`.`), which says: ". matches any character (except for line terminators)"

So we can replace all `#` with `.` and we should get pretty far already.

```js
return names.filter((name) => {
	const regex = new RegExp(smudgedName.replaceAll('#', '.'));
	return name.match(regex);
});
```

This uses the [`RegExp` function](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Guide/Regular_Expressions), where inside, we replace all hashtags with dots.
Then we return only if the name matches this regular expression.

And the results look very promising, but not perfect!

Remember `Patt#` it also matches: `Patterson`, which surely can't be right as it's too many characters!

We can simply fix this by adding a `$` sign at the end of our regular expression.
The `$` stands for the end of the line.

Making our complete function look like this:

```js
return names.filter((name) => {
	const regex = new RegExp(`${smudgedName.replaceAll('#', '.')}$`);
	return name.match(regex);
});
```

Let's run the test and see what happens:

![Test running and succeeding](https://cdn.hashnode.com/res/hashnode/image/upload/v1638879949599/-qiGC7tav.png)

There we go. We fixed it.

I would love to hear your approach for this solution or what you would change.

### Thank you for reading, and let's connect!

Thank you for reading my blog. Feel free to subscribe to my email newsletter and connect on [Facebook](https://www.facebook.com/DailyDevTipsBlog) or [Twitter](https://twitter.com/DailyDevTips1)
I made a tool that makes large datasets like Stock, Crypto, eCommerce pricing & fundamentals available via an API in CSV or JSON
Tags: bigdata, analytics, datascience, machinelearning
Published: 2021-12-18 02:39:13

Hey All,

With all the Wall Street Bets hype I've developing/testing automated investment/trading strategies in crypto/stocks. I was struggling to get large amounts of data cheaply like total historical stock/crypto prices or historical news to analyse patterns and so I built a [tool](https://gigadata.com.au/?ref=dev_to/) that does this. 

Basically you can get data like prices, news, financials, press releases, shareholder changes, reddit posts via an API in JSON or CSV format. I am adding more exchanges and alternative datasets like eCommerce pricing and stock levels with time. The data goes back decades. It's cleaned, formatted and analysis ready.

The project is still in development and looking to launch an Alpha soon. Would love to get any feedback, questions or to simply find out your data needs
Here is a link: [https://gigadata.com.au](https://gigadata.com.au/?ref=dev_to/)
Develop Spring boot REST API in AWS - PART 4/4 (CodePipeline / CI CD)
Tags: aws, springboot, java, cicd
Published: 2021-12-18 02:34:02

This is the last video (part4) in this demo series. We will demonstrate how to create the whole CICD pipeline in this tutorial video.

It involves the following steps:

(1) Create CodePipeline

(2) Add build stage to pipeline

(3) Add deploy stage to pipeline

(4) Add manual approval step to pipeline


YouTube: {% youtube VpHDZekd8tA %}

Thank for watching!





[Source Code](https://github.com/babysteps-topro/aws-springboot-pipeline1.git)
flutter #2 #routes - simple
Tags: flutter, dart, mobile
Published: 2021-12-18 02:18:33

De todas las **_Page creadas_** en directorio **_/screens_** creamos un exportador de Pages **_Index.screens.dart_**.
![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/fdrclcx5pckkrfw7cvio.png) 
```
export 'package:myapp/screens/Home.screen.dart';
export 'package:myapp/screens/Register.screen.dart';
export 'package:myapp/screens/Dashboard.screen.dart';
```
Creamos **_Routes.dart_** donde importamos el **_exportador_** de **_Pages_** y se Mapea para entregarse con su ruta en la funcion 

> getRoutes()
```
import 'package:myapp/screens/Index.screens.dart';

  Map<String, WidgetBuilder> getRoutes() {
    Map<String, WidgetBuilder> routes = Map();
    routes['/'] = (_) => HomePage();
    routes['/register'] = (_) => RegisterPage();
    routes['/dashboard'] = (_) => DashboardPage();
    return routes;
  }
```
En **_main.dart_** importamos el **_Routes.dart_** trayendo la funcion 
> En MaterialApp agregamos:
> - initialRoute: '/'
> - routes: getRoutes() // con el mapeo de todas las rutas.
```
import 'package:flutter/material.dart';
import 'package:myapp/routers/Routes.dart'; // enrutador

void main() {
  runApp(MyApp());
}

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'My App',
      debugShowCheckedModeBanner: false,
      initialRoute: '/',
      routes: getRoutes(),
    );
  }
}
```

## LISTO!