teleren/devto huggingface dataset:
Faster way to appendElements in js 👨🏻‍💻
Tags: ux, html, todayilearned, javascript
Published: 2019-06-23 05:21:59

### 🚧 **Spoiler:**
####This post is about how to dramatically decrease your UI loading time for a better UX!

#The cute little but scandalous cry of the early morning 😥

Anyone knows a common pitfall (💣) is the method used to append elements to the DOM   
In my innocence of curious developer I was fiddling with old code to evaluate its performance, and I was scared even without using any framework to add elements in the DOM was with 
##*27s* to insert all the *330* components of a template from my UI in a *async request*.##
(I mean the not so efficient JQuery, because I had the task of passing a whole project to pure javascript, but this is subject to another post).


#Against a dirty diaper 😬💩

I was using the classic `innerHTML` to add them to the view, which fit me at the moment this would be the fastest way 🤷‍♂️

![](https://i.imgur.com/REUGDq7.png)

and using `console.time` to evaluate performance, I got a high time as seen below

![](https://i.imgur.com/lGm6DHN.png)

###Using the moist handkerchief in my tiny, cuddly conflict, I reflected existentially: *How to improve it?*

After some time meditating on the forums, I wrote the following function
![](https://i.imgur.com/z4AOAvP.png)
##The ninja diaper changer 🤸
###Therefore in `console.time` I saw a incredible *26.73s* of improvemment 🧐👌
![](https://i.imgur.com/QUViK4v.png)

#Thanks for reading!🙌🍼

I am a FullStack Developer who is enthusiastic about new technologies and enhancements, and also a first-time dad 😊
This is my first post, and with it I open the way to a greater participation in the community, any doubt contact me 🍻
Getting to know AWS Lambda - FaaS
Published: 2019-06-27 07:31:32

---
title: Getting to know AWS Lambda - FaaS
published: true
tags: 
canonical_url: https://kambanthemaker.com//posts/knowing-aws-lambda/
---

AWS Lambda is a FaaS (Function as a Service), a serverless approach to code units. I have been using AWS Lambda for a while and I am impressed by its capabilities. Let me do a writeup on the basics, pros and cons.

 ![Lambda](https://i.ibb.co/DzPR22L/iu.jpg)

## Under the hood

Under the hood, Lambda uses docker containers to run your code. The container is ephemeral because it may only last for one invocation or a few invocations depending upon the frequency. Function as a Service here does not mean you can only run a single function. I have my big Python project including dependent libraries inside lambda.

## Important features

- Fault tolerance - Since your code is maintained in multiple instances
- Scalability - AWS scales the compute capacity based on the incoming request without needing any configuration
- Integration with other AWS Services like S3, API Gateway, SNS, CloudFront, DynamoDB
- On demand - You won't be charged when not invoked. Pretty cool!
- Ability to call other lambda functions from one lambda
- Support many programming languages like Java, Python, Node.js, C#, Go, and so on.
- 1,000,000 free requests per month under free tier

## Limitations & caveats

- Maximum execution time is 15 mins (previously 5 mins)
- The temporary directory size is 512 MB, so you need to be careful when downloading big files
- By default maximum of 1000 concurrent executions can happen for an AWS account. This is to protect unexpected costing. So, for production system, raise a request with AWS to increase the limit.

## Tools

Though you can manage Lambda from AWS console, it is suggested to use other tools to manage the development and deployment. A few options are,

- [AWS Command line tool](https://aws.amazon.com/cli/)

Eg:

> aws lambda create-function --function-name test --runtime nodejs8.10 --role arn:aws:iam::XXXXXXXXXXXX:role/my-role --handler tensorml --region ap-south-1 --zip-file fileb://./Test.zip

- [AWS CloudFormation](https://aws.amazon.com/cloudformation/)

AWS CloudFormation provides a common language for you to describe and provision all the infrastructure resources in your cloud environment

- [Serverless](https://serverless.com/framework/docs/providers/aws/guide/intro/)

The Serverless Framework helps you develop and deploy your AWS Lambda functions, along with the AWS infrastructure resources they require.

Thank you!
Math.min returns Infinity?
Tags: javascript
Published: 2019-06-23 03:03:35

---
title: Math.min returns Infinity?
published: true
description: Why does Math.min return Infinity, not a negative Infinity?
tags: javascript
cover_image: https://thepracticaldev.s3.amazonaws.com/i/dz85uli1kcrsvrob93tc.png
---

# Preface

I was playing around with "Math.[min](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Math/min)/[max](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Math/max)" and the result of empty calls looked like it was backwards.

![empty math min max results](https://thepracticaldev.s3.amazonaws.com/i/dz85uli1kcrsvrob93tc.png)

# Question

Shouldn't `Math.min` return `-Infinity` while `Math.max`, `Infinity`?

# MDN Documentations

MDN documentation on [Math.max](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Math/max#Description) shows that
> If no arguments are given, the result is -Infinity.

And [Math.min](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Math/min#Description) documentation shows 

> If no arguments are given, the result is Infinity.

# But why? 🤔

After some thinking, it made sense.

Suppose that you are passing one value to `Math.min(3)`. The minimum should `3` as it's the sole value pass to the function. `3` should be lower than whatever the minimum JavaScript has to compare.

Any value other than Infinity itself (`Infinity === Infinity` is `true`) should be the minimum, and as `3` is smaller than `Infinity`, 3 is returned by `Math.min`.

Same thing for `Math.max`. If you call `Math.max(3)`, `3` is bigger than `-Infinity` thus, `3` is returned.


# But...

I am not exactly sure if my thought process is correct or not but at least it helps to understand what default values are returned when no argument is passed to `Math.min/max` functions.

Would anyone let me know if I understood the reason behind the return values?
Generating image preview for geany
Tags: easygen, codegen, geany
Published: 2019-06-23 02:27:21

---
title: Generating image preview for geany
published: true
description: Generating image preview for geany
cover_image: https://i.stack.imgur.com/1e89d.jpg
tags: easygen,codegen,geany
---

This is a follow up to my previous blog, [Generating image preview easily](https://dev.to/suntong/generating-image-preview-easily-opj/), which talks about image preview gallery auto-generation _in general_. It talks about how powerful the Go Template Engine is (which is what `easygen` is based on), and how easy the auto-generation can be customized. 

Now, the new requirement, from the review of my PR, _for geany specifically_, is that, 

> What if the header linked directly to the theme file so it could be downloaded directly into the user's theme directory, and then leave the images to link to the PNG file?

Aha, two "fancy" changes, I like the challenge, and will add one more --

There are _two_ ways to link the theme file, _one_ is to link to its github page address; and _the other_ is to link to the raw file at githubusercontent.com, to show the file as-is. 

Moreover, one further requirement is that, one image, which is not exactly a theme screenshot, should be removed from the output (the `README.md`). 


The solution is still simple. 

- to remove the unnecessary image from `README.md`, remove it from the driving data:

        ls *.png | grep -v screenshot-missing | sed 's/^/  - /; 1s/^/Images:\n/; ' | tee /tmp/Images.yaml

- and the updated template is just:

{% gist https://gist.github.com/suntong/3a31faf8129d3d7a380122d5a6d48ff6 file=Images-geany-themes.tmpl %}

- the auto-generation is still the same as before:

        easygen ~+1/Images.tmpl /tmp/Images.yaml | tee README.md

That's it. You can check out [the end result here](https://github.com/geany/geany-themes/tree/master/screenshots#the-bespin-theme).
Animated Split Text Slideshow | HTML5
Tags: codepen
Published: 2019-06-23 02:11:41

<p>Responsive animated split text slideshow with fit font sizing. (HTML5 based)</p>

<p>Created using the divWidget visual design tool at  <a href="https://divwidget.com" target="_blank">https://divwidget.com</a></p>

{% codepen https://codepen.io/divwidget/pen/jjBgvo %}
Anyone can show me how to safely delete node_modules to clear up harddisk space?
Tags: node, beginners
Published: 2019-06-23 01:34:46

---
title: Anyone can show me how to safely delete node_modules to clear up harddisk space?
published: true
description: cleaning up node_modules because I have low disk space.
tags: nodejs,beginner
---

UPDATED:

For anyone who found this post,
I found a package called `npkill`

https://github.com/voidcosmos/npkill

--END--


Hi all

I use a Mac and it comes with 512GB SSD. There are so many things in stalled and my SSD is low on space.

I would say docker take the most space in my laptop. But I found out that cleaning up `node_modules` from older projects could help.

First, please let me give you some background.

1. I run a software development team where there are more than 100 projects in both ruby and nodejs in my computer. Which I organise like this.
    - `~/_workspace` root folder for all code. `_` is to make it easy to access.
    - `~/_workspace/customer_1_name/project_1_name` 
    - `~/_workspace/customer_1_name/project_2_name`
    - `~/_workspace/customer_2_name/project_1_name`
    - I usually name folder with underscore case. 
2. I use `NVM` and `.nvmrc` in my projects.
    - There are so many `node_modules` folders from `yarn` and `npm i` which is taking too much space on my laptop.
3. I use `RVM` and `.ruby-version` and `.ruby-gemset` in my projects.
    - Rails use `yarn` and some project has `node_modules` which is also taking too much space.
4. There are more than 100 folders to clean up and that's for me only. My team need to do this as well.

I need help I safely delete `node_modules` folders. Or if anyone face the same problem, please share your experience.

Thank you so much.
Pixel Weather
Tags: showdev, electron, javascript, linux
Published: 2020-10-16 05:57:18

---
title: Pixel Weather
published: true
date: 2019-06-23 00:00:00 UTC
tags: showdev, electron, javascript, linux
canonical_url: https://home.aveek.io/blog/post/pixel-weather/
---


### Pixel weather is a small and compact 8 bit style weather widget designed for your Linux desktop.

# Features

- It’s transparent background allows it to blend in with your current setup
- Always stays on your desktop so it won’t get in your way. This means it’s hidden when you switch windows with `alt+tab`
- Switch between dark mode and light mode, for lighter and darker backgrounds respectively.
- Clean interface, with no clutter, all options can be accessed by right clicking.

# How to use

- Install the package.
- Sign up and get your API key from the [`Dark Sky`](https://darksky.net/dev) console.
- When you open the app for the first time, a settings menu pops up, paste your API key there.
- You can also change how often the weather is updated.
- After submitting the settings, right click, refresh and wait for the weather to update.
- You can choose where to place the widget by choosing from the Position menu.
- The menu can be accessed by right clicking anywhere on the widget.

# Screenshots

![Screenshot1](https://home.aveek.io/blog/pixelweather/screenshot1.png)

![Screenshot2](https://home.aveek.io/blog/pixelweather/screenshot2.png)

# Code & Download

{% github aveek-saha/pixel-weather no-readme %}

To try it out, download it here - [`Downloads`](https://github.com/Aveek-Saha/pixel-weather/releases)
useState hook variable's value is always one step behind
Tags: usesate, hooks
Published: 2019-06-22 23:06:17

Here using React and Next.js.

Here a summary of the code:

I have this hook:

```javascript
import { useState } from 'react';
import BigCalendar from 'react-big-calendar'
import moment from 'moment';
import CreateEventForm from './CreateEventForm';

const localizer = BigCalendar.momentLocalizer(moment);

const Calendar = props => {

    const [newEvent, setNewEvent] = useState({
        start: new Date(),
        end: new Date(),
    });

    const onSelectHandler = info => {
        // logging the new info
        console.warn('New info: ', info);
        // assigning the new info to the hooks variable
        setNewEvent(info);
        // logging the hook variable's value 
        console.warn('Hook variable\'s value: ', newEvent);
    }

}
```
There's actually nothing else to be told, when the handler is fired by an event, the variable info comes with an object on new information. Inmediately I log the information to the console to see that it is actually the correct and new info, i set the info to the hook's variable and inmediately log to the console the value of the hook's variable and it doesn't match the new info i just tried to assign to it. It's actually logs the default values (the 2 dates).
If I do it again, it happens the same but the hooks variable this time doesn't log the default, but the new info of the first try, so basically it's coming one time late every time.

What could i have done to make this happen?

The event firing the handler is when i select a slot at the React Big Calendar
```javascript
const myEvents = props.events.map(event => {
    return {
        ...event,
        start: new Date(event.start),
        end: new Date(event.end)
    };
});

    <BigCalendar
        defaultView="week"
        localizer={localizer}
        events={myEvents}
        startAccessor="start"
        endAccessor="end"
        selectable={true}
        onSelectSlot={onSelectHandler}
    />
```
Thoughts on first Technology meetup I've attended...
Tags: network, collaboration, google
Published: 2019-06-22 22:58:04

---
title: Thoughts on first Technology meetup I've attended...
published: true
description: 
tags: network, collaboration, google. 
cover_image: https://thepracticaldev.s3.amazonaws.com/i/g3x5lk4123cie17r4b1v.jpg
---

As a Computer science graduate, previous technical support, and a current programmer, i have been into tech related events before, but this one was a little bit different.
Following up my plan to grow my network, i decided to go to this meetup, i look it up in [Meetup](https://www.meetup.com/) website.

This meetup was in Egypt **Damanhour** a small city that is one hour away from Alexandria, I didn't have any geek Egyptian friends, and it's my first time to come to Egypt, so i was excited and a little bit nervous at the same time because i didn't have the slightest idea about the Egyptian technology community, haven't been in touch with any of its members, or searched about it online! and visit to Egypt was originally for a family vacation.
That's why it was different. 

###Organizer of the meetup?
Google Developers Group Damanhour (GDG Damanhour).

*"GDGs are local groups of developers who are specifically interested in Google products and APIs. Each local group is called a GDG chapter and can host a variety of technical activities for developers - from just a few people getting together to watch our latest videos, to large gatherings with demos and tech talks, to hackathons.
Google Developers supports and recognizes GDG chapters, but doesn’t own or manage them."*

###Topics that were covered?
It contained 3 parts, each of which was an introduction for the topic.
- Flutter by: Tarek Alabd.
- AI by: Gihad Naguib.
- Google Cloud Platform by: Wessam El-shaarawy.

For a complete beginner in each of the topics above with a little of basic knowledge in technology in general, content presented was very good, speakers have impressive CV's and very good experiences.
  
###Did i like it?
Yes i did, i got to know about the tech community and tech market in Egypt, Speakers, organizers and participants were so nice, welcoming and welling to answer all questions.

![GDG Damanhour](https://thepracticaldev.s3.amazonaws.com/i/w3f4ylgwetm4bh6bh1e3.jpg)

And it was good to see another side, which is google products, a side that i didn't work with any of its technologies yet. 

I've even got my first Programmer stickers :D 

![Technology Stickers](https://thepracticaldev.s3.amazonaws.com/i/2omn3ujn8ahpx94h6kda.jpg)

**Attending 2 Tech related events outside Sudan: half Checked ;)**
A new endeavor to reach the next level
Tags: entrepreneurship
Published: 2019-06-22 22:48:36

---
title: A new endeavor to reach the next level
published: true
description: What I'm up to at the end of this second quarter of the year.
tags: entrepreneurship
canonical_url: https://webdva.github.io/a-new-endeavor-to-reach-the-next-level/
---

I find myself on a new endeavor, as the previous one was simply [the wrong thing to do](https://webdva.github.io/entrepreneurs-effectuation/), while on my quest to mend the world.

On the road to success I will have no friend as my duty requires me to banish such things from my life. A duty that is mine alone and no one else's for my ambitions are mine alone and no one else's. In this endeavor, there is only me and these mathematical objects of my study, abstract insentient beings who command the world I seek to conquer.

This endeavor, where *now* the answers I now seek can be found in books, calls for me to find ideas not from the world that my physical form is well acquainted with, the reality that you love so very much and have created a comfortable abode in, but instead, yet another new world whose truths enjoy great sovereignty over our realities. A world whose lands have only been scarcely mapped by the few men and women who dared to survey it.

It is the world of the advanced sciences' insentient lawgivers and commanders who determine what is exactly what along with the why and the how.

A world of great power that even *you* have a natural instinct toward. Its allure can easily tempt you toward its empty embrace and it ultimately does seduce you, should you decide to answer its beckoning, leaving you at its freezing cold mercy.

A world that requires the same essential courage that our predecessors had. Their same essential strength.

A world that I must venture in so that I may extract its utility for my benefit: the success of the Prosperity program before this year ends. A success and goal that is simple: to achieve a nondominated socioeconomic status, a local optimum of prosperity, as having a dominated socioeconomic status is simply unfavorable.

While learning advanced sciences and mathematics for practical applications, you do not really directly compete with other participants, especially as few dare to venture into this world. You instead only compete with yourself, your past self, for the sake of your future self and at the expense--the suffering--of your present self.

These are simply the requirements for the success of this endeavor.
Bridge ssh.exe to Pageant
Tags: ssh, putty, powershell, vscode
Published: 2019-06-22 22:41:52

I do a lot of PHP and was a really early adopter of remote debugging (XDebug) however last few years my work setup just didn't let me do this. Then I wanted to trey Visual Studio Code Remote Development that seem to be just the right thing I was looking for, however there was big red stop light right at the start:
```Note: PuTTY is not supported on Windows since the ssh command must be in the path.```

This just cant be! I know too much of the SSH protocol to let this stop me.

The end result of an all-nighter was this script that allowed me to use my existing ssh keys stored in Pageant and try out VS Code Remote...

https://github.com/zobo/weasel-pagent-win32
Getting a new laptop
Tags: devlog, gdevelop, gamedev, webdev
Published: 2019-06-23 07:19:09

---
title: Getting a new laptop
published: true
tags: devlog, gdevelop, gamedev, webdev 
canonical_url: https://triptych.writeas.com/getting-a-new-laptop?pk_campaign=rss-feed
---

Today I got a new laptop. It's small, but fast, and I can do so much more with this one. It's an HP Pavilion x360 with a tablet mode. It's small, but it's perfect for my uses. Look for more code. More blog posts. More gamedev. More everything. Woot!
Do you want a code review? I want to help!
Tags: discuss, help, codereview, beginners
Published: 2019-06-22 22:02:46

Hey guys! I am 100% stealing this idea from @brob, who is doing a very similar thing with design reviews. I submitted my personal blog for a design review from him and I think that video is coming out soon!

{% link https://dev.to/brob/do-you-want-a-design-critique-i-want-to-help-4cm3 %}

I really like reading code and seeing how different people solve problems differently! And I would love to take a look at some code and projects from the community and break them down and offer my insights.

If you give me a project to look at, I'll make you one of these code review video and post it here on dev.to and on my blog! I'll share any insights I have and always be constructive in my criticisms! I promise I won't bite!

## Interested?
Reach out to me! Shoot me an email or if you are reading this on dev.to, drop me a note in the comments!

Let me know if there are any specific parts of the code or functionality that you would like me to focus on!

## My Coding Language Breakdown
I write Ruby and Rails full time right now and that is what I am probably best at code reviewing. I also would feel really comfortable doing Ruby and/or Rails code review.

I would also feel comfortable looking at HTML/CSS + JS Sprinkles for code review. I also have some experience with both the Rails Asset Pipeline, as well as Webpack and Webpacker (the Rails integration).

 I haven't done a ton of either Node or frame worked frontend JS, though I have done a bit of React (via Gatsby) for my personal blog. I'm ok with doing JS review, just know I definitely have lots more JS to learn myself and I probably won't be familiar with your framework. I do have some experience with Typescript, so that would be cool too.

Rust is a language I am very much still learning! I have created a few small things in it, but nothing of any size. It might be fun to try looking at a Rust project, but I wouldn't expect to be able to teach many Rust tricks or anything.

Other languages I've coded in before but not in many years include Python and Java. Ask for review at your own risk 😆

## Example

I decided the best way to give you guys some idea of what I was talking about was to have an example ready to go! And here it is!

This is me reviewing one of my own project `Sleet`. I'll let video me explain the project, but this is one that I hadn't worked on super recently and I thought I didn't remember it's code well enough to be able to review it well.

So here is the first of hopefully a series of code review videos! 

{% link https://dev.to/coreyja/code-review-0-sleet-4l3n %}

Thanks guys, and definitely let me know in the comments what you think!