teleren/devto huggingface dataset:
الخصائص المنطقية فى ال CSS
Tags: css, arabic, javascript, html
Published: 2021-11-28 11:01:39

من الحاجات اللى لازم تبص عليها و تحاول تطبقها عندك ال Logical properties in css لأنها هتوفرلك وقت كبير خصوصا فى التطبيقات اللى فيها كزا لغة.

الموضوع ببساطة ان قديما كان الستايل فى الcss معتمد على الموقع الفعلى للعنصر يعنى لو انت عايز تزود المسافة بين عنصر و العنصر اللى على شماله هتحتاج تقول margin-left بس لو انت غيرت اتجاه الكتابة بتاعك هتحتاج انك تغير ده عشان تتوافق مع الاتجاه الجديد.

هنا تيجى ال logical properties عشان تحللك المشكلة دى بسهولة ، الموضوع ببساطة اننا بدل ما كنا بنعتمد على القيم الفعلية زى يمين و شمال و فوق و تحت دلوقتى بقينا بنعتمد على اتجاه الكتابة و على اساسه بنقدر نحدد كل القيم بتاعتنا عن طريق اننا بنستعمل محورين جداد بنقيس عليهم كل حاجة المحورين دول هما block dimension and inline dimension

الblock ده محور بيكون عمودى على محور الكتابة بمعنى انك لو بتكتب بلغة كتابة افقية هيكون هو المحور الرأسى و بالتالى بدل ما هتستخدم margin-top or margin-bottom هتستعمل margin-block-start or margin-block-end و بكدا هتبقى حددت مسافاتك اعتمادا على اتجاه الكتابة فقط مش اعتمادا على قيم انت اللى محددها بايدك


ال inline dimension هو محور موازى لمحور الكتابة فبدل ما هتستعمل margin-right or margin-left هتستعمل margin-inline-start or margin-inline-end.

الموضوع ممكن يكون محير شوية فى الأول بس لو قريت فيه و فهمته كويس هتقدر تسهل على نفسك كتير و توفر وقت كتير ليك
Returning back to Google Chrome
Tags: productivity
Published: 2021-11-28 10:52:55

In last few months I used Brave browser as simpler experience getting research from the web. 

