teleren/devto huggingface dataset:
Free Ruler, model to perfection!
Tags: mac, frontend, webdev, showdev
Published: 2021-02-23 17:29:06

[![promo](//rollercoin.com/static/img/referral/banners/ref_72890.gif) ](https://rollercoin.com/?r=kl3gfn3b)

[Free ruler](http://www.pascal.com/software/freeruler/) is a wonderful tool if you have to take care of the frontend of your client's project (or of a project you carry out within a company, for example a website).

We can download it [here](http://www.pascal.com/software/freeruler/) and we only have to enter your [Github](https://github.com/pascalpp/FreeRuler/releases) and from there download the .zip file that they offer and that's it, once it is decompressed we will have our app. 😄

Unfortunately this tool is only for MAC OS (but relax, there is still a good alternative if you work in window, [Ruler For Windows](https://www.arulerforwindows.com/)) 😅

Free ruler is an application that gives us two rulers, both horizontal and vertical.

![Alt Text](https://dev-to-uploads.s3.amazonaws.com/i/waonfn0xsb9un5au3qoc.png)

Simple but powerful, this same, both vertically and horizontally we can expand it for our needs, even larger than our screen.

And you just need to move your mouse within its range to indicate (in pixels) the distance you are, taking as a reference from left to right (in horizontal mode) and from top to bottom (in vertical mode).

![Alt Text](https://dev-to-uploads.s3.amazonaws.com/i/3uzgtop3btbcwepenz5o.png)

![Alt Text](https://dev-to-uploads.s3.amazonaws.com/i/q3it9sgkr8jt71jxgdur.png)

The biggest advantage that I see (and why I was dying to have something like this from the beginning) is that if we press "F" (shortcut to keep the rulers always in the foreground... and to show respect) it stays fixed and when it goes out of focus it becomes transparent, staying on top of all our windows to be able to measure.

But you may ask yourself, why do I need to measure things?

Simple, at the moment of transferring a design that is in the Zeplin application (or illustrator, a pdf, I don't know) I compare it with what I'm programming (only html and css 😅).

![Alt Text](https://dev-to-uploads.s3.amazonaws.com/i/ao4fgi2gp383opedlarl.png)

It seems to me a very good application to meticulously review a design that we are programming, whether it is a website, an application, or a copy of a drawing.

It is a very indispensable tool for my work (Frontend Developer) since I am daily doing layout with css and many times you have to make sure that everything is up to date.


<center>
If you liked the content you can support me in:
</center>

[![ko-fi](https://www.ko-fi.com/img/githubbutton_sm.svg)](https://ko-fi.com/G2G42SCZF)

<center>
Want to earn free Bitcoins and Dogecoins? Click on the banner!
</center>

[![promo](//rollercoin.com/static/img/referral/banners/ref_72890.gif) ](https://rollercoin.com/?r=kl3gfn3b)
Vue JS 3 - Complete Advance CRUD Example with Vuex, Vue-Validate, Pagination, Searching and Everything
Tags: vue, vuex, crud, vuejs3
Published: 2021-02-23 17:21:52

Welcome to Vue JS 3 with Vuex - A Complete project example to start your vue js project right now and get big website flovor at a glance.

### Setup Part

- Vue JS Page Setup
- Vue Router Setup
- Vue-Bootstrap Setup
- Vuex Setup for Central Storage Management

### CRUD Part
- Page Design
    - Product List Page Design
    - Product Create/Edit Page Design
    - Product View Page Design
    - Product Delete Modal
- Product List
    - Product List API Integration
    - Product Pagination
    - Product Searching
- Product Create
    - Form Validation throw `Vue-validate`
- Product Edit
    - Product Details Loading and Edit
- Product Delete
    - Sweet Alert or other alert system


Project Complete Source Code and Article found here - 
https://devsenv.com/tutorials/vue-js-3-complete-advance-crud-example-with-vuex,-vue-validate,-pagination,-searching-and-everything

Let's get a short demo about the system
https://www.youtube.com/embed/ffs_1bvOdHk


Let's dive into Vue js 3 with Vuex data management library very easily and get done a big project today. 
Have your say, Please let me know.
One year of Programming Flutter, DevTalk and a 35% discount on the book!
Tags: flutter, books
Published: 2021-02-23 17:18:51

[It's been a year since the Pragmatic Programmers published Programming Flutter, my Flutter book](https://pragprog.com/titles/czflutr/programming-flutter/).

There have been many people saying great things about it, and many more asking me to guide them through the Flutter journey they started by reading my book.

[My blog](https://carmine.dev) and my presence on dev.to is designed to help with common things people want to do with Flutter, but if you have any question, [in addition to emailing me at carmine@carminezacc.com](mailto:carmine@carminezacc.com), you can post about issues with the book or questions about Flutter [on its DevTalk page](https://devtalk.com/books/programming-flutter), where you can also find a 35% discount on the price of the book.

I will resume publishing tutorials on dev.to and [on my blog] (https://carmine.dev) over the next few weeks.
TIL: You can use css to remove the double-tap zoom feature on iOs
Tags: css, html, ios, ux
Published: 2021-02-23 16:59:06

I've been building an new website with lots of `number inputs`. The browser default `number inputs` tend to have very small `step-up` and `step-down` buttons. (the little arrow buttons that increment the value up or down one step)

So, I made my own `step` buttons to make the targets easier to click. They worked fine, except on `iOS` devices. By default on `iOS`, double-tapping on an element zooms in.

Since these buttons are pressed many times in a row, you end up having to zoom out every time you use them. It's very annoying.

Anyway, here's a simple `css` solution that stops the `double-tap zoom`.

```
button {
    touch-action: manipulation;
}
```

[`touch-action` is a `css` property that defines how an element can be used by a touch screen.](https://developer.mozilla.org/en-US/docs/Web/CSS/touch-action)

Of course, **you shouldn't stop everything being zoomable**, just specific elements that are causing trouble.

*You can see the number input in action on this [simple dice rolling tool](https://missingdice.com/dice-roller/) I made.*
GraphQL Meetup + win access to Advanced React course by Wes Bos!
Tags: graphql, techtalks, meetup, react
Published: 2021-02-23 16:53:00

😁 Tune in for the 21st edition of GraphQL Berlin Meetup! 🤗 Connect with the GraphQL enthusiasts worldwide, get inspired by the talks, join the Q&A session and win prizes in the quiz. 🎁 Hosted by wonderful Daniel Norman, the MC extraordinaire and Developer Advocate at Prisma. 🎤

🌍

We have two amazing speakers presenting at this event:
◭ [Benny Powers](https://twitter.com/PowersBenny) talking about GraphQL and Web Components
◭ [Eve Porcello](https://twitter.com/eveporcello) with "Getting Acquainted with Defer and Stream".

🌍

During this meetup, we'll host a quiz, where you can win the access to Fullstack Advanced React and GraphQL course by Wes Bos and Prisma swag. 🎁 You can check out the course here: https://advancedreact.com/

🌍

This meetup will be streamed to YouTube, and Prisma will add the subtitles later for accessibility.
[Link to the stream](https://www.youtube.com/watch?v=HDjDCmKbH2c)
[More info and RSVP](https://www.meetup.com/graphql-berlin/events/276536880/)


![GraphQL Berlin Meetup](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/6bogg4w49fgmshf92bak.png)
Flatiron Phase 2 Portfolio Project: Sinatra
Published: 2021-02-23 16:34:35

Hello! 

Welcome to my second technical blog for Flatiron Bootcamp. For phase 2, we were tasked with building a Sinatra program with the following requirements: 

- Implement the MVC convention 
- Use active records
- Implement user accounts
- Use CRUD

**Problem**

"According to briefings from the U.S. Defense Department, military suicides have increased by 20 percent over the past year. Leaders from the Army and Air Force have said the pandemic is likely a contributing factor."

**Solution**

I created a program that provides a safe space for veterans to anonymously connect with other veterans via virtual meetings.

**Process**

Plan, plan, plan! I quickly realized that to complete this project I would need to take a different approach from my CLI program. So that is what I did and dived into the wonderful world of diagrams! Sketching out the ideas that I had in mind was not only a great way to visually see my programs moving parts but a fantastic starting off point. 

![Alt Text](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/h8sg3o3hnisze9n49gw3.jpg)
Appwrite 0.7: Introducing Built-in Brotli Compression for Improved API Performance
Tags: javascript, flutter, webdev, node
Published: 2021-02-23 16:32:03

**The new Appwrite version introduces Brotli compression support for faster HTTP communication and optimized network usage.**

Photo by [Cris Ovalle](https://unsplash.com/@crisovalle?utm_source=unsplash&utm_medium=referral&utm_content=creditCopyText) on [Unsplash](https://unsplash.com/s/photos/speed?utm_source=unsplash&utm_medium=referral&utm_content=creditCopyText)

The new Brotli compression in Appwrite is optional, and you can control how you want to use it using your standard HTTP encoding headers. If your end client doesn’t support it, Appwrite will skip it automatically. The new compression support will continue to work alongside the classic gzip compression Appwrite already supported.

> **Got here, but you’re new to Appwrite?** Appwrite is an end-to-end backend server packaged as a set of Docker micro-services that are really easy to set up and learn. Appwrite provides developers with all the core APIs, tools, and SDKs required to build a modern app. Appwrite can save you lots of time and is pretty fun to use.

## What is Brotli?

Brotli is also a compression algorithm like GZIP. It is developed and maintained by [Google](https://github.com/google/brotli) and is best used for text compression. The reason being, it uses a dictionary of common keywords and phrases on both client and server-side and thus gives a better compression ratio. In version 0.7 of Appwrite, you can enable the Brotli compression for any JSON or text-based response. Actually, the new Brotli support has significantly improved the Appwrite dashboard loading times.

## Client Support

As of 2021, Brotli is supported by all major web browsers, but if you’re using the Appwrite server API and your HTTP client supports Brotli, you can use it to improve performance and reduce your network bandwidth.

![](https://cdn-images-1.medium.com/max/800/1*Cv7-tPkwGXiUtq7D8BK30A.png)

## What’s Next?

You can learn more about the different Appwrite features or check out some of our latest Feature Spotlights:

-   [Cloud Functions](https://appwrite.io/docs/functions)
-   [Appwrite CLI](https://appwrite.io/docs/command-line)
-   [Appwrite Doctor](https://eldadfux.medium.com/appwrite-0-7-introducing-the-doctor-cli-to-help-you-debug-your-server-health-889e9806fe85)

If you’re new to Appwrite, you can try and [install it](https://appwrite.io/docs/installation). It will take you only 2.5 minutes. After you got yourself a copy of the Appwrite server, you can check some of our getting started guides for [Web](https://appwrite.io/docs/getting-started-for-web), [Flutter](https://appwrite.io/docs/getting-started-for-flutter), or [Server](https://appwrite.io/docs/getting-started-for-server), and visit our [Discord community](https://appwrite.io/discord) where we chat about Appwrite non-stop.

We also really like Github stars, if you like what we do you go over to our [Github repo](https://github.com/appwrite/appwrite) and give us one ⭐️.
How to write values in transform property?
Tags: css, tutorial, todayilearned, codepen
Published: 2021-02-23 16:17:36

Hello folks,

Hope you doing some coding stuffs.

By the way, this post is part of our "20 CSS animation"

{% link https://dev.to/atulcodex/20-days-of-css-animation-post-3g8d %}

In this post, I want to share that how we can write different transform values in only one single line. 

> transform: scale(0.5) translate(50px, 0px) rotate(45deg);

Interested? Great check this codepen.

{% codepen https://codepen.io/atulcodex/pen/mdOqMrb %}

And if you guys interested in my free website templates please download them here 👉[AtulCodex Marketplace 🏪](https://www.instamojo.com/atulcodex/).
Android DEV HELP - Service that invokes API and show notifications
Published: 2021-02-23 16:09:36

I need a service thatinvokes API and show notifications.
The problem is that I have to use foreground service for getting service ALWAYS runninig, but with foreground I have to show the service BAD notification.
I can solve the problem in other ways ?
I read something about JobScheduler, but probably it isn't the solution i'm looking for.
please help me
Don't mind it, Bind it Re
Tags: javascript, codenewbie, computerscience
Published: 2021-02-23 15:45:43

I have been struggle a lot in order to understand the concept of this,bind,apply and call concepts of javascript.Since I am from Java Background this keyword was bit confusing.

Here I will explain about call method in neat and clean way....
let's say we have array of objects and wants to apply some method on each and every object
in traditional way we will iterate array and call method and pass argument for every object.
	
	
```var list = [{ length: 20, breadth: 22 }, { length: 5, breadth: 6 },{ length: 12, breadth: 8 }, { length: 13, breadth: 9 },
    { length: 7, breadth: 4 }];
   function calculateAreaRectangle(length,breadth) {
       console.log(length * breadth);
   }  
   list.forEach(element => {
    calculateAreaRectangle(element.length,element.breadth);
   })```
   
   In this example we are calling calculateAreaRectangle() method on each and every obejct by query every object and getting length and breadth.

It can be done by just passing object which will be refernced as this in calculateAreaRectangle() and inside calculateAreaRectangle use this.length*this.breadth and it will do the same
 **below example will describe it**
	
```var list = [{ length: 20, breadth: 22 }, { length: 5, breadth: 6 },{ length: 12, breadth: 8 }, { length: 13, breadth: 9 },{ length: 7, breadth: 4 }];
function calculateAreaRectangle() {
        console.log(this.length * this.breadth);
}  
list.forEach(element => {
    calculateAreaRectangle.call(element);
})```

![Alt Text](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/vwww2f4t43as19g061bw.jpg)
Now let's discuss about **THIS** keyword we are going to use same example along with global variable length and breadth...
```var length = 3;
   var breadth = 2;
var list = [{ length: 20, breadth: 22 }, { length: 5, breadth: 6 }, { length: 12, breadth: 8 }, { length: 13, breadth: 9 },
    { length: 7, breadth: 4 }];
function calculateAreaRectangle() {
    console.log(this.length * this.breadth);
}  
calculateAreaRectangle(); // it will produce output of 6 because when we will call it will consider global variable as this and since we have length and breadth in global scope it will 
calculate and log result, if there is no variable with name of length and breadth in global scope it will throw NaN.
list.forEach(element => {
    calculateAreaRectangle.call(element);
})```

*THANKS FOR READING*
Accessing updated index in Livewire
Published: 2021-02-23 15:34:01

I recently got started with Livewire and I'm in absolute awe. It makes creating dynamic interfaces so easy while sticking to the familiarity of Laravel. Okay, enough praising for now.

I'm writing this article to highlight a slight niche and currently undocumented feature.

#The Scenario
Okay, consider this: In your component class, you have an array:
```php
public $products= [
        [
            'id' => '2535230536',
            'rate' => '32424',
        ],
        [
            'id' => '3960700133',
            'rate' => '24523',
        ],
        [
            'id' => '0524548004',
            'rate' => '45574',
        ],
    ];
```
And in the view, you have the 'id's & 'rates's bound to inputs.
```html
@foreach($products as $index => $product)
<div  wire:key="products-{{ $index }}">
	<div>
		<label>ID</label>
	<input type="text" wire:model="products.{{ $index }}.id">
	</div>
	<div>
		<label>Rate</label>
		<input type="text" wire:model="products.{{ $index }}.rate">
	</div>
</div>
@endforeach
```
Now, what if you want to hook a task any time a product ID is updated? Something like if ID was updated, update the rate accordingly.

#The Concerns
Let's see... Doing something like:
```php
public function updatedRooms() {}
```
This runs every time `$rooms` gets updated. But we want to run as task when any 'id' gets updated not `$rooms` as a whole.
```php
public function updatedRooms0Id() {}
```
This runs every time `$rooms[0]['id']` gets updated. Which works for the first 'id' but... having to repeat the function (`updatedRooms0Id`, `updatedRooms1Id`...) for every index isn't really DRY.

#The Solution
Wouldn't it be great if only there was a way to access the index? Turns out there is...
```php
public function updatedRooms($value, $key) {}
```
`$key` in our example would return `0.id` if the first ID was updated. The first part before the dot is our index. Which is what we needed! You can now operate on the key to setup tasks you'd like to with something like an if statement.

#That's All Folks!
And before I go, I'd like to thank [Josh Hanley](https://github.com/joshhanley) for helping me with this solution. I hope this article helps many more out there.
Using WayScript to Automatically Monitor Volatile Stocks
Tags: python, tutorial, serverless
Published: 2021-02-23 15:06:17

Introduction
------------

The stock market has become all the rage recently, so in this article we’re going to take a look at how to create an automated script that tracks volatile stocks and provides updates of their status. This is a pretty quick and easy script that could result in big returns. Keep reading to learn more!

Building our Script
-------------------

The first step in this script is adding a Time Trigger module. This module triggers the script to run at a specified time interval. We could set the interval to every minute, ten minutes, and so forth. Since we’re tracking volatile stocks, we’ll set the interval in this example to every minute.  
  
Next, we’ll add a Python module and enter code that gathers information on our stock and passes it. You can find pre-written code on our GitHub for this example, or you can simply clone this script and use the code there. We’ll run through the lines of code so you can see what is occurring.  
  

![tutorial step #1](https://wayscript.com/blog_img/181/1.png)

  
  
The first three lines of code import the pandas and Alpha Vantage libraries; the Alpha Vantage library is where we’ll pull stock market information from. The next line provides the API code for Alpha Vantage (disclaimer: Alpha Vantage may shut down this API code if you overuse it, so you may need to get your own from their website). The next few lines of code perform some general calculations on the data. The last lines tell the script to create a variable when there’s a 0.5% change in the last minute.  
  
Now that we have this code, when we run it the variable that we created will appear as a stored WayScript variable. We’ll then add a Gmail module. In this module, we’ll link our accounts and then drag this variable into the “Email Body” text box. Once we activate the Time Trigger, the script will send us an email every minute if the stock experiences a 0.5% change within the previous minute.  
  
This is an easy script to make if you want to stay up to date on your stocks without constantly checking your market apps. By getting a notification every time something major happens, you can spend more time focusing on other things. Now, you’ll never miss an opportunity to make informed decisions on your volatile stocks.

Conclusion
----------

Questions about this script or anything else? Join our [discord](https://discord.gg/VWbXSbj). We're always around to help. If you want to work the full script template, just find it [here](https://wayscript.com/user/derricks/UqdwSSRD). To use the code for this script, find it [here](github.com/wayscript/code_snippets/blob/master/Python%20Programming%20in%20the%20Cloud/GME_Alerter.py) on our GitHub.
UI Dev Newsletter #45
Tags: webdev, html, css, javascript
Published: 2021-02-23 15:05:11

- [The CSS File Size and Count Report for Premier League sites](https://bit.ly/3btFUJh)
Silvestar shares insights on CSS file sizes from auditing Premier League sites.


- [How Does CSS Work?](https://bit.ly/3umbph3)
Elad Shechter explains how to understand the default behaviour of styles in our browsers.


- [The Fetch API Cheatsheet: Nine of the Most Common API Requests](https://bit.ly/3bxeH8m)
Ondrej Polesny shares and describes the nine most common Fetch API requests in detail.


- [front-of-the-front-end and back-of-the-front-end web development](https://bit.ly/3uoabBO)
Brad Frost explains the frontend developer roles in details.


- [Use CSS Clamp to create a more flexible wrapper utility](https://bit.ly/3pJWDwS)
Andy Bell shares a handy way to use modern CSS functions to give yourself fine-grained, yet flexible, design control.


- [11 Easy UI Design Tips for Web Devs](https://bit.ly/3ulnJhn)
Danny Adams shares 11 easy to apply UI design fundamentals to make your projects look sleek and modern.


- [Citibank just got a $500 million lesson in the importance of UI design](https://bit.ly/2NRhbWZ)
Timothy B. Lee describes how Citibank was trying to make $7.8M in interest payments, but it sent $900M instead.


- [Debugging layout repaint issues triggered by CSS Transition](https://bit.ly/3upn52K)
Dzhavat Ushev walks us throughout the process of fixing repaint issues caused by CSS transitions.



Happy coding!

[Subscribe to the newsletter here!](https://bit.ly/34155z3)
Typescript Intellisense and the Interface
Published: 2021-02-23 15:03:31

Given: An interface definition like this:
```typescript
export interface InjectDetails {
        /**
         * Optional.
         * If allFrames is true, implies that the JavaScript or CSS should be injected into all frames of current page. By default, it's false and is only injected into the top frame.
         */
        allFrames?: boolean;
        /**
         * Optional. JavaScript or CSS code to inject.
         * Warning: Be careful using the code parameter. Incorrect use of it may open your extension to cross site scripting attacks.
         */
        code?: string;
        /**
         * Optional. The soonest that the JavaScript or CSS will be injected into the tab.
         * One of: "document_start", "document_end", or "document_idle"
         * @since Chrome 20.
         */
        runAt?: string;
        /** Optional. JavaScript or CSS file to inject. */
        file?: string;
...
```

We make a declaration to use it as shown here:

```typescript
let details
  :chrome.tabs.InjectDetails
```
We find; however, that this code doesn't work.

```typescript
details.code = "";
```
Just hovering over the name 'details' shows the error.

![Alt Text](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/jcot9yxxkcy14bhxiwto.png)

It tells us to assign a value before using.

```Typescript
let details
 :chrome.tabs.InjectDetails 
    = {}
details.code="";
```
If we hover over "details" now, we see all the property definitions.

![Alt Text](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/2navfc7aq187heimct85.gif)

Intellisense is the single best way to learn an API, as we code! It also support the JSDOC shown above.

[Typescript Intellisense Reference](https://docs.microsoft.com/en-us/visualstudio/ide/javascript-intellisense?view=vs-2019#TypeInference)

JWP2021 Intellisense and the Interface