teleren/devto huggingface dataset:
Answer: Resizing image and its bounding box
Tags: deeplearning, objectdetection, python, visualization
Published: 2021-07-04 04:57:45

{% stackoverflow 68241813 %}
Resizing image and bounding box separately can be pain and irritating. CHITRA is an image utility library for Deep Learning that can rescale your bounding box automatically based on the new image size.

📝 Docs: https://chitra.readthedocs.io/en/latest/
JavaScript .filter() Method 💭
Tags: javascript, webdev, beginners, functional
Published: 2021-07-04 04:06:43

So today, we shall be discussing about .filter() method in JavaScript.

# The Filter Method
The filter() method in JavaScript takes each element in an array and it applies a conditional statement against it. If this conditional statement returns true, the element gets pushed to the output array. Otherwise, the element does not get pushed to the output array.

The filter() method creates a new array with elements that fall under a given criteria from an existing array.

## Syntax
```javascript
var first_array = arr.filter(
    function callback(element, index, array) {
        // Returns true or false
}[, thisArg])
```

The syntax for filter is similar to that of map, except, the callback function should return true to keep the elements, or false otherwise. In the callback, only the element is required.

## Example
In the below given example, odd numbers are "Filtered" out, leaving only even numbers.
```javascript
const all_numbers = [1, 2, 3, 4];
const even_numbers = all_numbers.filter(number => number % 2 === 0);
console.log(even_numbers);
// [2, 4]
```

In the next example, filter() is used to get all the students whose grades are greater than or equal to 90.

```javascript
const students = [
    { name: 'Mursal', grade: 96 },
    { name: 'Furqan', grade: 48 },
    { name: 'Ahmed', grade: 99 },
    { name: 'Anees', grade: 56 },
    { name: 'Burhan', grade: 90 }
];

const studentGrades = students.filter(
    students => students.grade >= 90);
return studentGrades;

//[ { name: 'Mursal', grade: 96 },
//    { name: 'Ahmed', grade: 99 },
//    { name: 'Burhan', grade: 90 } ]
```


In our next article, we are going to discuss something even cooler.
Flutter & Dart Tips - Week In Review #4
Tags: beginners, codenewbie, flutter, dart
Published: 2021-07-04 03:35:10



Hello Reader,

This is the 4th post in the "Week In Review" series, where I share the Flutter\Dart tips I tweeted last week.


1- You can use the Timer class to execute a piece of code after some time

```dart

    Timer.periodic(
        Duration(seconds: 1),
        (Timer time) {
                print("time: ${time.tick}");
                if (time.tick == 10) {
                    time.cancel();
                    print('Timer Cancelled');
                }
        },
    );

```

2- Use the ClipOval widget to clip the child widget in oval or circle shape. If width and height are equal, the shape will be circular. If the width and height are different, then the shape will be oval.

```dart

    ClipOval(
        child: Image.network(
            imgUrl,
            fit: BoxFit.fill,
            width: 200.0,
            height: 200.0,
        ),
    );

```

3- Use padLeft and padRight to add character padding on the left and right side, respectively.

```dart

  String s = "fun";
  print(s.padLeft(10, ',.*')); // ',.*,.*,.*,.*fun'
  print(s.padRight(10, ',.*')); // 'fun,.*,.*,.*,.*'

```

4- Use the List class method join() can to join a List of any type to a String.

```dart

    List<String> values = ['dart', 'flutter', 'fun'];
    print(values.join()); //  dart,flutter,fun

```

5- Set debugShowCheckedModeBanner to false to remove the Debug Banner Tag

```dart

    MaterialApp(
        debugShowCheckedModeBanner: false,
        // other arguments
    )

```

6- To get access to the index on an Item in a list, you need to convert the list to a map using the asMap

```dart

    myList.asMap().entries.map((entry) {
        int idx = entry.key; // index
        String val = entry.value;
        return something;
    }

```



See you next week. 👋🏻

> Follow me on <a href="https://twitter.com/_Mo_Malaka_">Twitter</a> for more tips about #coding, #learning, #technology...etc.

> Check my Apps on <a href="https://bit.ly/3h05gQ7">Google Play</a>

<span>Cover image <a href="https://unsplash.com/@justinlim?utm_source=unsplash&utm_medium=referral&utm_content=creditCopyText">Justin Lim</a> on <a href="https://unsplash.com/s/photos/minions?utm_source=unsplash&utm_medium=referral&utm_content=creditCopyText">Unsplash</a> </span>
Js-Quiz `A JavaScript Frontend with a Rails API backend`
Published: 2021-07-04 03:07:39