Unfortunately in last month I got a lot of problems with random crashing tabs. Most of the time it was on simple pages so it was big of deal unless it happens on pages that I prepare some kind of content writing in the form and lost all my work :(

Today I tried to find some pages from my Brave history but after scrolling few days down the whole page refreshed and go to first day fo history making it impossible to work on history of browser :(

Today I decide to back to old Google Chrome + install additional extension so the experience will be as similiar as it can be (more severe privacy settings)
A very very innocent☺️ infinite recursion trap🕸.. must read😱
Tags: go
Published: 2021-11-28 10:48:44

---
title: A very very innocent☺️ infinite recursion trap🕸.. must read😱
published: true
description: 
tags: go
//cover_image: https://direct_url_to_image.jpg
---

Here it is... try to figure out the why part before reading the explanation later...

```go
type TT float64

func (t TT) String() string {
	return fmt.Sprintf("%v", t)
}

func main() {
	var t TT = 12.34
	t.String()
}
```

---

##### Explanation:
`Print` methods that do not use any format specifiers internally call `String()` method on respective data. Example: `Println` or `Printf with %v`. 

> Notice that `%v` too behaves similarly..
Request/Response Cycle of Django — Basic
Tags: django, python, programming, webdev
Published: 2021-11-28 10:43:29

Django is a popular framework that is used by many high level tech companies for back-end development. Django has lots of handy structure to handle web applications. One of them is request/response cycle of django that we will cover today.
Article is [**here**](https://ahmetonursolmaz.org/request-response-cycle-of-django-basic/)!

[https://ahmetonursolmaz.org/request-response-cycle-of-django-basic/](https://ahmetonursolmaz.org/request-response-cycle-of-django-basic/)

![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/6cf3x20wdvtpjdif63co.png)
Methods can be passed around like normal functions... you didn't knew that.. did you?😎
Tags: go
Published: 2021-11-28 10:40:40

---
title: Methods can be passed around like normal functions... you didn't knew that.. did you?😎
published: true
description: 
tags: go
//cover_image: https://direct_url_to_image.jpg
---

`Methods` are just like functions in that they can be used as values, and `passed to other functions as parameters`. 

Let me show you an example:

```go
type T struct {
  a int
}

func (t T) print(message string) {
  fmt.Println(message, t.a)
}

func (T) hello(message string) {
  fmt.Println("Hello!", message)
}

func callMethod(t T, method func(T, string)) {
  method(t, "A message")
}

func main() {
  t1 := T{10}
  t2 := T{20}
  var f func(T, string) = T.print
  callMethod(t1, f)
  callMethod(t2, f)
  callMethod(t1, T.hello)
}
>>> A message 10
>>> A message 20
>>> Hello! A message
```

The part to notice is the `type` of such variable that holds reference to the method:

```go
var f func(T, string) = T.print
```

It has first argument of same `type`, and others are regular arguments needed by that method.
Deploying strapi project on heroku
Published: 2021-11-28 10:15:10

This is the eight blog post on the series of blog post I am posting about strapi,nextjs, and tailwind. We are recreating my portfolio/blogpost page that along the way we'll learn the fundamentals of strapi,nextjs, and tailwind. You can check it out at [myportfolio](https://myportfolioandblog.vercel.app/) If you know the basics of javascript and react then you should be good to follow this blog post and coming blog post on the series. I hope you'll get something out of this series.

In this blog post we're going to deploy our strapi project on heroku. So if you don't have heroku account then go ahead and create also don't forget to install the heroku cli. 

```
heroku version

//output --> heroku/7.59.1 linux-x64 node-v12.21.0
```

Go ahead and login
```
heroku login
```

Now let's create a heroku app for that name of your app must be unique
```
heroku create nameofyourapp
```

Within your strapi project 
```
heroku git:remote -a nameofyourapp
```

Let's setup postgres db
```
heroku addons:create heroku-postgresql:hobby-dev
```

Now we need to set database variable so that stapi can connect to our database for that
```
yarn add pg-connection-string
or
npm i pg-connection-string
```

We also need seprate database config for database so,
Inside Path: ./config/env/production/database.js add this
![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/gxcseup20h0lkilllqh7.png)
```
const parse = require('pg-connection-string').parse;
const config = parse(process.env.DATABASE_URL);

module.exports = ({ env }) => ({
  defaultConnection: 'default',
  connections: {
    default: {
      connector: 'bookshelf',
      settings: {
        client: 'postgres',
        host: config.host,
        port: config.port,
        database: config.database,
        username: config.user,
        password: config.password,
        ssl: {
          rejectUnauthorized: false,
        },
      },
      options: {
        ssl: true,
      },
    },
  },
});

```

This sets the node enviroment variable to production
```
heroku config:set NODE_ENV=production
```

Add ./config/env/production/server.js
```
module.exports = ({ env }) => ({
  url: env('MY_HEROKU_URL'),
});
 
```

```
heroku config:set MY_HEROKU_URL=$(heroku info -s | grep web_url | cut -d= -f2)
```

```
yarn add pg
or
npm i pg
```

```
git add .
git commit -m "Update database config"
```

```
git push heroku master
```


***And that is it about Deploying strapi project on heroku. In another blog post, we'll deploy nextjs to vercel. If you have any problem with this code and then let me know in the discussion.***
TEXT EDITOR
Tags: vscode
Published: 2021-11-28 10:11:34

*A TEXT EDITOR is by far the most used developer tool regardless what type of developer you are.A good text editor can help you to write better code with real-time code checking, syntax highlighting and automatic formatting..

~WHY WE CAN'T USE MICROSOFT WORD?

Because Microsoft word is a rich text editors and are great for writing a paper,but the features that make them good at creating nicely formatted documents makes them unsuitable for writing the code. A document created with these editors has more than just text embedded in the file.

                       These files also contain some information to how to display the text on the screen and data on how to display graphics embedded into the document.

       On the other hand plain text editor like VS CODE and SUBLIME don't save any additional information.


*CODE EDITORS~

It is a specialized web development tools,highly customized and offer many features that will make our life easier.
              Plugins,syntax highlighting,auto-closing of brackets and braces are a few benefits of using this code editor.There are many text editors to choose,bjut i suggest to start with VS CODE.
                      Let's know a little bit information about a VS CODE editor.

~VS CODE is a free code editor.It has outstanding add-on support and great cut integration. you can download the .deb file and install it from here https://code.visualstudio.com/
It works pretty much same on every operating system.

*Learn the basics of using this text editor by this link https://code.visualstudio.com/docs/introvideos/basics
kindly go through the link and watch this out.

                         THANK YOU AND HAVE A GREAT DAY.......
The worst websites
Tags: website
Published: 2021-11-28 10:01:26

The good/bad thing about looking for a job is looking at a lot of websites. And recruitment company websites tend to be overly flashy, I've found. But there were two that stood out as being particularly bad. No names are mentioned here because I didn't make note of them and I can't remember them because it was several months ago.

## Site 1 - animate all the text
You're bound to have seen websites that had some animation as you scroll. Like images coming onto the page as you scroll down. Like it or hate it, we could debate on where the line is on how much of that is acceptable. Except for this site where I can't believe anyone thought it was acceptable (except that clearly someone did).

The job advert was quite long and didn't fit onto one screen. When I scrolled down I got a blank page and then some text appeared. When I scrolled back up I got a blank page and then some text appeared. Which meant that I couldn't read the whole advert in one go, I kept having to wait a few seconds for the text to appear. Which was long enough for me to forget what I'd just read. I ended up having to copy and paste the text into a document so I could read the thing.

## Site 2 - what are labels
I think it's safe to say that we all agree if you have a form you need some sort of text to tell you what should go in each box. I'm not a fan of it only being on the placeholder because it vanishes as soon as you click on it and then you forget what it said. But at least it's better than nothing.

Except on this particular site the placeholder text was such a light grey on a white input that it took me a while to realise there was placeholder text at all. Reading it was impossible. Fortunately, my browser remembers stuff and if I pressed the down arrow it came up with some suggestions, from which I could work out what they wanted. Assuming they set the inputs up properly, which it's only just occurring to me now that they might not.
Deploying DApp to Heroku: Part (4/4)
Tags: blockchain, heroku, react, tutorial
Published: 2021-11-28 09:57:54

![Github & Heroku](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/02k5tlyxzuj8ibmrogft.jpeg)

In this part of the tutorial we'll be deploying the react app we built in the previous section.

> This project is hosted [here](https://simple-bank-co.herokuapp.com/).
Link to Github Repo of the project [here](https://github.com/wasimcodex/SimpleBank). This will serve as a reference for you, if at some point you are not able to follow the tutorial.

For this tutorial you need to have your repo on github. If you haven't done it yet follow these [instructions](https://docs.github.com/en/github/importing-your-projects-to-github/importing-source-code-to-github/adding-an-existing-project-to-github-using-the-command-line) to do so.

## Signup on Heroku and create new app.

* Go to [Heroku](https://www.heroku.com/) and signup.
* Create a new app
![Heroku create new app](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/1mkegjrim1iv74ea2iv6.png)
Give a unique name and select a region.

## Adding Buildpacks

Buildpacks are scripts that are run when your app is deployed. They are used to install dependencies for your app and configure your environment.

Go to app settings.

![Settings](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/2yyurv3h4yx3iu1d1f7s.png)

Here we need to add two buildpacks, one because the project we want to host `frontend` is a subdir in the project and second because heroku doesn't have a official builtpack for react.

Scroll down, click on Add Buildpacks and add 
```
https://github.com/timanovsky/subdir-heroku-buildpack.git
```
```
https://github.com/mars/create-react-app-buildpack.git
```

![Buildpacks](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/l3qt0odmszym4od7cbeb.png)

Make sure they are in the right order as shown above.

## Setting Config Vars

![Config Vars](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/ezjakxo7e9mgc1ghbdic.png)

Go to `Config Vars` section and set up these two variables, `PROJECT_PATH: frontend` and `REACT_APP_ALCHEMY_KEY: <YOUR_ALCHEMY_KEY>`.

## Deploy

Now go to the deploy tab, here we have three different deployment methods. We will use the GitHub method. Click on it and it will ask you to connect to your github account.

![Connect Github](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/fj8868nvxtpe0wlad0ev.png)

Now, search for your github repo and click on connect.

![Deploy](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/unfq7l3iwmk7dep0toaf.png)

Select your branch and `Enable Automatic Deploys`, this will enable continuous integration as and when you push new changes to your deployed branch.

After that click on `Deploy Branch` and we are done. We have now successfully deployed our project on heroku. Click on `open app` at the top to view your project.

I hope this tutorial series helped you understand things a little better and thank you for reading.
Day 74/100 Node.js
Tags: 100daysofcode, programming, challenge, motivation
Published: 2021-11-28 09:42:26

"A student asked, ‘The programmers of old used only simple machines and no programming languages, yet they made beautiful programs. Why do we use complicated machines and programming languages?’. Fu-Tzu replied, ‘The builders of old used only sticks and clay, yet they made beautiful huts."

– Master Yuan-Ma, The Book of Programming

![connection](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/h83mdbyhgpk1zqrahvel.png)
Tiny Google Search Cheat Sheet
Published: 2021-11-28 09:33:07

first of all: you can use [Startpage](https://www.startpage.com/). It is proprietary, hosted in the USA/Netherlands, and provides you with anonymized Google search results (including images). 

`define`   Returns Definition
or `|`
`filetype:` Returns only search results that match a particular file extension.
`site:`	Returns only search results from a particular website.
`to`	Convert measurements from one unit to another.
`do a barrel roll`

other Search engines: Duckduckgo, metager, ...
Get a custom Github octocat in your README
Tags: actionshackathon21, github, opensource, javascript
Published: 2021-11-28 08:46:06

<br/>
### My Workflow
Octo-my-readme is a github action that takes the github octocat and combines it with your most used language in all your repos then displays it in your `README.md` or wherever you place it.

&nbsp;
### Submission Category: 
Wacky Wildcards

&nbsp;
### Link to Code and YAML File
{% github arndom/octo-my-readme-workflow %}

``` yaml

name: Octo my README 

on:
  # schedule: # Run workflow automatically
  #   - cron: '0 * * * *' # Runs every hour, on the hour
  workflow_dispatch: # Run workflow manually (without waiting for the cron to be called), through the Github Actions Workflow page directly

jobs:
  get_lang_gen_octo:
    runs-on: ubuntu-latest
    name: Get Language & Generate Ocoto-lang
    steps:
    - name: Checkout
      uses: actions/checkout@v2
    - name: Get most used language then generate ocoto lang
      id: octo-lang
      uses: arndom/octo-my-readme-workflow@v1

```

&nbsp;
### Additional Resources / Info
This is my first github action and I was stuck for a bit realizing my idea but thanks to existing workflows; [blog-post-workflow](https://github.com/gautamkrishnar/blog-post-workflow) & [github-update-readme](https://github.com/theboi/github-update-readme/) and the styling of the octocat by my friend; [@Rahnard](https://github.com/Rahnard) I was able to make this. 

Hope you like it 🤗, Don't forget to leave a star ⭐
Python decorator to show execution time of a function

Tags: python, programming, performance
Published: 2021-11-28 08:14:56

When working on a high throughput, low latency  system, it's important to measure the execution time of your code to identify bottleneck and fix them. To do so, let's use a decorator to measure the execution time for the function it decorates.

```py

from datetime import timedelta
from functools import wraps
from timeit import default_timer as timer
from typing import Any, Callable, Optional


def metrics(func: Optional[Callable] = None, name: Optional[str] = None, hms: Optional[bool] = False) -> Any:
    """Decorator to show execution time.

    :param func: Decorated function
    :param name: Metrics name
    :param hms: Show as human-readable string
    """
    assert callable(func) or func is None

    def decorator(fn):
        @wraps(fn)
        def wrapper(*args, **kwargs):
            comment = f"Execution time of {name or fn.__name__}:"
            t = timer()
            result = fn(*args, **kwargs)
            te = timer() - t

            # Log metrics
            from common import log
            logger = log.withPrefix('[METRICS]')
            if hms:
                logger.info(f"{comment} {timedelta(seconds=te)}")
            else:
                logger.info(f"{comment} {te:>.6f} sec")

            return result
        return wrapper

    return decorator(func) if callable(func) else decorator
```

By adding this decorator to each function, we can use the analytics from the APM to identify bottleneck and gain better visibility over the system.

Happy coding :D
Fastify port is in use but in reality it is not
Tags: fastify, server, javascript
Published: 2021-11-28 07:46:37

### Problem
This happened to me when I was trying to run my fasify server on local port defined in .env file.

``` Javascript
Fastify error :  Port is already in use 
```
I noticed that port 3000 was available and no application was running on it. I even ran the command
```
sudo pkill node
```
to kill all the instances of running node and free all the ports.
This did not help

### Solution
Upon closer look I noticed that, all the values loaded from .env file are in type `String` and thats what caused the issue. Fastify expect the port in `Number/Integer` type. 
So simple solution to this problem is to conver or parse the string into number before passing it to fastify.
```Javascript
fastify.start(ParseInt(process.env.PORT))
```
JavaScript Struggles - Part 4 | Comparing
Tags: javascript, webdev, beginners, tutorial
Published: 2021-11-28 07:39:32

<h3 align="center"><b><u>Here we go again!</u></b></h3>
![Welcome back](https://media.giphy.com/media/l1J9urAfGd3grKV6E/giphy.gif)

This one is very easy but we all have to know it, you may already heard about it somewhere else too.
If you weren't familiar with JS's comparing way keep going. If you're then this post is not for you. 😊👏🏻 

---

There's two ways of comparing variables in <mark>JavaScript</mark>:
- [**Two** Equal Signs (==)](#Dequal)
- [**Three** Equal Signs (===)](#Tequal)

---

### **Two** Equal Signs (==) <a name="Dequal"></a>
Most majority of programming languages uses `==` as the one and only comparing operator, but in <mark>JavaScript</mark> we're special. 😏

`==` is only comparing the value of the variable, ignoring the data type of it; so if there's a number that is equal to a number <u>inside the string</u> it'll always be true.

E.g.
```js
console.log('0' == 0); // Outputs: true

console.log(1 == true); // Outputs: true
```
**The data type of the variable will not be changed after the comparison**

{% details Some of Its Uses %}
We can use it to check if the number is not `0` or an empty string.
```js
let num = 0;
let word = "";

console.log(num == true); // Outputs: false
console.log(word == true); // Outputs: false

num = 5;
word = "Hey!";

console.log(num == true); // Outputs: true
console.log(word == true); // Outputs: true
```
{% enddetails %}

---

### **Three** Equal Signs (===) <a name="Tequal"></a>
We use this as the normal comparing operator, that's only working with **JavaScript**, **TypeScript**, **PHP**.

What `===` actually does is that it compares the value <u>and the data type</u>.

E.g.
```js
console.log("0" === 0); // Outputs: false

/* They must be of the same data type. */
console.log("0" === "0"); // Outputs: true
```
`===` is the most used one. Probably because it's the easy way of conparing and we all understand it even if JavaScript wasn't your first language.

---

<h4 align="center">Thanks for reading! 😌
I hope this may be helpful for someone.<h4>
[TIL] SomeComponent.props to reuse a components props
Tags: vue, javascript
Published: 2021-11-28 07:08:50

Today I learned you can do this in a `.vue` component file:

```js
<script>
import SomeComponent from "./SomeComponent.vue"

export default {
  props: {
    ...SomeComponent.props
  }
}
</script>
```
This allows to write wrapped components much easier!
Started Youtube Channel
Tags: python, beginners, programming, tutorial
Published: 2021-11-28 06:47:29

I finally started my Youtube channel with the name of Home Coded Meal. https://www.youtube.com/channel/UC_Uf_dG5U5dd7FWpL7NA2GQ

It was really a great deal of time I spent while making the channel logo and banner. I think making the video was easier than that!
The channel will contain the detail explanation of programming concepts and coding practices, concepts and then deep diving into very industry specifics of programming industry!

I do hope I keep the motivation alive to achieve all these milestones and continue to provide free content on such topics.

1 video is already uploaded in the Python series playlist, check it out and share, like and subscribe 😁 
(Damn it certainly has a weird sense of saying that 🤣)

All the support will be appreciated.
Ciao!