teleren/devto huggingface dataset:
A Quick JS Reduction: My possibly-too-clever way to reduce an array into one object in javascript
Tags: discuss, javascript
Published: 2020-04-20 11:48:32

---
title: A Quick JS Reduction: My possibly-too-clever way to reduce an array into one object in javascript
published: true
description: 
tags: discuss, javascript
---

Let's say you have an array of `user` objects, all with unique IDs, but you want to group them in a single object by their `id`s.

```js
// These are your only users
const users = [
  { id: 1, name: "Paul" },
  { id: 2, name: "Ringo" },
  { id: 3, name: "George" },
];
```

An easy way to do this using `Array.prototype.reduce` without creating too many intermediary objects would be:

```js
const usersGroupedById = users.reduce((res, u) => (res[u.id] = u, res), {})
```

I have a feeling every linter in the world would cry linty tears upon seeing this. But honestly, I kind of like it! 

Does this code offend you? How would you do this?

My alternatives were:

```js
/// Create objects willy-nilly because they are cheap
users.reduce((res, u) => ({ ...res, [u.id]: u }), {})

// Use Object.assign to avoid spread syntax, still create a new object for every iteration
users.reduce((res, u) => Object.assign(res, { [u.id]: u }), {})

// Arguably more readable version of the featured solution
users.reduce((res, u) => {
  res[u.id] = u;
  return res;
}, {})

```
Frontend Shorts: How to Read Content From The File Input in React
Tags: javascript, react, webdev, coding
Published: 2020-04-20 11:44:17

---
title: Frontend Shorts: How to Read Content From The File Input in React
canonical_url: https://medium.com/@ilonacodes/front-end-shorts-how-to-read-content-from-the-file-input-in-react-17f49b293909
cover_image: https://dev-to-uploads.s3.amazonaws.com/i/wgk720muh0avk2yusfn4.jpg
published: true
description: How to Read Content From The File Input in React
tags: javascript, react, webdev, coding
---

As you know, I prefer learning to code by doing things. So, today I want to share the feature I have implemented for the app is the reading of the content from the uploaded (local) `*.csv` file from the user.

**To do so without a server or any back-end — is a challenge.**

To make things work properly in React+Redux, I have created the following component:

{% gist https://gist.github.com/ilonacodes/5159f439c801004ff6505179756fac9f %}

The **FileReader** object lets web apps asynchronously read the contents of files stored in the user’s computer, using File or Blob objects to specify the file or data to read.

Then the **readAsText** method is used to read the contents of the specified **File** or **Blob**. When the read operation is complete, the state is changed to **done**; the **onloadend** is triggered, and, if **fileReader.result** is not null, the constant **content** contains the contents of the file as a text string.

Any **load** event of **fileReader** object sets the result value asynchronously, and according to the code snippet above the **fileReader.onloadend** callback can access the result of uploaded file by the user.

If you would like to know more, then read about **FileReader**, **File**, and **readAsText** at [MDN](https://developer.mozilla.org/en-US/docs/Web/API/FileReader/FileReader)

Thank you for reading!

I hope you find the post useful and will still be looking forward to new updates there.

___

_Photo by Kolar.io on Unsplash_
Why I'm going to build another js "framework"
Tags: javascript, typescript, serverless
Published: 2020-04-20 11:34:05

While developing gymconsole (a hybrid mobile app), I got frustrated pretty quickly. You have to perform the same annoying tasks over and over again. Configuring the project, creating a bloated backend just to save some user data, setting up authentication, managing state, and the most annoying part of all: CRUD.
Nearly every page in my app has underlying CRUD functionality. So you have to create a model, create the page layout, create forms, create views for detail views etc etc. I really couldn't stand it anymore. All I want is some basic views hooked up with some custom logic that result in some persisted state. That's it. And I realised that most (B2C) apps don't require more than that.
So I made it my mission to streamline that process.

I'm absolutely not into reinventing the wheel. There are a lot of tools that are exactly made for that kind of apps, but you have to manually assemble them to get a decent dev experience. But that is time consuming! I want to get shit done quickly!

That's why I'm creating a framework that makes it super easy to create mobile hybrid apps that handle data for a single user.

Entering kiss.js:

Kiss.js combines the best tools to create these kind of apps. What it will provide is the following:

-Scaffolding: Creation of views in a rails like manner
-Project structur: An easy to get started but scalable project structure.
-Datastores: Data persistence that seemlessly integrates with your local store (Backend out of the box)

I will use this series to give regular updates on the project. Expect the first working prototypes in a couple of days.

If you want to know more about kiss.jss, [follow me on twitter](https://twitter.com/rallipi). I tweet anlot about it there.
Host you static site on Github
Published: 2020-04-20 09:35:15

If you've created your site by hand like it's the 90's, then simply push your static assets to a remote branch called `gh-pages` and you're all done.
Your site is now live at 
`https://<USER_NAME>.github.io/<GITHUB_REPO_NAME>/`

If you are using any kind of boilerplate code (like create-react-app or Gatsby) you would have to generate your code as static assets. However *before* you perform the build you need to set the `homepage` property in your package.json file to point to your Github repo.
If you don't have a Github repo ready yet, don't worry because we will create one shortly.
The reason for doing this is to tell the bundler (Webpack, Parcel) to treat the `\` path as the value you provided in package.json. 


So, in your package.json:

{
..
`"homepage": "https://USER_NAME.github.io/**GITHUB_REPO_NAME**",`
..
}


Make sure to enable Github Pages in Settings ->
GitHub Pages

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


Now, create a new branch called `gh-pages`. Naming is important here, this is a Github thing. (You can [confige your static site](https://help.github.com/en/github/working-with-github-pages/configuring-a-publishing-source-for-your-github-pages-site) to point to your docs folder on the master branch)

```git checkout -b gh-pages```

Now run the build command, probably:

`npm run build`

This will create a build (or dist) folder with your compiled code.
Now, replace the root folder's content with the content inside the build directory.
Simply remove all files and folders in the root folder, including the build directory, and spill the contents of the build dir into the root. If you've done the previous operations in reverse order it means you're following me 'till here.
Remember to keep your .gitignore. README and package.json are optional

Now push your branch to Github or create a new [repository now](https://github.com/new)


Your site is now live at `https://<USER_NAME>.github.io/<GITHUB_REPO_NAME>/`
simple program
Published: 2020-04-20 11:23:21


	#include <stdlib.h>

struct buffer
{
    char *pntr;
    size_t start;
    size_t len;
    size_t size;
};

struct buffer *
allocate_buffer(size_t size)
{
    struct buffer *result;

    result = malloc(sizeof(struct buffer));
    if (result == NULL)
    {
        return NULL;
    }

    result->pntr = malloc(size);
    if (result->pntr == NULL)
    {
        free(result);
        return NULL;
    }

    result->start = 0;
    result->len = 0;
    result->size = size;

    return result;
}
	return 0;
}
BOM
Tags: javascript, beginners
Published: 2020-04-20 11:19:48

---
title: BOM
published: true
description: Browser Object Model
tags: javascript, beginners
cover_image: https://dev-to-uploads.s3.amazonaws.com/i/3qtzfik0f8u4jytrv3ee.jpg
---

The Browser Object Model:
A set of javaScript Objects that browsers provide us.
If you log the window object you will see a long list of methods that browsers provide us to use.
![Alt Text](https://dev-to-uploads.s3.amazonaws.com/i/3e6sgi7hohinju0z1gar.png)
We may use any property inside the window object in two ways:
![Alt Text](https://dev-to-uploads.s3.amazonaws.com/i/5xz4xjhfnyb5xl1rayaw.png)
Highlight Searched text on a page with just Javascript
Tags: javascript, webdev, computerscience, html
Published: 2020-04-20 10:55:36

If you have always wondered about how to highlight text in html, and thought that it would be a daunting task, surprise surprise! 🙇🏽‍♂️

#### The 'mark' tag
Recently, I came to know about the *mark* tag. If you surround any text inside of the mark tag, it will automatically get highlighted by the browser in this striking *yellow* color.
```
This word is <mark>highlighted</mark>
``` 

That makes highlighting searched text quite a simple task then.

I implemented this fiddle that takes an input text and then highlights that text from the paragraph visible in pure HTML, CSS and Javascript. 
 
Here's how:
- get the searched text.
- get the entire text.
- replace all instances of *searched_text* with *<mark>searched_text</mark>*
- set the new text as the innerHTML. 

Here's a fiddle that does the same:
{% jsfiddle https://jsfiddle.net/kkokane/3y2euvf7/39/ %}

Although it is a pretty rough implementation and a lot of work is needed to make this solution *deployment grade* (for example, clearing previous highlights), it's still good to know that something that was earlier thought to be difficult is not so.
10 Website Go-Live Checklist Items
Tags: webdev, beginners, tutorial, html
Published: 2020-04-20 10:28:36

When preparing to put a website online for the first time, it's very important to make sure you check and double-check it's been tested and ready.

I wanted to cover the <strong>10 checklist items</strong> I go through when making sure a website is ready to be put online. These include:

<ol>
<li><strong>Backup</strong> of the previous and new site is done</li>
<li>Check <strong>browser compatibility</strong>  (Chrome, Firefox, Safari, and yes IE)</li>
<li>Check <strong>responsive design</strong>  (ultra-widescreen, desktop, tablet, phone)</li>
<li><strong>Remove test content</strong> and demo pages</li>
<li><strong>Click on every link</strong> to test and ensure there are no failures</li>
<li>Add <strong>Google Analytics</strong> tracking</li>
<li>Add <strong>Google Webmasters</strong> and a sitemap</li>
<li>Add <strong>Google Recaptcha</strong> to any contact forms</li>
<li>Ensure all plugins and modules are <strong>up to date</strong></li>
<li><strong>Social Media</strong> sharing is setup (eg og-images)</li>
</ol>

{% youtube f8AWSZo_A-w%}
<strong>[10 Website Go-Live Checklist Items](https://youtu.be/f8AWSZo_A-w)</strong>

There are heaps of other little ones, but these are normally the top 10 ones that I use to check. A lot of sites I am doing are usually for SME businesses that run on WordPress, but if you have custom systems, security would be another big list item on here too!

## Follow and support me: 
Special thanks if you subscribe to my channel :)
* [🎞️ Youtube](https://www.youtube.com/channel/UCvM5YYWwfLwpcQgbRr68JLQ?sub_confirmation=1)
* [🐦 Twitter](https://twitter.com/adrian_twarog)
* [💬 Discord](https://discord.gg/nGdThpE)
* [❤ Patreon](https://www.patreon.com/adriantwarog)

## Want to see more:
I will try to post new great content every day. Here are the latest items:
* [Adobe XD to Wordpress](https://dev.to/adriantwarog/adobe-xd-to-wordpress-full-development-process-for-making-a-website-ffi)
* [Adobe XD to HTML Full Process](https://dev.to/adriantwarog/adobe-xd-to-html-full-process-ao6)
* [Full Tutorial on how to use SASS to improve your CSS](https://dev.to/adriantwarog/full-tutorial-on-how-to-use-sass-to-improve-your-css-57on)
* [Creating a Mobile Design and Developing it](https://dev.to/adriantwarog/creating-a-mobile-design-and-developing-it-5c4o)
Blog post: Release 1.19 of Date::Holidays
Tags: perl, opensource, release
Published: 2020-04-20 10:03:28

---
title: Blog post: Release 1.19 of Date::Holidays
published: true
description: Date-Holidays extended with yet an adapter
tags: perl, opensource, release
---
Today I released Date::Holidays 1.19.

The release contains a contribution from a new contributor: Denis Boyun, whom added support for [Date::Holidays::UA][date-holidays-ua], a distribution for calculating holidays in Ukraine.

I am very happy about accepting the contribution of an adapter class for Denis original work in [Date::Holidays::UA][date-holidays-ua].

More contributions are always welcome.

- [GitHub repository: Date::Holidays](https://github.com/jonasbn/perl-date-holidays)
- [MetaCPAN: Date::Holidays](https://metacpan.org/pod/Date::Holidays)

Take care and stay safe.

[date-holidays-ua]: https://metacpan.org/pod/Date::Holidays::UA
Logic-less Ruby templates with Mustache
Tags: ruby, tutorial, todayilearned, showdev
Published: 2020-04-20 09:39:10


Mustache is a logic-less template engine for Ruby that is typically used for rendering simple data structures onto templates. With Mustache, the data being rendered is separated from the templates themselves, making it easy to manage complex data sets and re-use templates.

To use Mustache in Ruby, you first need to install the **mustache** gem:

Inspired by ctemplate and et, Mustache is a framework-agnostic way to render logic-free views.

As ctemplates says, "It emphasizes separating logic from presentation: it is impossible to embed application logic in this template language."

To test it I created this snippet of code that takes a GitHub account and generates its profile in text form.

I'll use the ruby [mustache gem](https://github.com/mustache/mustache) and the [octokit gem](https://github.com/octokit/octokit.rb) to extract data from github.

Let's start by extracting the data from GitHub

``` ruby
require 'octokit'
require 'mustache'

client = Octokit::Client.new

user = client.user 'davidesantangelo'
```

Now, I simply create a normal Ruby class and define methods. Some methods reference others, some return values, some return only booleans.

``` ruby
class GitHubProfile < Mustache
  attr_reader :user

  def initialize(user)
    @user = user
  end
	
  def name
    user.name
  end

  def biography
    user.bio
  end

  def location
    user.location
  end
	
  def blog
    user.blog
  end

  def html_url
    user.html_url
  end

  def hireable
    user.hireable ? "i'm available for hiring" : "i'm not available for hiring"
  end
end
```

Now let's write the template:

```
Hi, i’m {{name}} a {{ biography }}, i living in {{location}}.

You can reach me at {{blog}} or at my github's profile {{html_url}}.

If you are from the HR team, {{hireable}}.
```

This template references our view methods. To bring it all together, here's the code to render actual HTML;

``` ruby
 GitHubProfile.new(user).render(template)
```

Which returns the following:

```
Hi, I’m Davide Santangelo a developer - dad. In love with #ruby, #rails, and #python - developer at @chorally, I living in Foggia, Italy. 

You can reach me at www.davidesantangelo.com or at my Github's profile https://github.com/davidesantangelo.

If you are from the HR team, I'm not available for hire.
```

For a language-agnostic overview of Mustache's template syntax, see the mustache(5) manpage or http://mustache.github.io/mustache.5.html.

Obviously this is a little snippet to show the potential of this very cute framework.
Go Time! x Twilio Hackathon Project Update
Tags: devjournal, twiliohackathon, codenewbie, womenintech
Published: 2020-04-20 09:36:33

_This post was originally published on April 20, 2020 on [my blog](https://alexlsalt.github.io/blog)._

Happy Monday! Had a great weekend. Almost (!) no coding, but I admit, I couldn't hold myself back from tinkering with my hackathon project. I added a few more items of functionality, including displaying and hiding certain aspects of the app based on whether or not a user was logged in.

Today, I'm going to focus on clearing up some bugs I have with logged in and logged out states. Literally, just this moment of writing gave me a burst of inspiration for fixing something, so I need to wrap this post up and get to it!

Ideally, I'd like to think up a good structure for storing users' data in a Firebase database (I also have the first initial inklings of how to do that from meditating on it this morning - so good).

In a perfect world, I'd get my Twilio stuff all set up this week (meaning, starting to add my API logic to the app). In other words, this week is for working hard to get the full MVP out the door and then next week would be QA-ing it and fixing any last minute bugs before submitting it on April 30.

Go time :)
Stay Home, Stay Safe, Code On
Tags: deepcode, staticcodeanalysis, softwaredevelopment
Published: 2020-04-20 09:32:09

We from [DeepCode](https://deepcode.ai) are committed to our developer community! As seen on [Computerworld](https://www.computerworld.com/article/3534478/tech-pitches-in-to-fight-covid-19-pandemic.html) or [Heise](https://www.heise.de/developer/meldung/Developer-Snapshots-Programmierer-News-in-ein-zwei-Saetzen-4702583.html), we keep on to provide our service free of charge plus extended it to teams larger than 30 people.

We are encouraging all developers to do the right thing and **stay home** to **stay safe**. Also, **code on** as the world needs more good software than ever. Let us lend you a hand to be productive early on by using our [Visual Studio Code](https://code.visualstudio.com/docs/editor/extension-gallery) or [Atom Package](https://atom.io/packages/deepcode). Make sure to use DeepCode so your code stays safe, too.

We are also here to help whenever you need us. Send us an email on [hello@deepcode.ai](mail:hello@deepcode.ai) or visit our [website](https://deepcode.ai) to chat, DM on [@DeepCodeAI](https://twitter.com/DeepCodeAI), [LinkedIn](https://www.linkedin.com/company/deepcodeai/) … just no office visits for now :-)
Enhance your content editor with a rich and responsive format.
Tags: biggidroid, php, codedeyo, adeleyeayodeji
Published: 2020-10-03 14:13:38

---
title: Enhance your content editor with a rich and responsive format.
published: true
date: 2020-04-20 08:54:29 UTC
tags: biggidroid,php,codedeyo,adeleyeayodeji
canonical_url: https://medium.com/@adeleyeayodeji/enhance-your-content-editor-with-rich-and-responsive-format-deaddf14f3fe
---

![](https://cdn-images-1.medium.com/max/1024/1*r8h014DO3rZSFOj-bITSOQ.png)<figcaption>smarteditor adeleyeayodeji</figcaption>

Smart Editor is a simple and easy to use Javascript execCommand() based editor with Server Side PHP Technologies.

Live Demo: [https://adeleyeayodeji.com/ajaxgallery/](https://adeleyeayodeji.com/ajaxgallery/)

This is complete solution for getting HTML input from users using a form, when you do your website contact form or any web based HTML Page.

![](https://cdn-images-1.medium.com/max/1024/1*s25Oi1pBsUrh6QKGrRML8g.png)<figcaption>smarteditor adeleyeayodeji</figcaption>

Features:

- File Uploader and Link those uploaded files as download links (PHP)

- Fond Selector, Formating Selecting, Font size selecting and Font and Background Color Selector

- Image Uploader and Insert with Actual Image Cropping for uploaded image as per selected Images Size (PHP)

- Image Height, Width and Floating

- Table Insert

- Link Insert with Target and Direct Connection to Uploaded Files to connect them as downloadable links

- Print and Full Screen

![](https://cdn-images-1.medium.com/max/1024/1*DLFlMkJXYwL7n1KenO73Ug.png)<figcaption>smarteditor adeleyeayodeji</figcaption>

Live Demo: [https://adeleyeayodeji.com/ajaxgallery/](https://adeleyeayodeji.com/ajaxgallery/)

Smart Editor script most like Gmail Email Composer and blogger composer. Using this you can easily input HTML input, WYSIWYG Editor or Code Editor and post data to your server side script. Technically this is for execCommand WYSIWYG Editor with Few Server Side technologies like image uploading.

Sourcecode: [https://adeleyeayodeji.com/ajaxgallery/](https://adeleyeayodeji.com/ajaxgallery/)

Happy Coding 😎🤩
I built a blog for the developer just starting out.
Tags: beginners, html, css, tutorial
Published: 2020-04-20 08:27:38

"That's an Egg"

What?

**["That's an Egg!"](https://thatsanegg.com)**

<hr/>

These days, web-development can be a very daunting task to learn for the developer who's just starting out. With things like JavaScript frameworks, server-side rendering, and REST/CRUD API's, it doesn't get a lot simpler either.

**However, it doesn't have to be this way!** I love writing about making your (developer) life easier. From basic HTML & CSS, to more complicated subjects regarding web-development, I write about all of them.

You might know the expression "That's a piece of cake". In Dutch, we have a saying that goes likewise. Roughly translated back to English, it says **"That's an Egg"**. With my writing, I want to make you feel confident in your ability as a developer and think; "That's an Egg!".

<hr/>

You can check it out over at **["www.thatsanegg.com"](https://thatsanegg.com)**.

If you're ready to dive straight into an article, I'd recommend these:

###[Your First CSS Animation](https://www.thatsanegg.com/blog/your-first-css-animation/)
Read all about creating beautiful and smooth web-animations using just CSS.


###[Create landing pages like Stripe does](https://www.thatsanegg.com/blog/create-landing-pages-like-stripe-does/)
Using basic CSS tricks to create beautiful websites.



###[Animating text like Sketch does using only CSS](https://www.thatsanegg.com/blog/animating-text-like-sketch-does-using-only-css/)
Using CSS to create a beautiful staggering text animation.

<hr/>
Create an on-air indicator with LIFX and Microsoft Power Automate
Published: 2020-04-20 08:09:18

Never let a good crisis go to waste.  

Let your family know when you shouldn't be disturbed by creating a DIY "on-air" indicator that's synched to your Outlook calendar. All you need is a few smart lights and Microsoft Power Automate!

[Continue reading ...](https://www.mullineaux.com.au/create-an-on-air-indicator-with-lifx-and-microsoft-power-automate/)
Serverless authentication in depth using aws-amplify and quasar framework intro
Tags: codeguru, vue, QuasarFramework, aws
Published: 2020-04-20 08:02:24

{% youtube fVT4D5REUos%}

If you like this video please consider to support us on patreon on the following link:
https://www.patreon.com/codeguru 

Hello codeguru's. This is Jagz from codeguru and I will be your instructor for the course serverless authentication in depth using aws-amplify and quasar framework 

This video is quick introduction video for our course serverless authentication in depth using aws-amplify and quasar framework. So as part of this video we will enable auth support for our application and then have a brief overview of aws cognito service which is our managed authentication provided by aws cloud 

Prerequisite videos:
Getting started with Quasar framework: 
https://www.youtube.com/watch?v=BK66mQTSl7Ulist=PLAl8os33KyOVpzfYznpguV_5euzKJ626V&index=2
 
Adding aws amplify support to Quasar framework:
https://www.youtube.com/watch?v=1F0SfYmrSbA&list=PLAl8os33KyOVpzfYznpguV_5euzKJ626V&index=4

You can now follow us on: 
Twitter     : https://twitter.com/codeguru_io 
facebook   : https://www.facebook.com/codeguru.io 
Instagram  : https://www.instagram.com/codeguru_io/ 
Reddit      : https://www.reddit.com/r/codeguru_io/ 
Discord    : https://discord.gg/U6EkPyF
Gitter       : https://gitter.im/codeguru_io/community