This was the moment where I started to feel like an actual developer 😁! For my phrase four project here at Flatiron, We were required to build a single page application using a Rails API backend with a Vanilla JavaScript frontend. I was overjoyed and excited and so I decided to build a Quiz App predominantly on JavaScript. 

####`Note: it's important to have both the frontend and backend in two separate repos, for faster error handling and to also avoid any deployment issues.`


#Setting Up My Rails API:
To begin creating my Rails Application, I first had to generate a New Rails API.
####`rails new js-quiz-api --api-database=postgresql`

The `--api` flag ensures that a Rails API only application is created and also assigns the database to use Postgres rather than the default Sqlite3. The Rails Api sets up its dependency gems. I also had to add the `active_model_serializers` gem to my gemfile, which is used to convert data into a format which can be easily transferred.

##class Quiz < ApplicationRecord
       has_many :js_questions
       has_many :results 
##class QuizSerializer < ActiveModel::Serializer
    attribute: id, :name, :description, :js_questions

#Connecting My Frontend:
My App is structured such that the frontend(JavaScript)sends a get fetch request to my backend(rails api) hosted on `http://localhost:3000/quizzes`and returns a JSON data to use on my web page. 
###getQuizzes() 
     fetch(this.baseUrl + "/quizzes")
     .then(res => res.json())
     .then(quizzes => quizzes.forEach(quiz => {
       const quizObject = new Quiz(quiz)
       quiz.js_questions.forEach(question => {
          new Question(question)
       })
       quizObject.render()
     })) 

##In Conclusion:
Creating this app was a challenge, yet rewarding at the same time. It seemed very simple at first but it did take me some time to figure out all the working parts and to put everything into place. Being a Frontend Developer is a dream of mine and so I am super ecstatic to be on this journey, and to continue to dive deeper into learning JavaScript! 
Happy Coding!😀
How State Works in React
Published: 2021-07-04 02:43:01

React has become one of the most commonly used languages to code with in web development.  One unique aspect of it is the ability to have a state: a Javascript object that updates a component's dynamic data.  However, state can only work within a class component, which is why when functional components are used, they are usually designed for rendering static data like footers or a navigation bar.  In other words, data that is written into components that do not use state are not subject to change.  Since the data is not being manipulated in any way, state is not required for that component.
RECURSION RECAP
Published: 2021-07-04 02:35:56

Define Recursion. - Calls itself

Identify when writing a recursive algorithm is the right approach to solving a problem.

Can replace a for loop or when we don't know when we want the function to end. (Linkedlist node). Nested data structures identical structure nested inside. Combination / permutation then use recursion. (n is the input). 

Identify the base case of a recursive algorithm/strategy.
*bold**-All recursive functions have at least one base case; a case where the function can produce a result without recursing.

In the factorial example above, number === 0 is an example of this solution's base case: If number is 0, we know the solution must be 1 and thus we don't need to recursive to solve the problem.

Identify the recursive case of a recursive algorithm/strategy.
 -recursive case is where function invokes itself.

Understand what the Call Stack is.
 -Call stack is the order in which the function is executed. It starts **LIFO** **LAST IN FIRST OUT**

Understand the relationship between the execution contexts that come to exist during a recursive process.



**STEPS TO SOLVE RECURSION**
1) Identify the smallest piece of the data that your function needs to handle
2) Write the function to handle this case and only this case (BASE CASE).
3) Once base case handled, Identify what will make the function need to continue (find the recursive call)
4) Make the recursive call
5) Accumulate the return to previous calls (store the value)
log[7] all posts are gone and recursion
Tags: rust, update, recursion, algorithms
Published: 2021-07-04 00:00:00

---
title: 'log[7] all posts are gone and recursion'
date: '2021-07-04'
tags: ['rust', 'update', 'recursion', 'algorithms']
draft: false
summary: Lost All The Blogs Since The First On 28th May, Also Understood Recursion
---


