teleren/devto huggingface dataset:
Introducing rails-template-inspector: Open your view files by clicking browser elements
Tags: ruby, rails, railstemplateinspector
Published: 2022-07-12 03:02:51

---
title: Introducing rails-template-inspector: Open your view files by clicking browser elements
published: true
description: 
tags: ruby,rails,railstemplateinspector
# cover_image: https://direct_url_to_image.jpg
# Use a ratio of 100:42 for best results.
---

_(This post was originally written by @aki77 in Japanese. @aki77 is a co-worker of mine. You can read the original post [here.](https://zenn.dev/aki77/articles/49633196b7a35a))_

I'm pleased to announce the release of [rails-template-inspector](https://zenn.dev/aki77/articles/49633196b7a35a) which is a JS package for Rails applications. You can do the following things by using it:

- You can confirm in which template the element is written by mouse hover.
- You can open template files in your local editor by clicking elements.
- No Bundler, no npm. You can just use it via CDN because it's provided in vanilla JS.
- Unlike [xray-rails](https://github.com/brentd/xray-rails), it supports the latest Rails environment. 

![Animated screenshot](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/y88y353i2dilk07tp7j6.gif)

## How to use

Set the following value to `true` in `config/environments/development.rb`:

```ruby
config.action_view.annotate_rendered_view_with_filenames = true
```

Add the `<% if Rails.env.development? %>` block in your 
 layout file:

```erb
<!DOCTYPE html>
<html>
<head>
<!-- ... -->
</head>
<body>

<%= yield %>

<% if Rails.env.development? %>
  <script type="module" src="https://cdn.skypack.dev/@aki77/rails-template-inspector"></script>
  <rails-inspector url-prefix="vscode://file" root="<%= Rails.root %>" combo-key="command-shift-v"></rails-inspector>
<% end %>
</body>
</html>
```

This package uses custom URL scheme to open view files in editors, so please change `url-prefix` attribute in `<rails-inspector>` element per your favorite editor. Here are examples:

- Visual Studio Code: `vscode://file`
- RubyMine: `x-mine://open?file=`
- MacVIM: `mvim://open?url=file://`
- Emacs: `emacs://open?url=file://`

## How to work

By enabling `config.action_view.annotate_rendered_view_with_filenames`, this package can search HTML comments generated by Rails. It also uses [Lit](https://lit.dev/) to implement custom `<rails-inspector>` elements.

I hope you enjoy [rails-template-inspector](https://github.com/aki77/rails-template-inspector)!

{% embed https://github.com/aki77/rails-template-inspector %}
Our World NFTs
Tags: nft, earth, developer, searching
Published: 2022-07-12 02:49:26

Hey guys. I am a developer from the USA who has been looking to change the world his whole life. I have been able to connect my love of NFTs and my passion of changing the world for better with my new NFT Project, **Our World NFTs**. This is a project where majority of profits will be used in collaboration with our partner organizations to make the world a better place. May that be researching disease, to get people clean water, everyone will benefit with the Our World NFTs Project. Currentally I am in a stage where I need to team to be able to get the project off the ground. If anyone is interested in working with me to change the world, please let me know.

Road Map

- 
Phase 1 : Launch the first line of NFTs which will be NFTs of the earth. All of our royalties will go to our partners, who will put our capital towards their projects to make the world a better place. 

- 
Phase 2 : We will introduce “Evolution”, where people will be able to lock their NFT, which will then earn our token.

- 
Phase 3 : Introduce Burning, Upgrades, and our next line of nfts. Our next line of NFTs will include things like Solar Panels, Schools etc. Players can buy these NFTs with the tokens they stake. These NFTs will have different levels. Upgrading 2nd Gen NFTs, will not only allow you to stake more, but it will also allow you to be better at the game. Burning will allow players to get a large amount of tokens, but in exchange lose a certain amount of NFTs forever. There is a limit to how many times someone can burn over a period of time. We will also have upgrading, which will be like breeding, but the 2 original NFTs that were bred will be lost forever. This loss of NFTs with burning and upgrading will lower supply, increasing the Demand to Supply ratio.

- 
Phase 4 : Game drop. Our game will be a place where people will have different planets, each represented by the different Gen 1 NFTs (The Phase 1 NFTs of the earth). Players can then upgrade their world's overall “Standard”, by using second generation NFTs like clean power generation, justice system and education systems. These will give them more of our token which they can use to expand their planets and buy new ones. We will have tournaments where players will enter a certain amount of our tokens into a prize pool, and with their current NFTs, try to higher the standard of a planet within a certain amount of time. There will also be an aspect of skill to this, so that it's not always the player with the highest level NFTs that will win, and so there is a fair trade of tokens and NFTs all around.

- 
Phase 5 : Introduce a trading system where players can exchange their NFTs. This will cause diversity within the ecosystem


On all transactions, there will be a small royalty fee, which will go to our partners, which allows players to help the world, while also being able to make a large profit if done right. The use of our token to be able to buy and upgrade our NFTs, along with the burning and upgrading process will ensure that we don't fall into the Supply and Demand trap that most projects fall into.
How often is it better to shut down the router?
Tags: router
Published: 2022-07-12 02:47:16



Almost every home has a router. I believe that many people will not care about it and turn it off after buying it and installing it. Generally, most home routers are not configured very high. If the router is not turned off for a long time, what effect will it have on the network speed?Ebyte is committed to researching more convenient and energy-efficient industrial gateways, looking forward to your attention!

If the router is not turned off for a long time, there are three main effects:

1. The router is overheating

If the router is not turned off for a long time, it will cause the router to overheat. Especially in the high temperature environment in summer, the router will become hot when it is running for a long time. If it runs uninterrupted for a long time, the heat will cause the hardware to age or even damage. Not only will this slow down the internet, but it will even cause various glitches.

If this happens, we can turn off the router for a few minutes, wait about ten minutes, and turn it back on again.

2. Too much cache accumulation

Like mobile phones, routers will cache, and if they are not turned off for a long time, a large amount of cache garbage will be stored. When the cache accumulates to a certain extent, it will slow down the network speed and cause network freezes.

As the number of devices connected to the router continues to increase, the amount of data forwarded also increases, which will lead to more and more caches and higher memory usage. If the memory of the router is small and there are too many caches, that is, the memory usage rate is high, it will lead to packet loss and interruption of data flow.


This phenomenon is common in life, so we have to shut down the router and restart it, so that the router can automatically clean up the cache garbage.

3. The router is too old

Many home routers have actually been used for many years. Because the routers are old and have been running for so many years, the hardware in the routers will naturally age.

In this case, using a router will only slow down the network speed, so it is recommended to change to a routing device. Now there are many affordable routers on the market that are not bad.


After all, it is unrealistic to shut down for a long time, and the smart home and smart devices in the home need to be connected to the Internet before they can be used. You don't need to turn off the router every day. The best suggestion is to restart it regularly every week and clean up the cache garbage. You can turn off the router when you go to bed at night. You don't use the network much when you go to bed at night, and it doesn't affect your use during the day. In this way, the router is well protected, thereby increasing its service life.

In addition, if you usually feel that the network is slow, you can also restart the router appropriately to alleviate the phenomenon of network lag.


FOLLOW US! More wireless data transmission gateway products are waiting for you!
Google Maps with React
Tags: programming, javascript, react, webdev
Published: 2022-07-12 02:41:47

Today I'll be showing you how I used Google Maps with react to create a dynamic map on a webpage.

The first thing you need to do is install this package:
`npm i @react-google-maps/api`

More information on this can be found here: https://www.npmjs.com/package/@react-google-maps/api

Sometimes you may have to end --legacy-peer-deps at the end of npm install. You can read more about that on google/stackoverflow. 

Once you've installed the package:
Let's say I'm in my React component

I'm going to first import the below:

`import {GoogleMap, useLoadScript, Marker} from "@react-google-maps/api"`

Then, I will need the following code
`const {isLoaded} = useLoadScript({googleMapsApiKey: process.env.REACT_APP_NEXT_PUBLIC_GOOGLE_MAPS_API_KEY})`

What this piece of code here is we use the useLoadScript hook to load in our Google Maps API key. Once that's loaded, isLoaded is a truthy value. You can read more about how to create a Google Maps API key on Google's official documentation. The process.env portion here is referencing a .env.local file that has REACT_APP_NEXT_PUBLIC_GOOGLE_MAPS_API_KEY = YOUR_API_KEY. The reason we do this is to ensure our API key is hidden. Just make sure you don't push the .env.local file to Github!!!!

The next piece of code is where we make the map itself:

```
//creating the google map
    //here i'm just initializing a variable called map that will hold the Google Map instance
    let map
    //if our useLoadScript hasn't completed, return "Loading..."
    if(!isLoaded){
        map = <div>Loading...</div>
    //if it is loaded, create the map
    }else{
        map = <GoogleMap zoom={13} center={{lat: YOUR_LATITUDE, lng: YOUR_LONGITUDE}} mapContainerClassName="map-container">

            <Marker position={{lat: YOUR_LATITUDE, lng: YOUR_LONGITUDE}} label="SL"  />
        </GoogleMap>
    }

return (
     <>
          {map}
     </>
)
```
The zoom on GoogleMap is just how far zoomed you are in on the map when it renders on the webpage. You can experiment with what you like! The center takes in a lat, lng of where you want the center of your map to be. I also added a marker on the map at the center location here!

Below is what you should see!
![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/nu82wukzlqac1n6e7fac.png)
SaasRock v0.4— Events and Webhooks
Tags: remix, webhooks, zapier, workflows
Published: 2022-07-12 02:33:52

---
title: SaasRock v0.4— Events and Webhooks
published: true
description: Use the Events to log essential data and use Webhooks to customize your business logic within internal or external webhooks
tags: remix,webhooks,zapier,workflows
cover_image: https://miro.medium.com/max/1400/1*HR_jXKO32RRbxvy9GCN52g.png
# Use a ratio of 100:42 for best results.
---

Use the Events to log essential data and use Webhooks to customize your business logic within internal or external webhooks.

SaasRock has a new **EPIC** feature on the latest release: Events ⚡ Webhooks.

{%youtube YLw_6Lb0Bqg %}

### Every event:

- Is something **important** that happened within your SaaS.
- Is called inside a [Remix](https://remix.run/) **action**.
- Has a **DTO** for **TypeScript** support.
- Can call 0, 1 or more **Webhook** Endpoints (internal or external).

### Use cases:

- Custom **business logic** when something happens.
- Call a Webhooks by [Zapier](https://zapier.com/).

### Events and Webhooks Admin UI:

Events table with filters, pagination and interactive event rows:

![Events Table](https://miro.medium.com/max/1400/0*5FoiETcuL9Uxg6kV.png)

Event details with **Webhook Attempts** requests and responses:

![Event Details Route](https://miro.medium.com/max/1400/0*CvVj6Yf6gvlqbrST.png)

---

### SaasRock Core 🪨:

- **5** Application events + Internal Webhooks.
- **/admin/events** route with permissions (Super Admin, Auditor, - Developer).
- Engine ready → Highly **customizable**.
- Subscribe to [SaasRock](http://saasrock.com/) to get this [release](https://github.com/AlexandroMtzG/saasrock/releases/tag/0.4.0).

### SaasRock Enterprise 🚀:

- **40** Application events
- **Custom** Webhook endpoints
- **Retry** Webhook attempt
- ?? **Admin** events (upcoming)
- **/app/:tenant/settings/events** route with permissions

---

Let me know what you’d like to see next!
Creating Custom Methods in Rails
Tags: rails, ruby, webdev, beginners
Published: 2022-07-12 02:13:22

I wanted to cover making custom methods in rails today. Rails is quite the powerful tool and can accomplish a lot of the actions you may want to do on the front end.

Let's go over an example that I've worked on:

I have three tables.

1. User
2. Restaurant
3. UserRestaurant - the joiner table for User and restaurant

The UserRestaurant table belongs to both the user and restaurant. It also holds the following information:

1. upvoted? (boolean)
2. downvoted? (boolean)
3. Review (string)

So, when a user leaves an upvote, downvote and/or review on a restaurant it's handled by the UserRestaurant table.

Now, when a user upvotes a restaurant, a UserRestaurant instance is created and the upvoted? attribute is set to true on the backend. However, what happens when this same user wants to leave a review on the same restaurant? You have to first find the original instance and then update it. You can do this on the frontend by using filters and what not or you can accomplish the same on the backend. Or what if the user leaves a review first and then upvotes? You'll have to create a UserRestaurant instance with a review and then update the upvoted? attribute.

This is where creating a custom method can help.

Here's a bit of code I wrote to accomplish let's say making an upvote first.

```
def create_update
        # I'm just taking the params that were sent with the post request here and setting them with different variable names 
        #ur_params here permit the following attributes: user_id, restaurant_id, upvoted?, downvoted?, and review
        user_id =ur_params[:user_id]
        restaurant_id = ur_params[:restaurant_id]

        # I then check to see if this instance exists
        ur_found = UserRestaurant.find_by user_id: user_id, restaurant_id: restaurant_id
   
        # If the UserRestaurant exists for this specific pair, just update it
        if ur_found
            ur_instance = ur_w_all
            ur_instance.update(ur_params)
        # If the UserRestaurant doesn't exist, create it!
        else
            ur_instance = UserRestaurant.create(ur_params)
        end
        render json: ur_instance, status: :created
end
```
By using this custom method, it can handle both an update and create when necessary!

Happy coding!
Capturing photo locations on Android 10+
Tags: android, mobile
Published: 2022-07-12 02:07:09

Recently we ran into an issue on our Android app, that caused us to not capture location data embedded within photos, on devices running Android 10 and above.

As of writing this post, the issue has been fixed and a migration script has been deployed to detect and re-upload affected photos.

Here's a timeline of how the story evolved:

-   `29.05.2022` - the issue was introduced in `v0.5.26`.
-   `06.06.2022` - the issue was discovered.
-   `06.06.2022` - [a fix](https://github.com/ente-io/frame/commit/6ac9df1608f9edad56acdd6dc7a146777f7f8a96)   was deployed that solved the issue for newer files that were backed up.
-   `09.06.2022` - [a migration script](https://github.com/ente-io/frame/commit/70c6cc82bd98358add377cb0f788800df056d172)   was deployed that scanned through older files and re-uploaded those with missing location data.

We also updated our servers to break the "free up space" functionality on the affected builds, to retain the original files on device.

<br />

#### Root Cause

What caused this issue was a seemingly harmless [commit](https://github.com/ente-io/frame/commit/76f296c995d1247fa905f462a04bb0da092aee96#diff-9526ccfd1d1813ed49c39f8c54dbeb512607376a007d824b905bc8b4e4d202d9) that updated our Android app's `compileSdkVersion` to `32`.

What we did not know was that according to Android's updated permission model, we have to add `ACCESS_MEDIA_LOCATION` to our manifest file, to fetch the location embedded within a photo's EXIF data. What is absurd is that this permission is not visible to users ([source](https://youtu.be/UnJ3amzJM94)) and is granted automatically without consent.

Now despite this permission missing from our manifest, the requests to fetch the location of a photo did not throw an exception, instead, quietly returned `[0, 0]` as the latitude and longitude.

Had this thrown an error instead, we would have caught the issue before it made its way in to production.

<br />

#### Takeaways

-   We should have test cases to verify the correctness of metadata parsed from new photos.
-   We should be paranoid about updating the Android SDK, as they can introduce breaking changes, that break silently.
-   Android's permission system is still a joke.

<br />

#### Final Notes

During our investigation, we found multiple other cloud storage apps to be plagued by the same bug. We notified their developers, along with the fix. Some were proactive enough to acknowledge and fix the issue for newer files. Some others labelled the bug as a feature. To each, their own.

At **ente**, data is precious. We will continue to do our best to safely preserve every bit of it.
My first Python mini project
Published: 2022-06-02 02:17:39

As a part of me trying to learn Python I embarked on a small coding project, where I programmed a simple text-based computer game you can run in the command line. The game is called **The Tower of Py**, where the aim of the game is to fight your way through the tower and defeat the evil bosses at the top.

#### How the game works:
In the game you can choose between three classes (Fighter, Wizard, and Paladin) which have different stats and spells available to use in combat. The combat loop is pretty simple; you can either attack or cast a spell (if you have sufficient Mana Points) and the enemy will have a chance to hit you with an attack. Spells always hit, while regular attacks have chance of missing which increases if your opponent is stronger than you. Enemies and spells have different ‘damage types’ (like nature, fire, physical, etc.), and these types affect how much damage is dealt. Fire damage, for example is less effective against a water Enemy. For every three enemies defeated the player levels up which further improves their stats.

Stat list:
* Strength: dictates damage of regular attacks and how likely these attacks are to hit your opponent.
* Hit Points (HP): decreases when you take damage, and when all these are depleted ... you **die**.
* Mana Points (MP): are expended to cast spells. Higher level spells cost more MP. 
* Grit: determines the rate of regeneration of HP.
* Magic: determines the rate of regenerating MP.
* Score: increases for each enemy you defeat and for each time you level up. 

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

You need to download the classes.py, functions.py, materials.py, and run.py files to run the game. To start playing run the run.py script. 

https://github.com/JHSletten/Tower_of_Py

#### The code itself:
The core of the program is three classes: Hero, Spell, and Enemy. The Hero class determines the ‘player class’ (i.e. Wizard), all the related stats, and has functions to: increase or decrease HP and MP, increase stats (level up), return base damage, etc. The Spell class allows Spell objects to have different types, mana costs, damage values, etc.. The Enemy class is similar to the Hero class, in that it defines object with HP and damage values with the associated functions. The Enemy class also has a type and level attribute. 

There are functions that creates the hero, enemy, and spell objects based on input, lists, or dictionaries. The combat loop is one big function that also uses a calculate damage function and an attack function (determines if opponent is hit). Lastly there are three stage functions which initiates combats, provides the flavor text of the game, and levels up the hero. 


*Feel free to give the game a try! I recommend starting out with a Paladin because it combines strong attacks with a limited spell selection.*

*Do be warned though... it is challenging to climb the tower of Py...*
Learning Python #2 - Data types, operators, variable creation...
Tags: python, programming, webdev, codenewbie
Published: 2022-07-12 02:04:21

As promised here I am with a new blog post on Python programming where we are going to discuss the below points today:-

- Data types
- Operators
- Variable creation
- Python Syntax - Why is it necessary?

## Data types
Python has some commonly used data types.
- Numbers
```
x = 1.3 //float
y = 1   // integer
z = 1 + 2j //complex number
```
- Words
```
x = "Hello World!" //Represented with double quotes
y = 'I am a dev' //Represented with single quotes
z = 'Roger\'s dog said "woof"'
```
- Booleans
```
x = True
y = False
```
These are easy to understand once you start playing around with them in the python editor.

## Operators
There are a different sets of operators provided by a python that can be used to manipulate data and get a result out of it.

### Arithmetic operators
![Demo on operators](https://cdn.hashnode.com/res/hashnode/image/upload/v1657591630804/dP5JPX8Re.png)
As you can see in the above screenshot we have 7 commonly used arithmetic operators that are 
```
+, -, *, /, **, %, and //
```
These can be used to get the desired result on the numbers.

### Comparion operators
Some of the most commonly used comparison operators are
```
< //Less than
> //Greater than
== //Equal to
<= //Less than or equal to
>= //Greater than or equal to
!= //Not equal to
is //Object identity
is not //Negated object identity
```

![Comparion operators](https://cdn.hashnode.com/res/hashnode/image/upload/v1657591632602/zwLXS1oVu.png)

### Boolean operators
Some of the commonly used boolean operators are
```
or //if value_1 or value_2 are true
and //if both value_2 and value_2 are true
not //if value_1 is not full
```

![Boolean operators](https://cdn.hashnode.com/res/hashnode/image/upload/v1657591634410/blp-e2UEr.png)

## Variable creation
Python is pretty clean when it comes to variable creation.
A variable shall start with _ or a letter. You can not have a variable starting with a number of special characters.
- You can camelCased variable name
- You can have a variable name starting with _ or a letter

![variable creation](https://cdn.hashnode.com/res/hashnode/image/upload/v1657591636473/Eo-TM2uqg.png)

## Python code syntax
Unlike other programming languages, Python strictly follows the syntax. For example, in the screenshot below, you could see that I am trying to assign a letter to a number, and it yells at me.

![code syntax](https://cdn.hashnode.com/res/hashnode/image/upload/v1657591638597/P-LMm4rjw.png)



## Some of the best resources to begin your Python learning are:-

{% embed https://www.youtube.com/watch?v=8124kv-632k %}
{% embed https://www.youtube.com/watch?v=rfscVS0vtbw %}

In the next blog post, we will learn about the basic building blocks of Python like Numbers, Text and Dates. Till then goodbye and take care.

**Let's learn and grow ourselves.**
**Thanks everyone in advance for reading this article !!**

![Let us meet soon](https://cdn.hashnode.com/res/hashnode/image/upload/v1657591640296/VZgG434Kt.jpeg)