teleren/devto huggingface dataset:
Why “dark mode” is more energy-efficient: How to calculate image energy-cost
Tags: html, javascript, webdev, performance
Published: 2021-04-19 11:42:37

When I read Tom Greenfords execellent book [Sustainable Web Design](https://abookapart.com/products/sustainable-web-design), there was one fact that stuck with me in particular:

> Running Google Maps in night mode reduced screen power draw by 63 percent.

Why is that?

When you think about it, it's quite simple:

> Black is the most efficient color for OLED screens as the pixels are switched off, and white is the most energy intensive

So images use different amounts of energy, depending on the intensity of the `red`, `green` and `blue` lights in the pixel.

Tom goes on to show two examples of his website **before** and **after** an update:

**Before:**
![Before](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/eotv0iy0eevzileimfx2.png)

**After:**
![After](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/rt3gk4vors0ac6w6cm47.png)

The latter use almost half the energy of the first one! 

Unebelievable, right?

So – I sat out to create a small tool for calculating the energy-intensity of an image!

---

## Draw the image onto a `<canvas>`

The `<canvas>`-tag has a really useful method: `getImageData()`, which will return a (very large!) array of all the pixels in an image – in chunks of 4: `red`, `green`, `blue` and `alpha`:

```js
const imgData = ctx.getImageData(0, 0, width, height);
```

With this array, we can iterate and return an array of percentages:

```js
const len = imgData.data.length / 4;

let r = 0, g = 0, b = 0, a = 0;
for (let i = 0; i < imgData.data.length; i += 4) {
  a = 255 / imgData.data[i + 3];
  r+= imgData.data[i] / 255 / a;
  g+= imgData.data[i + 1] / 255 / a;
  b+= imgData.data[i + 2] / 255 / a;
}
r = Math.floor((r/len) * 100);
g = Math.floor((g/len) * 100);
b = Math.floor((b/len) * 100);

return [r, g, b];
```

To get the average:
```js
const avg = Math.ceil((r+g+b) / 3);
```

The tool is on [Codepen](https://codepen.io/stoumann/full/vYgzpNp) – try uploading your own image to check the light/energy intensity. 

The initial image is a pure rgb-color-image, with `blue` set to 127: `rgb(0, 0, 127)`. That results in:

```html
R: 0%
G: 0%
B: 49%
Average: 17% 
```

{% codepen https://codepen.io/stoumann/pen/vYgzpNp %}

---

## But … It's Not So Simple

While this tool will give you a hint about the energy-usage of an image, it's much more complex than that.

The [photon energy](https://en.wikipedia.org/wiki/Visible_spectrum) differs for different wavelengths, with red being lowest and violet being highest.

A pixel contains approx. 10.000 photons, so I assume it's possible to calculate the **eV** cost of an image in a particular resolution – and then convert that number to **Watt** – but it's beyond my skills!

## Conclusion

It would be nice, if a tool like *Lighthouse* could calculate the energy-effectiveness of a website – perhaps compared to a list of how much energy popular devices use, when all pixels are either black or white.

This way you could test how much *battery drain* you could prevent by designing darker websites!

Thanks for reading!
Flutter vs. Swift for iOS Apps: Which one is better in 2021?
Tags: flutter, swift, ios, mobile
Published: 2021-04-19 11:30:39

There’s an app for everything, and if your business doesn’t have one, you may be missing out on potential revenue. Customer demand for reliable, user-friendly apps has never been higher. Fortunately, advances in mobile technology have made it easy to develop high-performing iOS and Android applications.

However, before you begin building your app, you’ll have to determine which framework will work best. The two main choices for iOS app development are Flutter/Dart and Native iOS/Swift. So, we’ve provided this mobile app framework comparison to help you figure out which framework or language is right for your project.
Listing of AWS Lambda Python 2.7 functions that will be EOL(across all regions)
Tags: aws, lambda, python, shell
Published: 2021-04-19 11:29:08

The official AWS blog posted An announcement titled [Announcing end of support for Python 2.7 in AWS Lambda](https://aws.amazon.com/blogs/compute/announcing-end-of-support-for-python-2-7-in-aws-lambda/).

In the post, there is an AWS CLI command that lists Python 2.7 Lambda functions.

```bash
aws lambda list-functions --function-version ALL --output text --query "Functions[?Runtime=='python2.7'].FunctionArn"
```

# Across all regions

Here is a shell to run its command across all regions.

## Script(list-py27functions.sh)
```bash
for region in `aws ec2 describe-regions --query "Regions[].RegionName" --region us-west-1 --output text`
do
    echo "[${region}]"
    aws lambda list-functions --region ${region} --output text --query "Functions[?Runtime=='python2.7'].{ARN:FunctionArn, Runtime:Runtime}"
done
echo "finished"
```

## Usage

```bash
export AWS_PROFILE=xxxx # Not necessary if you always set the default profile.
sh list-py27functions.sh
```

### Output

```text
[eu-north-1]
[ap-south-1]
[eu-west-3]
[eu-west-2]
[eu-west-1]
[ap-northeast-3]
[ap-northeast-2]
[ap-northeast-1]
arn:aws:lambda:ap-northeast-1:111111111111:function:xxxxx	python2.7
arn:aws:lambda:ap-northeast-1:111111111111:function:yyyyy	python2.7
[ca-central-1]
[ap-east-1]
[ap-southeast-1]
[ap-southeast-2]
[eu-central-1]
[us-east-1]
arn:aws:lambda:us-east-1:111111111111:function:test	python2.7
[us-east-2]
[us-west-1]
[us-west-2]
arn:aws:lambda:us-west-2:111111111111:function:zzzz	python2.7
finished
```

You can also run it from within CloudShell without specifying a profile.

# Reference

[Announcing end of support for Python 2.7 in AWS Lambda](https://aws.amazon.com/blogs/compute/announcing-end-of-support-for-python-2-7-in-aws-lambda/)
[AWS CLI::list-functions](https://docs.aws.amazon.com/cli/latest/reference/lambda/list-functions.html)
[AWS CLI::describe-regions](https://docs.aws.amazon.com/cli/latest/reference/ec2/describe-regions.html)
[AWS CLI::Filtering](https://docs.aws.amazon.com/cli/latest/userguide/cli-usage-filter.html)
React native run android terribly slow 
Tags: reactnative, android, javascript
Published: 2021-04-19 11:25:04

Hi,

"react-native run-android" command takes a lot of time to deploy the app into device/emulator. Can someone let me know what might be the route cause for this issue ? and How to overcome this issue?

 
 ![image](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/2x6kqy3eebj2frp4xi37.png)
 
https://github.com/facebook/react-native/issues/27898

Thanks in advance.
How It’s Going
Tags: weeklylearn, weeklyretro, devsjournal, rails
Published: 2021-04-19 11:24:11

Another week in Our Time for Tech has gone by. In the past week, we had a variety of discussions as regards the development process.

**First**, we had to stop the use of the Devise Gem and the reason was that as we worked further on different features of the App, it was seen (with our Senior Engineers’ help) that it is too complex to fit into the needs of our App. This caused us to have another version of the App on the GitHub repo, of which everything has been running smoothly so far. 

This also taught me that;
 >“Just because something is popular doesn’t mean that it’s going to fix your current project.” - Arit

*Additionally*, we decided to reduce our App’s MVP by removing the worker-slots feature which allows businesses to alert workers as regards their availability which is specific for upcoming shifts. The removal of this feature was because working on this is far more complex for the time we have which is now less than 7 weeks, including QA(Quality Assurance/smoke testing) and User feedback.

*Furthermore*, I learned how important it is to document/write down your progress in whatever you’re learning as it helps you to communicate effectively what you’ve done, which is a vital skill for a developer. 
We were also advised and told of the importance of keeping our PRs(Pull Requests) small due to its efficiency and how it makes reviews easier. Everybody likes Small PRs while Long PRs are not liked as they are known to stay for a long time.

*Currently*, we’re all working on the UI styling of the App of which we are using SASS and Bootstrap which gives us readable code. In advance, I’m excited about how the guide on using the MiniTests Library is going to look like. As promised by Arit, a collaboration is ongoing with her and Chris Oliver Of GoRails in creating the guide for the testing of the App. 

I’m also glad about how my team and I (now 4 of us) have improved on collaborating, communicating more effectively, and growing together.  

Some Noteworthy points I learned in the past week:
>“It’s great to be comfortable with uncertainty”. 
>“Uncertainty is something that’s part of a developer’s life.”
>“Get comfortable with being uncomfortable”
>“Assume best intentions when giving and receiving feedback.”

I’m looking forward to more learning and excited to see where we go from here. Thanks for reading!

Follow along with DEV posts from my cohort: 
https://dev.to/ourtimefortech
Check out Our Time for Tech: 
https://ourtimefortech.org/

Photo by <a href="https://unsplash.com/@ilyapavlov?utm_source=unsplash&utm_medium=referral&utm_content=creditCopyText">Ilya Pavlov</a> on <a href="https://unsplash.com/s/photos/4096-by-4096-coding-picture?utm_source=unsplash&utm_medium=referral&utm_content=creditCopyText">Unsplash</a>
Java – How to use Stream Filter in Java 8 with List & Array Examples

Tags: java, java8, stream, array
Published: 2021-04-19 11:17:30

https://grokonez.com/java/java-8/java-how-to-use-stream-filter-in-java-8-with-list-array-examples

Java – How to use Stream Filter in Java 8 with List & Array Examples


[no_toc]
Java 8 provides an extremely powerful abstract concept <code>Stream</code> with many useful mechanics for consuming and processing data in Java Collection. In the tutorial, We will use lots of examples to explore more the helpful of Stream API with filtering function on the specific topic: "Filter Collection with Java 8 Stream".

What will we do?
<ul>
<li>How to filter List with traditional approach?</li>
<li>Use Java 8 Stream to filter List and Array Objects</li>
<li>Apply <code>filter()</code> function with other util functions of Stream API in practice</li>
</ul>

Now let's do examples for more details!

Related posts:
- <a href="https://grokonez.com/java/java-how-to-find-an-element-in-a-java-list-object-by-examples">Java – How to find an element in a Java List Object by Examples</a>
- <a href="https://grokonez.com/java/java-8-streams">Java 8 Streams</a>

<!--more-->
<h2>Java Filter List by Traditional Approach with Looping</h2>
Before Java 8, for filtering a List Objects, we use the basic approach with looping technical solution.
<h3>Looping Example - Filter Integer List</h3>
- Example: How to get all even number in a list?

<pre><code class="language-java">
List<Integer> intList = Arrays.asList(1, 2, 3, 4, 5, 7, 10, 11, 16);

for(Integer i: intList) {
	if(i%2==0) {
		System.out.println(i);
	}
}
/*
	2
	4
	10
	16
 */
</code></pre>

<h3>Looping Example - Filter String List</h3>
- Example: How to get all string that contains "Java" sub-string in a string List?

More at:

https://grokonez.com/java/java-8/java-how-to-use-stream-filter-in-java-8-with-list-array-examples

Java – How to use Stream Filter in Java 8 with List & Array Examples
How to use Java 8 Stream Collectors.groupingBy() Examples
Tags: java8, collectors, groupingby, stream
Published: 2021-04-19 11:09:25

https://grokonez.com/java/java-8/how-to-use-java-8-stream-collectors-groupingby-examples

How to use Java 8 Stream Collectors.groupingBy() Examples

[no_toc]
In the tutorial, Grokonez will show how to use Grouping By APIs of Java Stream Collectors by examples:
<ul>
<li>Explore Stream GroupingBy Signatures</li>
<li>Combine groupingBy API with others Reduction Operations</li>
</ul>

Now let's do more details!

Related posts:
- <a href="https://grokonez.com/java/java-8/java-8-stream-collect-stream-collectors-apis-examples">Java Stream.Collectors APIs Examples</a>
- <a href="https://grokonez.com/java/java-8/how-to-use-java-8-stream-reduce-examples-with-list-and-array">Java 8 Stream Reduce Examples</a>

<!--more-->
<h2>Stream GroupingBy Signatures</h2>
<h3>1. groupingBy(classifier)</h3>
<pre><code class="language-java">
public static <T,K> Collector<T,?,Map<K,List<T>>> groupingBy(Function<? super T,? extends K> classifier)
</code></pre>

-> It returns a Collector implementing a <code>group by</code> operation on input elements of type T, 
grouping elements according to a <code>classifier</code> function, and returning the results in a Map.

- Type Parameters:
+ <strong>T</strong> - the type of the input elements
+ <strong>K</strong> - the type of the keys

- Parameters:
+ <strong>classifier</strong>: the classifier function mapping input elements to keys

- Returns: a Collector implementing the cascaded group-by operation

Example:

More at:

https://grokonez.com/java/java-8/how-to-use-java-8-stream-collectors-groupingby-examples

How to use Java 8 Stream Collectors.groupingBy() Examples
DevDojo Weekly Winners Week 3 April 2021
Tags: writing, webdev, react, javascript
Published: 2021-04-19 10:49:31

It's that time of the week again. That's right, the time of the week where we congratulate five winners on DevDojo to win a quick $20 for writing an awesome article or tutorial.

If you want to learn more about how you can join in on this weekly contest. Click here to check out the official rules.

Ok, below are the five posts that we have selected this week. In no particular order, here are your weekly winners. 🏆

# 1. [25 Marvelous Image Resources](https://devdojo.com/savio/25-marvelous-resources-to-satisfy-your-image-needs) 

Check out these awesome 25 resources to find the perfect image for any of your web development needs. Written by [savio](https://devdojo.com/savio).

[![25 Marvelous Image Resources](https://cdn.devdojo.com/posts/images/April2021/25-marvelous-resources-to-satisfy-your-image-needs1.jpg?auto=format&q=70&w=1280)](https://devdojo.com/savio/25-marvelous-resources-to-satisfy-your-image-needs)

# 2. [CSS Variables](https://devdojo.com/zfett/css-variables-what-are-they-how-can-they-be-used) 

Learn all about CSS variables. What are they and how to use them. This fantastic article was written by [zfett](https://devdojo.com/zfett).

[![CSS Variables](https://cdn.devdojo.com/posts/images/April2021/css-variables-what-are-they-how-can-they-be-used4.jpg?auto=format&q=70&w=1280)](https://devdojo.com/zfett/css-variables-what-are-they-how-can-they-be-used) 

# 3. [What is Redux?](https://devdojo.com/rahulism/what-is-redux-practical-guide-to-redux) 

Learn about Redux and how you can use it in your React projects. This rad tutorial was written by [rahulism](https://devdojo.com/rahulism).

[![What is Redux?](https://cdn.devdojo.com/posts/images/April2021/what-is-redux-practical-guide-to-redux2.jpg?auto=format&q=70&w=1280)](https://devdojo.com/rahulism/what-is-redux-practical-guide-to-redux)

# 4. [How To Stay Productive as a Developer](https://devdojo.com/bo-iliev/5-tips-on-how-to-stay-motivated-and-productive) 

Here are five sure-fire ways to stay motivated and productive as a developer. You've got to check out this excellent article posted by [bo-iliev](https://devdojo.com/bo-iliev).

[![How To Stay Productive as a Developer](https://cdn.devdojo.com/posts/images/April2021/5-tips-on-how-to-stay-motivated-and-productive2.jpg?auto=format&q=70&w=1280)](https://devdojo.com/bo-iliev/5-tips-on-how-to-stay-motivated-and-productive)

# 5. [The React Tutorial for 2021](https://devdojo.com/reedbarger/the-react-tutorial-for-2021-a-complete-guide) 

This post is the ultimate React Tutorial for 2021. It's a complete guide to help you learn the ins and outs of React. This bitchin' guide was written by [reedbarger](https://devdojo.com/reedbarger).

[![The React Tutorial for 2021](https://cdn.devdojo.com/posts/images/April2021/the-react-tutorial-for-2021-a-complete-guide.jpg?auto=format&q=70&w=1280)](https://devdojo.com/reedbarger/the-react-tutorial-for-2021-a-complete-guide)

# Conclusion

I wish you a fantastic upcoming week. Remember to have fun as your coding away on your projects because being a developer truly is amazing. 😊
How to use Java 8 Stream Map Examples with a List or Array
Tags: java, java8, stream
Published: 2021-04-19 10:49:13

https://grokonez.com/java/java-8/how-to-use-java-8-stream-map-examples-with-a-list-or-array

How to use Java 8 Stream Map Examples with a List or Array

[no_toc]
Converting or transforming a List and Array Objects in Java is a common task when programming. In the tutorial, We show how to do the task with lots of Java examples code by 2 approaches:
<ul>
<li>Using Traditional Solution with basic Looping</li>
<li>Using a powerful API - Java 8 Stream Map</li>
</ul>

Now let's do details with examples!

Related posts:
- <a href="https://grokonez.com/java-tutorial/java-8">Java 8</a>
- <a href="https://grokonez.com/java/java-8-streams">Java 8 Streams</a>

<!--more-->
<h2>Java Transform a List with Traditional Solution by Looping Examples</h2>
Before Java 8, for mapping a List Objects, we use the basic approach with looping technical solution.
<h3>Looping Example - Java Transform an Integer List</h3>
- Example: How to double value for each element in a List?

<pre><code class="language-java">
package com.grokonez.stream;

import java.util.ArrayList;
import java.util.Arrays;
import java.util.List;

public class StreamMapExamples {
	public static void main(String[] args) {
		List<Integer> intLst = Arrays.asList(1, 2, 3, 4);
		
		// How to double value for each element in a List
		// n -> n*2
		
		List<Integer> newLst = new ArrayList<Integer>();
		
		for(int i : intLst) {
			newLst.add(i*2);
		}
		
		System.out.println(newLst);
		// [2, 4, 6, 8]
	}
}</code></pre>
<h3>Looping Example - Java Transform a String List</h3>
- Example: How to uppercase string value for each element in a String List?

https://grokonez.com/java/java-8/how-to-use-java-8-stream-map-examples-with-a-list-or-array

How to use Java 8 Stream Map Examples with a List or Array
ఏపీలో స్కూళ్లకు సెలవులు, షెడ్యూల్ ప్రకారమే…టెన్త్, ఇంటర్ పరీక్షలు
Tags: andhrapradesh
Published: 2021-04-19 10:44:43

https://10tv.in/andhra-pradesh/conduct-10th-and-intermediate-exams-as-per-schedule-andhra-pradesh-to-minister-214711.html
Java 8 Multiple CompletableFutures
Tags: java, java8, completablefutures
Published: 2021-04-19 10:39:54

https://grokonez.com/java/java-8/java-8-multiple-completablefutures

Java 8 Multiple CompletableFutures

In previous posts, we have concept of how to use <strong>CompletableFutures</strong>. This tutorial is about combining multiple CompletableFutures, it is one of the most important and useful abilities of Java 8 asynchronous processing.

Related articles:
- <a href="https://grokonez.com/java/java-core/java-future">Java Future</a>
- <a href="https://grokonez.com/java/java-advanced/java-8-completablefutures">CompletableFutures</a>
- <a href="https://grokonez.com/java/java-8-completablefuture-handle-exception">CompletableFuture Handle Exception</a>

<!--more-->
<div id="tuttoc" class="jsa-toc"></div>

<div id="tutcontents">
<h2>I. Usage</h2>
<h3>1. thenCompose()</h3>
<pre><code class="language-java">&lt;U&gt; CompletableFuture&lt;U&gt; thenCompose(Function&lt;? super T, ? extends CompletionStage&lt;U&gt;&gt; fn)</code></pre>
<code>thenCompose()</code> can chain 2 <strong>CompletableFutures</strong> by using the result which is returned from the invoking future.
<pre><code class="language-java">private static void testCompose() throws InterruptedException, ExecutionException {
	CompletableFuture&lt;String&gt; future = createCF(2); // inside future
	CompletableFuture&lt;String&gt; combinedFuture = future.thenCompose(MainApp::calculateCF);

	combinedFuture.thenAccept(result -&gt; System.out.println(&quot;accept: &quot; + result));
	// check results
	System.out.println(&quot;Future result&gt;&gt; &quot; + future.get());
	System.out.println(&quot;combinedFuture result&gt;&gt; &quot; + combinedFuture.get());
}

private static CompletableFuture&lt;String&gt; calculateCF(String s) {

	return CompletableFuture.supplyAsync(new Supplier&lt;String&gt;() {
		@Override
		public String get() {
			System.out.println(&quot;&gt; inside new Future&quot;);
			return &quot;new Completable Future: &quot; + s;
		}
	});
}</code></pre>
<code>combinedFuture</code> uses <code>thenCompose()</code> method of <code>future</code> with <code>calculateCF</code> function to get and modify the result from previous step of <code>future</code>.

Run the code, the Console shows:
<pre><code class="language-java">
inside future: waiting for detecting index: 2...
inside future: done...
> inside new Future
accept: new Completable Future: 2
Future result>> 2
combinedFuture result>> new Completable Future: 2
</code></pre>

More at:

https://grokonez.com/java/java-8/java-8-multiple-completablefutures

Java 8 Multiple CompletableFutures
An alternative for Linkedin Profile with Github pages.
Published: 2021-04-19 10:38:43

As a newbie:bee:, you might be looking around for some ideas and nicer techniques to use on your Github page.
![image](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/6808ma7cub7sczas8vay.png)

On the main page of Github you need to follow these steps to make your profile page look way nicer.
1.Create a new repository
2.It is advised to use the same user name as your repository name to make the page appear on your Github Profile Page.
3.Go through the process and choose to make it public
4.Of course don’t forget to add the readme.MD file.
5.Let's hit create a repository and voila.

Go to your profile and see the edit button to start writing your own About me page. 

ABOUT ME 👩‍💻

(Place your about me on top of your page.)

I’m...I like..
Add bullet points:
- I like learning languages and frameworks like React 
- I am a passionate front end developer 
- Currently researching to use chakra.UI in my React project
-How to reach me(link of your Linkedin profile)

SKILLS 🛹

Make a list so it is way nicer and easier for eyes to catch for visitors. Like below.
- :computer: HTML/CSS
- :computer:PHP/Laravel
- :computer:Javascript/React

ADD BANNER 👇

You can easily add a banner so that you can add visual aspects to your readme file.
You can do that by right clicking on your linkedin or twitter page and copy your address and that you can embed it like below.

![](https://media-exp1.licdn.com/dms/image/C4D35AQFfo4UjToQ/profile-framedphoto-shrink_400_400/0/1615886640288?e=1618250400&v=beta&t=4UdZf_QaewithZ5LYa7UFKtsYMXTJyefF_6ZDAcM0Ro)

CURIOUS TO SEE HOW MANY PEOPLE HAVE VISITED YOUR GITHUB PAGE?🤼

Here is a website will solve that: https://hits.dwyl.com/
Put your user name and repo name as you have given in Github 
And place the link in your readme.MD file 
Voila, the count is on!
 
ICONS 🌟

Don’t forget to make your page more fun with icons that you can embed very easily.
If you want you can just type an existing name of emoji ( :  computer : ) :computer: 
Feel free to get some help from the emoji cheat sheet.
( https://www.iemoji.com/emoji-cheat-sheet/smileys-people)

GIFS TO SHOW YOUR PROJECTS 🎥🎥

GIFS are amazing ways to give an impression of your work in a short amount of time instead of going through all your projects or just linking them with URL paths.
Pick your best project that you are proud to display.
That is a very interesting and easy-to-use tool suggested by a 
junior developer. (https://www.screentogif.com/)

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


Hope this helps,Thank you for reading.:pray: