teleren/devto huggingface dataset:
Web layout with Bootstrap 4 - Part 1
Tags: webdev, css, html
Published: 2020-11-17 14:47:54

I've been using bootstrap with all my web project and with bootstrap 4 and Flexboxes I had to re-learn the framework again so I took a refresher course and this what I learned. 

Flex containers - These are the main containers that are defined as the main container for all the elements. 
```
<div class="d-flex">
  <!--content-->
</div>
```
Row vs column containers - There are two types of containers flex-row which aligns your content horizontally and flex-column for aligning your content vertically
```
<div class="flex-row">
   <!--align content horizontally-->
</div>

<div class="flex--column">
   <!--align content vertically-->
</div>
```
Container direction - To reverse content from left-to-right.
```
<div class="flex-row-reverse">
  <!--reverse content from left to right-->
</div>
```

Bootstrap sizes - Then you have bootstrap sizes with start from 0, 25, 50 , and 100. keep in mind is you can't just enter in any number by default. You can enter in 25, 0, 50, 75, or 100. If I wanted to create my own custom class,

```
<div class="d-flex">
		<div class="w-25">
			<img src="images/shutterstock_422560537.jpg" class="img-fluid">
		</div>
		<div class="w-75">
			<h4>Title Section</h4>
			<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque nisl eros, 
				</p>
			<a href="#" class="btn btn-button">Learn more</a>
		</div>
	</div>
```
Thank you for reading . :)
AWS AppSync Direct Lambda vs DynamoDB Resolver
Tags: aws, appsync, graphql, lambda
Published: 2020-11-17 14:45:07

I've been experimenting with AWS AppSync and I'm intrigued by the idea of ditching VTL entirely in favour of Direct Lambda Resolvers. Ignoring the monetary cost aspect which Lambda adds, my biggest question was the performance impact this might have. So, I ended up doing some basic real world tests.

## Setup

A direct lambda resolver for the field `Query.getNote` and a VTL DynamoDB resolver for `Query.ddbGetNote`. Both versions are performing a `GetItem` operation on the same DynamoDB table.

## 1st Attempt 

The first try with a Lambda function mostly in AWS CDK default configuration (i.e. 128 MB Ram) was quite disappointing.

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

The (warm) Lambda resolver took ~ 200 ms compared to 14 ms of the VTL DynamoDB call. Interestingly enough, most time consuming in the Lambda function appears to be the DynamoDB call. This seems odd.

## Back to the drawing board?

A bit of research suggested, that this is an issue for underpowered Lambda functions. I've found this [slide deck](https://pages.awscloud.com/rs/112-TZM-766/images/2020_0316-SRV_Slide-Deck.pdf) with a nice chart for balancing performance / costs for DynamoDB calls in Lambda functions.

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

The sweet spot seems to be around 512 MB memory for a Lambda function.

## 2nd Attempt

I changed the Lambda function to 512 MB and left everything else as it was. And surprise, surprise - This looks way better now. 

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

Now the (warm) Lambda resolver takes ~ 30 ms compared to still 14 ms of the VTL DynamoDB call. 

## Conclusion 

Skipping VTL in favour of direct Lambda resolvers seems to be reasonable for the gained flexibility, even though there are a few drawbacks. There's a bit of an overhead to call the Lambda function, which gets drastically worse on cold starts (+ ~ 600 ms). 

In terms of costs, 1 million invocations at 100 ms with 512 MB would clock in at roughly 1 USD. That's on top of the 4 USD per million operations in AppSync. All in all, not exactly cheap in scale but nothing I'd be concerned about for now. That's something to optimize when costs would become an issue.

I'll continue to explore Direct Lambda Resolvers for all cases and report how it goes :)
What's the order of execution?
Tags: javascript, webdev, codenewbie, beginners
Published: 2020-11-17 14:44:29

```js
console.log('1');
setTimeout(() =>console.log('2'), 0);
Promise.resolve().then(() => console.log('3'));
console.log('4');
```

---

**Thanks for reading 💙**  
Follow **@codedrops.tech** for daily posts.  
[Instagram](https://www.instagram.com/codedrops.tech/) ● [Twitter](https://twitter.com/codedrops_tech) ● [Facebook](https://www.facebook.com/codedrops.tech/)

Micro-Learning ● Web Development ● Javascript ● MERN stack ● Javascript  
**[codedrops.tech](https://www.codedrops.tech/)**
🛡 Digital Agility: The Auth0 Point of View
Tags: iam, identity, security
Published: 2020-11-17 14:35:54

🧩 Apps are becoming componentized and API-based to facilitate reuse and agility; Identity management cloud services will help.
[Read more...](https://auth0.com/blog/digital-agility-the-auth0-point-of-view/?utm_source=content_synd&utm_medium=sc&utm_campaign=agility)
Toggle at top of the page, to expand/collapse all headers -elegant solution?
Tags: html, css, javascript, node
Published: 2020-11-17 14:29:09

Hi folks, 

I'm about to implement something **a bit** like the **expand-all** | **collapse-all** on this page (hopefully less tacky!): 

http://www.dynamicdrive.com/dynamicindex17/ddaccordion_suppliment.htm

BUT, I'm still very green, so I was hoping some folks here can lend a fair bit of their experience & time?

Screenshot of the project as implemented thus far is attached...
![Alt Text](https://dev-to-uploads.s3.amazonaws.com/i/ple7mg97h5wg04s6gyfo.jpg)

I also have a copy of the main relevant files I'm working on, but it's all a bit private. So I hope you don't mind, but to those happy to help, I can share them via a pwd-protected OneDrive link?

That screenshot doesn't show it yet, but I have already done a fair bit of the CSS side of things (using ARIA).

To further flesh out what I'm thinking, I also have a bunch of pseudo-code:

>Each of the collapsible tables should have a class, I’d need to;
>
>1 - Create a button in dashboard.ejs that calls a function. This function should:
>2 - Use a global Boolean declared at the start of Dashboard.js to indicate if the tabs should >be open or closed
>3- Get an array of all of the elements with the above class
>4 - For each element, check if it is currently open or closed, and simulate a click on the >element if I need to change it to match the Boolean
>5 - Change the appearance of the button to indicate what clicking on it should do
>(so, if clicking on it would expand everything, something like “EXPAND”, or “COLLAPSE” for >the opposite)

>Some further pseudo-code…
>
>1- Button/s for Expand/Collapse all tables
>2 - two-dimension array for storing if table is open or closed (e.g [table-name, >true/false]).
>3 - Update array if individual table is opened or closed
>4 - Refresh table array on location refresh

Does this sound about right, missing steps or sub-steps? And what 'actual' code [CSS/HTML/js] must I use to implement it?
What is the Google Summer of Code (GSoC)?
Tags: gsoc, programming, opensource, google
Published: 2020-11-17 14:12:41

Hello,


To Understand GSoC, we must first understand about Open Source and Open Source Organizations. In layman’s term, open-source software is developed by people around the world for people around the world, which means any person around the globe can contribute to the open-source software and anyone can use it for free of cost and the open-source organizations of that particular software manages it.


Now as we know how tremendous open sources are, Coming to GSoC, it is a program organized by the tech giant Google every year to promote and develop Open source to the students across the globe. Google selects insightful open source organizations around the world and resourceful students for the particular organization. Every organization has a particular number of projects in which students get to develop and contribute to it with the help of their respective mentors allocated to that project, students and mentors get together for around 2–3 months and complete developing their particular project. Students will not only be benefited from the immense amount of knowledge and community bonding; they will also be receiving a handsome amount of stipend depending upon their region.


Coming to the application, every organization has its own set of rules for applying which students should get to know by the means of community bonding, in general, for the year 2021, the application process for the students begins from March 29th till April 13th. Students need to prepare a detailed proposal including the details of the project, timeline, schedule, test cases (if any), qualifications of the students, etc. All the applications should be submitted to the official website of the Google Summer of Code (GSoC) in the specified timeline, all the applications are subjected to the approval of GSoC and the organization teams.


For more details, Please Visit https://summerofcode.withgoogle.com/


Thanks and Regards,

Rishi R
The latest condition for video monetization
Tags: monetization, video, youtube, bloggers
Published: 2020-11-17 14:10:43

Here is the article that can be helpful (https://vlogbox.com/youtube-monetization-101-from-scratch-to-rich-through-6-steps/).

In today’s digital era, bloggers’ content is an important part of the whole TV and video sphere. Surely, a blogger is a modern job, which should be paid. The common way is to start YouTube paid program. To become a newcomer to the monetization program you must follow the list of the specified criteria. 
You need to reside in the country or region where the monetization program operates.
Your channel ought to have more than 4000 hours of viewing time in the last 12 months. That is why even newcomers must have enough amount of qualitative content. Bloggers can use not only YouTube monetization programs, for example, starting cooperation with Vlogbox program, they can also gain profit from CTV and OTT viewers.
You must have more than 1000 subscribers. Your channel must be connected to your AdSense account.

Hope the information was useful. Feel free to ask any questions.
Increasing disk space on AWS EC2 Volume
Published: 2020-11-17 13:29:45

Usually when you increase disk space using AWS dashboard you're not going to see that new space on `df -h`. So you need to ask to machine extend your current disk to a new free space. Here's how to do it:

https://docs.aws.amazon.com/AWSEC2/latest/UserGuide/recognize-expanded-volume-linux.html

After that command lines I did restart EC2 and then I was able to see the new space at my current disk in EC2.
Looking for a team of Kotliners
Tags: kotlin, multiplatform, kotlinmultiplatfor, sideprojects
Published: 2020-11-17 13:29:35

Hi, community
I'm actively looking for people, who wanna try to build a side-project with me. If you:
* know Kotlin,
* interested in multiplatform development,
* have an experience in Android/iOS development
* have a licence for IntelliJ IDEA **Ultimate**

Please let me know below by leaving your contact info: Facebook, Telegram, email or here in local [Connect](https://dev.to/connect) (you have to send a request to me before)

Some answers to save your time:
**About me.** I'm a Kotlin/Android developer, with ~4 years of experience, 27 y.o. Located in CZ. In code, I appreciate  readability (no smelling spaghetti) and reliability (testing is in at 1st place)
**Benefits for you.** Since it's a side-project, all I can suggest you right now is an idea and an opportunity to exchange our experiences. I know it sounds poorly, but as it is.
**Goal.** The main goal I see is to get an experience of full-stack Kotlin developer. So even if we will not able to finish a project, we will still get the main part from it - an experience. In a case, if the project will "survive" and become publicly available - it will be fairly "divided" between us (it's not about to get things done by you and say bb)
Day 47 of #100DaysOfCode:Review ES6 Generators & Iterators
Tags: javascript, es6, webdev, generators
Published: 2020-11-17 13:28:48

## Introduction
Generators is a new feature from ES6 which can help us to maintain the internal state (pause and resume) 

## The Iterator Protocol
* The iterator protocol means a process for defining how an object will iterate.This is done through implementing the .next() method.

```javascript
const list = [0, 1, 2, 3, 4, 5];
const arrayIterator = list[Symbol.iterator]();

console.log(arrayIterator.next());
console.log(arrayIterator.next());
console.log(arrayIterator.next());
/*
will print:
Object {value: 0, done: false}
Object {value: 1, done: false}
Object {value: 2, done: false}
*/
```
* value: represent the next value in the sequence
* done: represent if the iterator is done ging through the sequence 

## Pausable Functions
* When a generator is invoked, it doesn't actually run any of the code inside the function. Instead, it creates and returns an iterator. 
* The function will be transformed to a pausable function if we put *asterisk* after the function keyword.
* *yield* is the keyword that causes the generator to pause
* The state machine(Generators) will transform the state: initial state -> resume -> pause (state 1) -> resume -> pause (state 2) -> resume -> .... -> end (state N)

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

## Sending data into/out of a Generator
* *yield* is used to send data outside the generator
*  *.next()* method is used to send data inside the generator

```javascript
function* gen3() {
    for (let i = 0; i< 10; i++) {
        let value = yield i
        console.log(`sending data into generator: ${value}`)
    }
}


var g = gen3()
console.log(`sending data out of generator: ${g.next().value}`)
console.log(`sending data out of generator: ${g.next(10).value}`)
console.log(`sending data out of generator: ${g.next(20).value}`)
/*
will print:
sending data out of generator: 0
sending data into generator: 10
sending data out of generator: 1
sending data into generator: 20
sending data out of generator: 2
*/
```

## Articles
There are some of my articles and released projects. Feel free to check if you like! 
* [My blog-posts for software developing](https://medium.com/a-layman)
* [Facebook page](https://www.facebook.com/imalayman)
* [My web resume](https://jenhsuan.github.io/ALayman/cover.html)
* [Twitter bot](https://twitter.com/ALayman84368087)
* [Side project - Daily Learning](https://daily-learning.herokuapp.com/)

## References
* [JavaScript ES6 Generators 生成器](https://www.fooish.com/javascript/ES6/generators.html)
* [你懂 JavaScript 嗎？#25 產生器（Generator）](https://cythilya.github.io/2018/11/01/generator/)
* [Udacity ES6 class](https://classroom.udacity.com/courses/ud356)
Swift and Firebase error. Cannot find 'firebase' in scope
Published: 2020-11-17 13:25:46

Here are some stuff you can do to solve this error message: `Cannot find 'firebase' in scope`.

Firstly, check if that solution works for you: https://github.com/firebase/firebase-ios-sdk/issues/6066#issuecomment-662580211

If not, check if you're importing the right library to work with firebase and swift. Take a look in my code and see if your is the same:

```swift

import FirebaseFirestore

...

private var db = Firestore.firestore()

```
Innovation Velocity
Tags: iot, ai, career, cybersecurity
Published: 2020-11-17 13:23:48

---
title: Innovation Velocity
published: true
description: Meaningful opportunities to innovate
tags: IoT, AI, career, cybersecurity
cover_image: https://images.unsplash.com/photo-1502904550040-7534597429ae?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=3349&q=80
---


> "A formal technology skill development strategy fuels innovation velocity—how quickly you can build new skills that translate into Wall Street metrics.” - Tony Saldanha


# Innovation Velocity Ratio
This simple measure of an organization’s innovation capacity is determined by how many employees consistently experience **meaningful opportunities to innovate** versus those who find these opportunities lacking, absent, or even threatening.

This ratio has a clear impact on an organization’s innovation capacity.

![IVR](https://www.greatplacetowork.com/images/kapost/innovation-by-all-innovation-velocity-ratio-research.jpg)

The competitive advantage today doesn’t belong to the company that’s learning the fastest; it belongs to the company that’s aligning and applying new skills in a strategic way. 

Bottom line: A skill development strategy is non-negotiable in 2020—if you want to make it out of the fourth industrial revolution alive, that is.

According to International Data Corp’s FutureScape 2019 report, two million jobs in artifical intelligence (AI), the Internet of Things, cybersecurity and blockchain will remain unfilled by 2023 due to a lack of human talent.

In a recent study by Cognizant’s Center for the Future of Work (CFoW), only 27% of business executives claim their employees have the skills to work or interact with top emerging technologies, such as AI, bigdata/analytics, IoT, mobiletechnology, openAPIs and cybersecurity.

Thanks for reading!
How I messed up as Fresher in IT
Tags: freshers, java, springboot, microservices
Published: 2020-11-17 13:21:20

---
title: How I messed up as Fresher in IT
published: true
description: Learning steps for Java ,Spring, SpringBoot and Microservices
tags: Freshers,Java,SpringBoot, Microservices
//cover_image: https://direct_url_to_image.jpg
---


https://medium.com/@atulsunder1910/how-i-messed-up-as-fresher-in-early-days-of-it-life-8374f0662149
Installing MySQL Workbench And XAMPP on Ubuntu-18.04 and higher
Published: 2020-11-17 13:20:46

What is MySQL Workbench?
![Alt Text](https://dev-to-uploads.s3.amazonaws.com/i/y9yxf77499w3h93qccjz.png)

MySQL Workbench is a cross-platform graphical user interface tool used for MySQL database management. Mainly, this tool is used by database architects, administrators, and database developers to visualize the design of the database.

MySQL Workbench enables a DBA, developer, or data architect to visually design, model, generate, and manage databases. It includes everything a data modeler needs for creating complex ER models, forward and reverse engineering, and also delivers key features for performing difficult change management and documentation tasks that normally require much time and effort.
Learn More »

you can learn more on mysql documentry
but before you try to setup mysql try and decide on version because version changes with time.



INSTALLING MYSQL WORK BEAC

Step1:

after you decision check on the link below that will help you to 
Download MySQL workbench from the below URL https://dev.mysql.com/downloads/Workbench
Select your operating system

step2:
At this level mysql has already set your environment very soon we will get start. just take the close button an lets go

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







PROCESS OF INSTALLING XAMPP

Step1:

XAMPP is a free and open-source cross-platform web server solution stack package developed by Apache Friends, consisting mainly of the Apache HTTP Server, MariaDB database, and interpreters for scripts written in the PHP and Perl programming languages. 

![Alt Text](https://dev-to-uploads.s3.amazonaws.com/i/46mgd479dfsxvqpvy5uz.jpeg)



step2:
Download. XAMPP is an easy to install Apache distribution containing MariaDB, PHP, and Perl. Just download and start the installer. It's that easy

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




step3
 install successfully then XAMPP control panel will start and open suppose it does not start just check taskbar you will see XAMPP icon .just take next then you are free to go...
![Alt Text](https://dev-to-uploads.s3.amazonaws.com/i/hn4wv89wn9xednf4de2a.png)
Technology teams are only as successful as their skills are relevant
Tags: discuss
Published: 2020-11-17 13:09:55

---
title: Technology teams are only as successful as their skills are relevant
published: true
description: 
tags: discuss
//cover_image: https://direct_url_to_image.jpg
---

“Technology teams are only as successful as their skills are relevant.”

Excerpt From: Pluralsight. “Perspectives on technology skill development”.

Thoughts anyone?
XDC Listed on Bitfinex
Tags: blockchain, xdc, xinfin
Published: 2020-11-17 13:02:20

One of the oldest exchange in crypto-space, now listing the XinFin native coin $XDC that fuels the #XinFin usecases
Remember
*Low Transaction Fees
*Faster Transaction Speed
#XinFin XDC Hybrid #Blockchain Network is the best option for the developers to deploy their #DApps.
Daily Developer Jokes - Tuesday, Nov 17, 2020
Tags: jokes, dailydeveloperjokes
Published: 2020-11-17 13:00:16

---
title: "Daily Developer Jokes - Tuesday, Nov 17, 2020"
description: "Check out today's daily developer joke! (a project by Fred Adams at xtrp.io)"
series: "Daily Developer Jokes"
cover_image: "https://private.xtrp.io/projects/DailyDeveloperJokes/thumbnail_generator/?date=Tuesday%2C%20Nov%2017%2C%202020"
published: true
tags: #jokes, #dailydeveloperjokes
---

Generated by Daily Developer Jokes, a project by [Fred Adams](https://xtrp.io/) ([@xtrp](https://dev.to/xtrp) on DEV)

___Read about Daily Developer Jokes on [this blog post](https://xtrp.io/blog/2020/01/12/daily-jokes-bot-release/), and check out the [Daily Developer Jokes Website](https://dailydeveloperjokes.github.io/).___
### Today's Joke is...
![Joke Image](https://private.xtrp.io/projects/DailyDeveloperJokes/public_image_server/images/5e1259d7cf335.png)

---
*Have a joke idea for a future post? Email ___[xtrp@xtrp.io](mailto:xtrp@xtrp.io)___ with your suggestions!*

*This joke comes from [Dad-Jokes GitHub Repo by Wes Bos](https://github.com/wesbos/dad-jokes) (thank you!), whose owner has given me permission to use this joke with credit.*

<!-- 
Joke text:
I went to a street where the houses were numbered 8k, 16k, 32k, 64k, 128k, 256k and 512k. 

It was a trip down Memory Lane.
 -->
Decoding Pipeline as Code (With Jenkins)
Tags: productdevelopment, pipelineascode, jenkins, devops
Published: 2020-11-17 12:55:35

The growing focus on decentralizing the application building process through techniques such as micro frontends and microservices has propelled the need for revamped engineering practices that can manage pipelines as code. 

Primarily because pipeline-as-code can help speed up the process of building and progressively delivering software without compromising on consistency. Read full article: https://www.cuelogic.com/blog/pipeline-as-code
🧱 Reusing code in WordPress plugins with blocks
Tags: wordpress
Published: 2020-11-17 12:45:50

This post was originally [published in my blog leoloso.com](https://leoloso.com/posts/reusing-code-in-wp-plugin-with-blocks/)

---

I've written a new article about Gutenberg (the WordPress editor), exploring:

👉 What is the most effective way to reuse code, within a (single or multi-block) WordPress plugin?

The answer is here:

[Reusing Functionality for WordPress Plugins with Blocks](https://www.designbombs.com/reusing-functionality-for-wordpress-plugins-with-blocks/)

Enjoy!
Why everyone should learn vue.
Tags: vue, javascript
Published: 2020-11-17 12:41:01

If you haven’t heard already Vue is a JavaScript front end framework. Vue is not a complete replacement for React or Angular yet, and the reason is that it does not have that many libraries.

#So what’s special in Vue?
Vue is a really easy way to do web development. The file is broken into three pieces. HTML, JavaScript and CSS. All of this stuff is handled through one file, which makes it easy to write quick websites. It is also very easy to make JavaScript and HTML interactions.