teleren/devto huggingface dataset:
Simple Layout Challenge #2
Tags: challenge, html, css, beginners
Published: 2020-07-29 04:46:06

## About

From time to time I practice HTML & CSS layout and would like to invite you to join me 👋 I take a small UI element and just implement it 🙂 And you can share your solution with me and I'll conduct a small code review 

## Task

![Animated result](https://dev-to-uploads.s3.amazonaws.com/i/32430leg3in1ie4iuhdv.gif)

___

![Expected Result](https://dev-to-uploads.s3.amazonaws.com/i/t472pskdrllcr042ibcv.jpg)

___

Implement such a modal window. As a library, you can use [my solution](https://github.com/Alexandrshy/keukenhof), or any other library, or implement everything in pure HTML & CSS, the choice is yours

Share your results in the comments, I'll also attach my solution 👾
Making Lambda@Edge and executing `cdk deploy` occurred a 400 Error with "The function cannot have environment variables"
Tags: aws, cdk, typescript
Published: 2020-07-29 04:34:39

---
title: Making Lambda@Edge and executing `cdk deploy` occurred a 400 Error with "The function cannot have environment variables"
published: true
description: How to solves cdk deploy error when you deploy lambda@edge and got 400 error.
tags: AWS,cdk,typescript
//cover_image: https://direct_url_to_image.jpg
---

# Environment

- aws-cdk v1.53.0 or above
- aws-lambda-nodejs

# My code

I want to deploy lambda@edge source code by `aws-cdk`.

```
    new NodejsFunction(this, 'some-awesome-function', {
      role: new Role(this, 'AllowLambdaServiceToAssumeRole', {
        assumedBy: new CompositePrincipal(
          new ServicePrincipal('lambda.amazonaws.com'),
          new ServicePrincipal('edgelambda.amazonaws.com')
        ),
      }),
    })
```

# My command

```
cdk deploy
```

# Error Message

```
CREATE_FAILED        | AWS::CloudFront::Distribution | XXXX/CFDistribution (XXXXCFDistributionXXXX) The function cannot have environment variables. Function: arn:aws:lambda:us-east-1:XXXX:function:CdkStack-XXXXD6AD4BEB-1XXXXXXMFY8E:1 (Service: AmazonCloudFront; Status Code: 400; Error Code: InvalidLambdaFunctionAssociation;
```

# Solution

set `awsSdkConnectionReuse` to `false` in your props.

```
    new NodejsFunction(this, 'some-awesome-function', {
      role: new Role(this, 'AllowLambdaServiceToAssumeRole', {
        assumedBy: new CompositePrincipal(
          new ServicePrincipal('lambda.amazonaws.com'),
          new ServicePrincipal('edgelambda.amazonaws.com')
        ),
      }),
      awsSdkConnectionReuse: false,
    })
```

# Reason

At July 2020, Lambda@Edge doesn't support Environment Values.

But aws-cdk v1.53.0 update contains default `true` of `AWS_NODEJS_CONNECTION_REUSE_ENABLED`.

https://github.com/aws/aws-cdk/commit/44c040072362456ebdd15799076a67bbb74e6668

```
      // Enable connection reuse for aws-sdk
      if (props.awsSdkConnectionReuse ?? true) {
        this.addEnvironment('AWS_NODEJS_CONNECTION_REUSE_ENABLED', '1');
      }
```

So you must set `false` the prop.
When to choose purely functional programming?
Tags: javascript, discuss, computerscience, functional
Published: 2020-07-29 04:30:10

Especially for non-optimized programming languages, like JavaScript or Python. (Especially for the tail-call optimization part.)

What about the cost of creating a new Object? This is especially important for larger datasets, where performance matters. (Now, I am also thinking about [Array generation performance](https://jsperf.com/javascript-range-tests))

```js
Array.from({ length: 10e6 }).reduce((prev, c) => ...)
```

When the map / recursion isn't that big; maybe concepts from FP makes it easier to debug, but come with costs?

About the pure part, I realized that we are talking [purely functional programming](https://en.wikipedia.org/wiki/Functional_programming), not really that functional or [procedural](https://en.wikipedia.org/wiki/Procedural_programming).
Github Secret : Creating A GitHub Profile
Published: 2020-07-29 04:29:12

## Creating A GitHub Profile

Github says

AnkitDroidGit/AnkitDroidGit is now a special repository: its README.md will appear on your profile!

GitHub recently released a feature that allows users to create a profile README to display prominently on their GitHub profile.
This write-up explains how to access this new feature and create your own special repository.

## Let’s Start !!

The profile README is created by creating a new repository with the same name as your username.
Let's understand with my example:
My GitHub username is AnkitDroidGit so I created a new repository with the name AnkitDroidGit.
Note: new repository name must match (including letter case) your GitHub username.

### Let's follow the steps
1. Create a new repository with the same name (including casing) as your GitHub username: https://github.com/new
1. Let it be public.
1. Initialize this repository with a README.
1. Modify README.md file inside the repo with your content (text, GIFs, images, emojis, etc.)
1. Commit your README!
1. Push changes to GitHub (if you made changes locally).

![](https://miro.medium.com/max/1400/1*iBP_8ZiavCJ5yz7rmaUPPg.png)

And finally, you will get a profile read me like mine.

![](https://miro.medium.com/max/2000/1*sTgb-hXxszN0U5zssdFRrQ.png)

This article was originally posted on [Medium](https://medium.com/@ankitdeveloper/creating-a-github-profile-bf9cfd885b89)

Also, to be notified about my new articles and stories, follow me on Medium, Github. You can find me on LinkedIn as well. Cheers!
How to inspect unique globals
Tags: webdev, javascript, codenewbie, abtesting
Published: 2020-07-29 04:09:16

As a 3rd party developer, I often need to leverage existing site functionality without access to our client's source code. It's usually the case that we need to figure out which code is publicly accessible to reuse or extend in our A/B testing platform or tag manager.

Here's a handy function I created to inspect what unique properties are available on the window. The approach is to create a new iframe (with <code>about:blank</code> as the src) and use its <code>contentWindow</code> object as the blank canvas to compare against the parent window object to determine what properties were added to the global scope.

```js
/**
 * Logs an object w/ all the unique global variables on a page 
 * 
 * @return {undefined}
 */
(function inspectUniqueGlobals() {

  // Create object that will contain unique global variables
  const uniqueProperties = {};

  // Use an iframe to compare variables
  const iframe = document.createElement('iframe');

  // Attach blank source iframe to DOM
  iframe.src = 'about:blank';

  // On iframe load, process global properties
  iframe.onload = function() {
    
    // Get list of standard global objects from the iframe
    const defaultGlobals = Object.keys(iframe.contentWindow);
    
    // Loop through every window-level variable
    for (let item in window) {
      const prop = window[item];
      
      /* If the property is not found in the iframe's globals,
         then add it to the uniqueProperties object */
      if (defaultGlobals.indexOf(item) === -1 &&
          window.hasOwnProperty(item)) {
            uniqueProperties[item] = prop;
      }
    }
   
    // Inspect unique window properties
    console.log(uniqueProperties);
  };
      
  // Add to document
  document.body.appendChild(iframe);
})();
```

We can test this out right on this page on dev.to if we enter this code in the console:
<img src="https://res.cloudinary.com/dzynqn10l/image/upload/v1600924034/JS%20Bits/Screen_Shot_2020-07-28_at_10.52.36_PM_bzbvhl.png"> 

All of these properties are unique to the dev.to blog post page. Depending on what we're trying to achieve, we may get lucky and find a function that's already built and does exactly what we're looking for. As an example, on this page there's a global <code>toggleMenu</code> function.

If we run it, we'll see that the user menu opens up:
```js
window.toggleMenu();
```
<img src="https://res.cloudinary.com/dzynqn10l/image/upload/v1600924034/JS%20Bits/Screen_Shot_2020-07-28_at_10.55.59_PM_fxvgfr.png">

You can learn a lot about a site with what their developers have set to the global scope. Sometimes you'll see some not-so-great things like potential vulnerabilities or even promo codes that were probably not meant to have been discovered by the average visitor. 🙊

Whatever your use case, I hope you found this handy and insightful :)

----------
Check out more #JSBits at my blog, [jsbits-yo.com](http://jsbits-yo.com/). Or follow me on [Twitter](https://twitter.com/JS_Bits_Bill)!
lateinit vs nullable type | KnowYourKotlin
Tags: android, kotlin, java
Published: 2020-07-29 03:51:08

Hi #androidDevs, This is Androidbites where I try to break down a small concept into an understandable code snippet and share my learning experience with it.

Today's topic is related to handling nullability using lateinit modifier, I absolutely agree `null` is the Billion dollar problem in a programming language, and for you, as a developer, it's your responsibility that your app doesn't fall in as a victim of it and not crash your app due to that, In kotlin there are many languages functionalists build in that enable you to aware of null happening code and ask you to cater them properly.

Lateinit is one of those tools, the solution of a problem is not to create that problem right? Similarly instead of having a nullable type just replace it with non-null type? right 🧐? an obvious solution, 

let's dig deeper with the snippet below, 👁 on the code 💻.

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

if you like to know more on the same topic read the complete article on

## 👉 [AndroidBites|lateinit-vs-null](https://chetangupta.net/lateinit-vs-null)

Hope to see you on the other side...

Until next time. Happy Hacking! 👩‍💻

Stalk Me 👀 :
[LinkedIn](https://bit.ly/ch8n-linkdIn) | [Medium](https://bit.ly/ch8n-medium-blog) | [Twitter](https://bit.ly/ch8n-twitter) | [StackOverflow](https://bit.ly/ch8n-stackOflow) | [CodeWars](https://bit.ly/ch8n-codewar) |[WorkX](https://bit.ly/ch8n-home) |[Github](https://bit.ly/ch8n-git) |[Instagram](https://bit.ly/ch8n-insta) |[Youtube](https://bit.ly/ch8n-youtube)
Form Generator... 🏎
Tags: react, webdev, developer, html
Published: 2020-07-29 03:47:34

Hey, Everyone. It's been a very very very long time since I've written an article and I'm pretty sure this is not an article 😁. 

But still, I just wanted to share something that I've created and need to see if it could help anyone.

Yup, as the title says it's nothing but a form generator based on JSON. And it's hosted as a web app. It supports validation and does let me know if there's anything else you want me to add.

https://stackblitz.com/edit/react-form-json?file=index.js

Share your thoughts below... 😁
Observability in serverless applications
Tags: mscreate, frontend, serverless, events
Published: 2020-07-29 03:25:10

--- 
title:  Observability in serverless applications
published: true 
description: Observability in serverless applications
tags: mscreate, frontend, serverless, events
cover_image: https://dev-to-uploads.s3.amazonaws.com/i/dhnt2i6hs8qp6pfh4kyp.png

--- 
<hr /> 
---
> Want to do more with static web apps?

> _Join us at [CREATE:Frontend](https://aka.ms/createfrontend) on Jul 29 (8:30am PDT / 11:30am EDT) for a 4-hr free virtual event with 8 talks and a [90-minute hands-on workshop](https://dev.to/azure/free-workshop-on-azure-static-web-apps-1341) to jumpstart your static web apps journey_

> Bookmark [our anchor post](https://dev.to/azure/let-s-talk-about-everything-frontend-2o9e) and do check back for updates

---

## Observability in serverless applications
Observability in the serverless realm can sometimes be very frustrating, but yet performance monitoring is crucial when running serverless applications. To make sure that your applications are running correctly, full observability is needed so that troubleshooting can be done efficiently when needed. 

With that said, what does observability really mean? Should organizations manage observability themselves or would they be better off using a managed solution for observability? What are the best practices and how do you best troubleshoot? 


## Meet Our Speakers 

I'm inviting our speaker [@Simona_Cotin](https://twitter.com/simona_cotin?s=20) from MSCreate:Frontend to have conversations with you here on Dev.to on what observability in serverless applications mean and the best practices. 

We want to hear from you how YOU are doing it, and exchange insights with you on what considerations are needed to obtain full observability in your serverless applications. 

{% user simona_cotin %}

--- 

## MSCreate: Frontend

If you want to learn more about the _MSCreate:Frontend_ event then check out this post with links to all the talks and speakers. And bookmark it to be notified of links to recordings and resources after the end!

{% link https://dev.to/azure/let-s-talk-about-everything-frontend-2o9e %}

Want to learn more about Azure Static Web Apps?
 - [Check out the docs](https://aka.ms/swadocs)
 - [Try out a learning path](https://aka.ms/swalearn)
 - [Watch talks on Channel 9](https://aka.ms/mscreate-ch9)
The art of lazy painting
Tags: visualnovel, datingsim, indiedev, solodeveloper
Published: 2020-07-29 03:22:05

Still remember back in the day when a piece of wacom display tablet priced like a diamond? Well, I do, like it was yesterday.

When all my friends were busy learning 3D (this was late 90s by the way) I said to myself "I will never, ever ever, use 3D as long as I'm breathing!" while hugging, smooching with my precious display tablet. I swallowed my own spits by saying that as 3D has been part of my day to day kinda "thing". Still, the tiny voice inside my head despise thinks that 3D is a complete "CHEAT".

All those hard works, studying about shadows, lights, perspectives, colors and whatnot, seems wasted. At least that's what I thought. As a graphic designer, whether I like it or not, I had to learn the witchcraft anyway, and that's how 3D has been part of my day to day life. What can I say, shit happens.

What used to be minutes defining how the shadows/lights work in certain condition or how it impacts certain colors, suddenly become a second "BUT" that's not completely acceptable without further tweaking especially when you are naturally born 2D believer. Painting over 3D is not new, as a matter of fact it's been around since home computers were able to render a still image even though it took days/weeks for complex scenes back then (trust me, I've been there, this is one of the reason why I hate 3D).

As a solo indie developer, paint-over technique would not be categorized as an easy task. One, you must make your own 3D models, dealing with all the bits and bops so it would get the result you want. Two, you must paint-over (obviously!duh!) and get the final render you're looking for. Three, THE CODE ffs!...
Then one would say "why don't you put more efforts on the 3D then forget about the paint-over thingy?", and I was like "Bruh! Are you serious". Seriously, I got asked so many times regarding that and the answer is as stated above.

Then some smartasses would come to my face and say "make a team, find people, let them help" and I was like, " #ThrowMyPhoneOutDaWindow #KickMyDogInTheNuts #SlapMyFatNeighbor #SayMyPrayerToHitler

Aight, that's all

~Cheers
Matt's Tidbits #75 - Moving tidbits!
Tags: mattstidbits, tidbittuesday, verizon
Published: 2020-07-29 03:19:37

[Last time, I wrote about how to resolve a Kotlin <-> Java interop issue.](https://medium.com/@matthew.b.groves/matts-tidbits-74-resolving-an-interesting-kotlin-java-interop-issue-64eec8d2e866) This week, I have some moving tidbits!

For the first time since Matt's Tidbits began, I missed a post (or 3). I've been moving to a new apartment this month, which has been a huge time commitment - but, I do have some interesting tidbits to share from the experience.

1. When moving to a not-ground-floor apartment, be prepared for the possibility that your box spring may not fit up the stairwell. You can spend some extra money and purchase a "split box spring", or, you can modify your existing one!  Here's the guide we used to pull this off: https://www.thisoldhouse.com/bedrooms/21017097/how-to-move-a-box-spring-up-a-narrow-staircase

2. Verizon, like many companies, has an automated phone system. As you are probably aware, they offer both cellular service (Verizon Wireless), and also home connectivity (Verizon Fios). When you call, their system tries to intelligently only give you menu options that are relevant to your area. The problem is, they do this in a really bad way - they look at the area code of the phone number you're dialing from, and make a determination about what options to give you from that information. In my case (like many people), I kept my mobile phone number from where I grew up (Oregon), but I now live in Boston, MA. This is especially problematic because Verizon does not offer Fios services in Oregon - so any attempts to call Verizon Fios' customer service number automatically route you to Verizon Wireless instead. It took me multiple attempts to figure out what was happening, but one especially helpful customer service representative deduced that this could be happening due to my phone number being from a different area than the one I was living in. I believe their analysis is correct, but I'm rather perplexed by how Verizon missed this. To date, the only known workarounds are to use the online chat feature, or have a Verizon Wireless customer service representative transfer you to the appointment scheduling phone system for Fios. Hopefully this is something Verizon will fix in the future - it's a pretty big hassle for a potentially large segment of their customers.

I hope you learned something interesting, and next week I'll be back with more Android-related tidbits!

*This tidbit was discovered on July 13, 2020.*
Angular 9 Material Selection List Example
Published: 2020-07-29 09:57:10

---
title: Angular 9 Material Selection List Example
published: true
date: 2020-07-29 03:17:09 UTC
tags: 
canonical_url: https://www.itsolutionstuff.com/post/angular-material-selection-list-example-angular-9-mat-selection-listexample.html
---

Here i will show you angular material selection list example you can understand a concept of angular material matselectionlist example its simple example of angular material list example you can see matselectionlist angular materialAngular Material List component will provide a wraps and
YouTube Video | CSS Grid Course for Beginners - 2
Tags: css, html, youtube, webdev
Published: 2020-07-29 03:15:33

In this series we will learn CSS Grid . With the creation of CSS Grid, we can create a modern day website with ease and ditching CSS frameworks like bootstrap.

This is the second part of the series.

{% youtube 6mqcx5ENMWY %}

Please do like it and [Subscribe](https://www.youtube.com/channel/UCRf7mazcufqZxd2pR3oQJuQ?sub_confirmation=1) to my channel for more videos.
Do You Have Your Own Website/Portfolio?
Tags: discuss, webdev, design, website
Published: 2020-07-29 02:54:29

How many of you have your own website? Did you create it in one go? Launch it and then build it over time?

I haven't created mine yet, hoping to be inspired. Would love to hear about how you decided to design it the way you did. 

If you have your own website, please share it below!
Day 58 : #100DaysofCode - Beginning to Learn Python
Published: 2020-07-29 02:45:58

Today I watched one hour of the 4 hour Learn Python Course for Beginners [Tutorial].

{% youtube rfscVS0vtbw %}

Just like everyone says coding is simple if you know the fundamentals. I remember looking at python in the past and being overwhelmed. As I went through the course today I was amazed at how easy it was to learn. The syntax may be different but it is all the same. A list in python is the same as an array in Ruby. Naming a variable in python is the same as Ruby and many other similarities.  I feel more confident that I will be able to pickup languages faster as I learn more of the fundamentals of both Ruby and Python. 

I am looking forward to watching more tutorials and learning Python. Feel free to checkout the beginning of my beautiful python adventure on the Github link below.

{% github SincerelyBrittany/pypractice no-readme %}

Thanks for reading!

Sincerely, 
Brittany

{% soundcloud https://soundcloud.com/imjeronelle/rock-with-you-ft-terayle %}
Chile, Mole & Tech, te patrocina... 
Published: 2020-07-29 02:16:23

# Dinamicas para patrocinar Meetups o pláticas de YouTube

## Objetivo

Con el objetivo de incrementar la cantidad de listeners de @chilemoleytech, y con el catálogo de stickers que hemos ido creando, se nos ocurre regalarlos en algunas de las transmisiones de YouTube o en Meetups que se organizan... 

Solo nos deben de contactar por Twitter a @marianorenteria o @omercadocoss para que armemos un tuit y validemos disponibilidad de los stickers. 

El tuit que se deberá hacer RT, mencionará al evento, o a los participantes del mismo, incluso podemos hacer un hilo, para incentivar la conversación. 

PD: En el futuro, los que participan, nos pueden enviar sus stickers, asi mandamos con los nuestros en el mismo sobre.

## Que hacemos? 

Se enviarán sobres con 4 stickers a los primeros 50 usuarios que hagan RT.

Ejemplos

{% twitter 1289372199300640768 %} 

{% twitter 1291841049476947972 %}

### Nota
Deben de cumplir con estas pequeñas condiciones, porque sino no podrémos ponernos en contacto con ellos:

1- Hacer público su RT.
2- Seguir a @chilemoleytech, para poderles enviar DM con las instrucciones para dejar sus direcciones
Laravel GraphQL demo app
Tags: php, graphql, vue, tailwindcss
Published: 2020-07-29 02:12:59

In the last few months i've been working on a series of videos (18 in total) where I talked about how to create a GraphQL server with Laravel and then I added a Vue JS frontend, the videos are in Spanish and they were part of a small series of screencast I was doing at the time due to the Covid lockdown.

I've decided to finish the demo app and put it online for anyone who wants to see a way of doing this kind of work and maybe it can also be education material some who ever wants to start writing GraphQL APIs with Laravel. 

I hope this is useful for some people!

The code is in Github! 

{% github joselfonseca/contable %}

Happy Coding!