Note: I mostly blog on my own [website](https://blogafee.vercel.app)

**All The Old Posts Are Gone**

All posts from the last 2 months are gone because while hopping between one blog theme and another I deleted the repo containing the posts. Now, no time to cry so lets go the other topic which is recursion.

recursion is a method of solving a problem where the solution depends on solutions to smaller instances of the same problem. It's a pretty broad topic so just get to the code I'll explain on the way as it's way easier to explain with code.

```rust
fn f(n: u32) -> u32 { //initialise n as u32 integer
    if n < 2 { // if n is lesser than n
        1 // raise error
    } else {
        n * f(n - 1) // else do n into factorial of n - 1
    }
}

fn main() {
    println!("{} is the factorial of 4 calculated recursively", f(4 as u32)); // print factorial of n where n == 4
}

#[cfg(test)]
mod tests {
    use super::*;

    #[test]
    fn test_recursion() {
        assert_eq!(f(4), 24)
    }
}

```

Lets go over the code function by function now

```rust
fn f(n: u32) -> u32 { //initialise n as u32 integer
    if n < 2 { // if n is lesser than n
        1 // raise error
    } else {
        n * f(n - 1) // else do n into factorial of n - 1
    }
}
```

I initialise function f which takes n as an input. Then I say if n is smaller than 2 throw error as the factorial of !1 and !0 are the same ie - 1 and it causes complications in the computer. If it is bigger then run a calculation to find the factorial which is (if n = 4) 4 _ f(4 - 1) == 4 _ f(3). Here the computer runs the same f operation on 3 again as I say n is equals to 3 now.

This happens recursively until n <= 2. Then the computer saves 4 _ f(3) = 24 as f(3) is 6 and f(3) is calculated as 3 _ f(2) = 6,f(2) as 2 \* f(1) = 2 and so on.

```rust
fn main() {
    println!("{} is the factorial of 4 calculated recursively", f(4 as u32));
}
```

function main just prints f(4)

Now to the last part, this was the first time I was writing tests in any programming languages and I came up with this

```rust
#[cfg(test)]
mod tests {
    use super::*;

    #[test]
    fn test_recursion() {
        assert_eq!(f(4), 24)
    }
}
```

Setup tests and initialise function test_recursion, test_recursion simply compares the LHS (f(4)) to 24(factorial of 4)

[main.rs](https://github.com/tanaybhardwaj24/rust-mini-projects/blob/master/recursion-recursion/src/main.rs)

[gh action flow to see result](https://github.com/tanaybhardwaj24/rust-mini-projects/runs/2983069006?check_suite_focus=true)

Again I'm very sad all the other articles are gone including the parrotos in gitpod one but what can we do..

I'm probably going to practice more recursion so more posts about recursion soon. Cheers!
How to turn off Browsersync ghostMode in Eleventy
Tags: eleventy, webdev
Published: 2021-12-20 17:50:56

---
title: How to turn off Browsersync ghostMode in Eleventy
published: true
date: 2021-07-04 00:00:00 UTC
tags: eleventy, webdev
canonical_url: https://danabyerly.com/notes/how-to-turn-off-browsersync-ghostmode-in-eleventy/
---

In your `eleventy.js` file within the module.exports section add the following…

```js
eleventyConfig.setBrowserSyncConfig({ 
  ghostMode: false 
});
```

Eleventy uses [Browsersync](https://browsersync.io) to serve your site locally. ghostMode [is the option](https://browsersync.io/docs/options#option-ghostMode) that mirrors clicking, scrolling and other actions across devices. 

For example, if you have the same page open in Firefox and Chrome and click a link in Firefox, both browsers will load the linked page. Scroll the page on your laptop and it will also scroll your phone or tablet, etc.

I’ve found this feature to be very handy but encountered a scenario where I needed to disable it. I was working on a project and fired up [Sizzy](https://sizzy.app) to view it across browsers and devices. It had been awhile since I used Sizzy and I was greeted with this message…

![An informational pop-up that reads: Browsersync can conflict with Sizzy's synchronization features. We recommend turning off Browsersync's ghost mode option if you are having troubles using Sizzy.](https://danabyerly.com/img/ghostMode.png)

I didn’t even know ghostMode was an option and thought Browsersync just worked that way! After a bit of searching I found [this thread](https://github.com/11ty/eleventy/issues/841) about disabling it in the [Eleventy Base Blog starter](https://github.com/11ty/eleventy-base-blog) and took the example from there.

There are plenty of other [configurable options](https://browsersync.io/docs/options) in Browsersync. 11ty Rocks also has an example for [opening a browser on launch](https://11ty.rocks/eleventyjs/browsersync/). 

Happy reloading!
Building Microservices in Go: REST APIs: Putting it all together
Tags: go, rest, microservices
Published: 2021-07-03 17:00:48

## Putting it All Together

The last five posts covered all steps I consider necessary for building the barebones of a REST API, it's not a complete list for sure, it's missing things like deployment, infrastructure and other important details we must consider before making the API live, like scalability, reliability, instrumentation, monitoring and logging, but I will cover those in detail in future posts.

The following are the concrete decisions I like to follow when building brand new API from scratch:

## Types to match HTTP resources

This was covered when I talked about [HTTP Handlers](https://mariocarrion.com/2021/04/18/golang-microservices-rest-api-http-handlers.html) where I mentioned implementing a type to take care of everything related to _Tasks_. I like following this guideline because the Go types can easily be categorized and organized accordingly to the HTTP resources they represent.

## Custom Go Types to describe JSON payloads

Implementing [Custom JSON Types](https://mariocarrion.com/2021/04/28/golang-microservices-rest-api-custom-json-type.html) is extra work for sure, but I believe making the user experience better for our costumers always matter, sure it's more work for the team in charge of building the APIs but defining more humanized types allows defining much more clearer values for the fields used in the payloads.

Considering JSON is the _de facto_ format used for HTTP-based APIs it's important we take advantage of the verbosity we have and be as explicit as we can. The common use case would be to define custom Go types representing enum values in JSON.

## Document your APIs

[OpenAPI](https://mariocarrion.com/2021/05/02/golang-microservices-rest-api-openapi3-swagger-ui.html) is a great way to create a standardized documentation, we can share it with our costumers as well as with the team in charge of implementing the actual APIs in code.

The process I described in the post works but I like following a different approach to make sure the different services depending on that documentation don't have circular relationships.

To do that the actual document is generated _outside_ of the project implementing it, and the project meant to implement the code can enforce the rules defined by the document as well as reusing the code that was could be generated from it.

## Conclusion

Finally, regarding the most difficult topic IMO: _versioning_, I like keeping it simple and use path-based APIs; technically in the end using any of the possible options is easy to do thanks to existing gateways that could route requests to different implementations as needed.

In future posts I will cover more things to consider when _Building Microservices in Go_, until then I will talk to you later.
How to select all the HTML element tags on a page and apply CSS styles to it?
Tags: css
Published: 2021-07-04 00:00:00

---
  title: How to select all the HTML element tags on a page and apply CSS styles to it?
  published: true
  tags: CSS
  date: Sun Jul 04 2021 05:30:00 GMT+0530 (India Standard Time)
  canonical_url: https://melvingeorge.me/blog/select-all-html-elements-tags-page-apply-styles-css
  cover_image: https://melvingeorge.me/_next/static/images/main-4a428550df1f29fabfbae6e08b23148b.jpg
  ---
  [Originally posted here!](https://melvingeorge.me/blog/select-all-html-elements-tags-page-apply-styles-css)
  
To select all the HTML element tags in a page, we can use the `*` (asterisk) character, or called the wildcard character in CSS, and add the styles needed in that CSS block.

For example, let's consider we have some html elements, like `div`, `p` and `article` tag that are wrapped inside the `body` and `html` tags like this,

```html
<!-- Some random HTML element tags -->
<html>
  <body>
    <div>I'm a div</div>
    <p>I'm a paragraph</p>
    <article>I'm an article</article>
  </body>
</html>
```

Now let's say we want all these elements to have a `1px` border with a color of `black`, to achieve that here we can use the `*` (asterisk) character in the CSS stylesheet and add the styles needed like this,

```css
/* Apply styles to every HTML element tags */
* {
  border: 1px solid black;
}
```

It will look like this,

![all html element tags having 1px border with black color](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/r3fkr233tv6wmqmbkgpu.png)

You can see from the above output that not only the `div`, `p`, and the `article` HTML elements have borders, but also the `html` and `body` tags.

- The `*` asterisk character is commonly used in CSS stylesheets to set common styles across all HTML element tags.

See the above code live in [JSBin](https://jsbin.com/sobiyivije/2/edit?html,css,output).

That's all 😃!

### Feel free to share if you found this useful 😃.

---
Tracing msgrcv with ltrace
Tags: linux, ltrace
Published: 2021-11-01 21:45:23

---
title: Tracing msgrcv with ltrace
published: true
date: 2021-07-04 00:00:00 UTC
tags: linux,ltrace
canonical_url: http://aivarsk.com/2021/07/04/ltrace/
---

[ltrace](https://ltrace.org/) is a tool for tracing dynamic library calls. I use it from time to time and this time I needed to trace the `msgrcv` system call. Usually, you would use [strace](https://strace.io/) to trace the system calls, but I need an output of both library calls and system calls. One interesting feature is that I don’t need to trace the actual system calls using the `-S` flag and can trace the `libc` system call wrappers instead:

```
msgrcv@libc.so.6(0x10002, 0x5634e4d2db08, 4712, 0xffffffffc0000000) = 708 <0.828835>

```

So far so good, but the output is not very useful as I don’t see the message received. `ltrace` properly displays the most common library calls but for some reason not the `msgrcv` and several others like `semop` and `shmat`. Luckily for me `ltrace` can use function prototype descriptions from a custom `ltrace.conf` file. `msgrcv` is a tricky function to describe: just like `read` and similar functions, it uses output parameter and the length of the data is returned by the function. In addition to that, the output parameter is a complex type. My first attempt at configuration got me pretty far:

```
long msgrcv(int, +struct(long, array(char, retval))*, ulong, long, hex(int));

```

An important detail is the `+` sign before the output parameter. `ltrace` will wait until the function returns and will display the rest of the parameters after that. The second important detail is specifying the length of the data as `retval` (an alias for `arg0`). It is the value function returned. I could have used the `arg3` and show the full content of the second argument but using the function result allows to show only the portion of the array that is filled:

```
msgrcv@libc.so.6(65538, { 536870912, ['{', '\0', '\0', '\0', '\002'] }, 4712, -1073741824, 0) = 5 <19.964097>

```

I was very happy until the `msgrcv` system call failed. The function returned a `-1` which was interpreted as an unsigned integer and `ltrace` printed a huge amount of junk until it hit the limit of array size to be printed. Turns out this issue is described in the “to do” list of the `ltrace` for many years without any progress. But the same “to do” revealed that there is a workaround. I can wrap the `retval` in `zero()` and the result will be much better:

```
long msgrcv(int, +struct(long, array(char, zero(retval)))*, ulong, long, hex(int));

```

The only downside is that I get an error message for failing calls, but it is much easier to deal with than kilobytes of junk:

```
msgrcv@libc.so.6(3833859 <no return ...>
error: maximum array length seems negative
, { 0, ['{'] }, 4712, 0, 0x800) = -1 <0.000520>

```
The case for a CapRover Instance
Tags: caprover
Published: 2021-07-07 15:24:01

---
title: The case for a CapRover Instance
published: true
date: 2021-07-03 23:33:00 UTC
tags: 
 - Caprover
canonical_url: 
---

If you have not heard of [CapRover](https://caprover.com/), it is a self-hosted platform-as-a-service designed to simplify deploying containers; that is well and good, and perhaps you will actually use CapRover at some point to deploy something to production. But the real value is using it as a playground.

CapRover offers a list of one-click-apps, and unlike choosing from a selection of one-click-apps from a cloud VPS host, you do not need to provision a new machine for each app you deploy. Deployment is super easy, and if there is not a one-click-app available, you can submit a Dockerfile to create your app.

CapRover also offers _ridiculourly easy_ SSL deployment, so all of your self-hosted one-click-apps can have valid HTTPS certificates with minimal work on your end.

![One click apps](https://blog.kapic.io/assets/img/one-click-caprover.png "One click apps")

For context, here are some of my favorite one-click-apps available in the main [CapRover Repository](https://github.com/caprover/one-click-apps):

- [Ackee](https://ackee.electerious.com/) - a self-hosted, privacy-respecting analytics tool. (An alternative is [Plausible](https://plausible.io/), but I have not been able to get the self-hosted version working. If you are willing to pay, their SaaS option is actually pretty good... and I'm not getting paid to say that.)

- [code-server](https://github.com/cdr/code-server) - VS Code in your browser. There are a couple quirks, but it is _super helpful_ to have an accessible (from any computer with a web browser) IDE. Just try not to let yourself get lost in the weeds of maintaining any weird settings.

- [Firefly III](https://www.firefly-iii.org/) - personal finance manager. To be honest, I have yet to spend much time figuring this one out, but it seems promising, and it also seems to be the most popular based on online forums.

- [OnlyOffice](https://www.onlyoffice.com/) - OPENOFFICE in the browser. Fairly similar to Microsoft Word in functionality, but in your browser, and open source (not proprietary through Google).

Overall, there are still more one-click-apps for me to explore. There are also a couple that I have had trouble with... If you want Mastodon, do not host it with CapRover (as of July, 2021).

At the very least, CapRover will offer a little fun. Give it a shot.

Thanks, and you're welcome.