teleren/devto huggingface dataset:
Programming Tip #3: Functional Core, Imperative Shell for AWS Lambdas
Tags: python, programmingtips
Published: 2022-05-01 17:02:04

---
title: Programming Tip #3: Functional Core, Imperative Shell for AWS Lambdas
published: true
description: Make all code pure functions, then put all side effects and exceptions inside your handler only.
tags: python,programmingtips
cover_image: https://dev-to-uploads.s3.amazonaws.com/uploads/articles/depfrygg8sn2c4z3zhkt.png
---

Programming Tip #3: Functional Core, Imperative Shell for AWS Lambdas. Make all code pure functions, then put all side effects and exceptions inside your handler only.

![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/depfrygg8sn2c4z3zhkt.png)

Learn more:
- https://destroyallsoftware.com/screencasts/catalog/functional-core-imperative-shell
- https://returns.readthedocs.io/en/latest/pages/io.html
- http://mypy-lang.org
- https://pypi.org/project/PyMonad/
Why coaching?
Tags: career, beginners, help, motivation
Published: 2022-05-01 16:54:43

Professional coaching is useful in both good and bad experiences. It provides you with practices and methods to navigate friction and enable your upward growth. It’s time dedicated to your well-being. We all aspire for better, no matter if that’s in our career path or simply in our daily experience of work. It doesn’t have to be focused on the bad stuff. In fact, it is often just as important to receive coaching during the good times.

{% embed https://twitter.com/attainableeng/status/1520508811592667136 %}

If you've ever considered getting help with your software development experience - [Schedule time!](https://calendly.com/attainableeng)
An Old Noob #6 - Back to School
Tags: certification, aws, devops, beginners
Published: 2022-05-01 16:06:38

This will be quick, promise.

First and always, thanks for reading. Since last i posted, i've handled a few to-dos for my site - got the Cloudfront invalidation Lambda in place, which was a big one. 

&nbsp;
![Caddyshack Meme](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/ka59o7ilwq3iaob1hbi9.png)
&nbsp;

However, my focus this week has been studying for my first AWS certification, [AWS Certified Cloud Practitioner](https://aws.amazon.com/certification/certified-cloud-practitioner/).  After a bit of research, there were a few items repeatedly mentioned by various sources as key to survival on this.  The first highly recommended resource is the [Udemy full practice exam suite](https://www.udemy.com/course/aws-certified-cloud-practitioner-practice-test/). These are reputed to be some of the most difficult practice exams available and knowing the material on these should surpass the knowledge required to pass the exam.   

The second resource often resounded is [Digital Cloud's AWS CCP Practice Exam program](https://digitalcloud.training/courses/aws-ccp-practice-exams/).  These practice exams are delivered in a format similar to that used in the AWS exam, so not only tests your AWS knowledge but prepares you for the amount of questions, time allowed and the digital delivery of the exam itself.  

Fortunately when it comes to this exam, there are many guides and tools out there. Ultimately, it's figure out where my knowledge gaps are and bridge 'em.  

Simple, right?
Css Units
Tags: css, html, react, beginners
Published: 2022-05-01 15:59:53

Let's briefly learn about CSS units!

## px (absolute)

Avoid using 'px' for font-size. Use for small details, like shadow or borders.

## % (relative)

Good to use for layouts and width/height.

- size is defined as percentage of the value of the mostly parent element.

```
.example {
font-size: 20 px;
line-height: 50%; /* 10px */
}
```

## em (relative)

Can be used for font-size and margin/padding. This will adjust this properties based on that element's font size.

- changes behavior based on property
- 'em' = parent font-size
- if parent don't have a size, defaults to 16px (body)

```
.parent-div {
font-size: 10px;
}
```
```
.list-item {
font-size: 2em; /* 10px * 2 or 20px */ 
}
```
## Rem (relative)

You can also use 'rem' for font-size and margin/padding. 'rem' is easier to work with than 'em', because it's more consistent.

- Relative to hoot HTML, no matter what(default is 16px)
- You can change the root HTML size. For example, if you change it to 20px, 1 'rem' will always be 20px.

```
html {
font-size: 10px;
}
```
```
p{
font-size: 1.5rem;
}
```
Here we've set the HTML default size to 10px. So, 1.5 rem is 15px. 2rem will be 20px instead of default 32px.

## vw/vh (relative)

ww/vw are relative to the width/height of the browser window. 100vw means full width of the screen. Use vw/vh for bigger layouts, like background.

- very useful for responsive websites because everything scales.

## ch (relative)

'ch' is relative to the width of the number 0 of the current font.'ch' is used to size the width of a paragraph. In general, you want a 45-70 character wide column for readability.

- You would use it like this:
- max-width: 20ch;

This set the width of the column to a maximum of 20 characters per line.

## this  is hard to remember, so...
Like and Save this post

credits to Sai Pranay for the inspiration.
Utilizing Vercel
Published: 2022-05-01 15:58:43

# Getting Started
So if you're going to get started with Vercel, you'll need an account first, which you can get [here](https://vercel.com/dashboard).

Then, you can press the **New Project** button and get to importing your Git Repositories. Once you press the button, you should see a drop down menu on the left, where you can select the repo you want to use.

![Vercel Dashboard](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/nm9p6fzo835wv4njeo5s.PNG)

Having done so, you can produce cool sites like [this](https://eleventy-blog-one.vercel.app/) or [this](https://eleventy-blog-three.vercel.app/).

# Why Is This Important
Vercel is a really simple and great way to automatically deploy stuff. Speaking from experience, whenever I was helping make edits in front-end stuff (although less so for front-end than something like back-end), it was super useful to be able to make a small change then immediately check the effects, without having to go through the slog of doing things within Terminal.

You also don't really need to have a server ready since Vercel will provide all that for you, making it pretty easy to experiment and play around with different things.

Generally, I prefer it a lot more over other CI/CD pipelines. Admittedly, I had some trouble with Vercel, but I actually somewhat understood how it was working, which is a lot more than I can say for other CI/CD pipelines -- it's pretty intuitive and the error messages are somewhat helpful.

# Personal Background
Just as some background, I'm a statistician, so I am not the hugest coder. But I spent a solid three, four hours deleting and remaking both repos and 11ty blogs only to realize that I should have just taken a minute to think about how Vercel creates pages and switched to an HTML based blog much, much faster. But on the plus side, I feel like this has taught me a valuable lesson I will forget to apply the next time I'm being salty over something that <u>should</u> work, but just doesn't.

Jokes aside, Vercel is pretty cool -- for the other two blogs I created, they got created in barely a few minutes.

You may also have noticed this is in reverse online cookbook order (this is intentional and also I am sleep deprived, so I'm rambling).
Lazy Loading with Intersection Observer API
Tags: javascript, html, css, webdev
Published: 2022-05-01 15:41:46

## **INTRODUCTION**
So recently, I came across a better way to implement image lazy-loading on a web-page, so after a couple of articles and videos, I implemented it this way.

Before we start, let's define two things.

1. Lazy Loading: `Lazy-loading` is a technique used in optimizing a content on a web-page and in these article, we'll be using it in relation to image loading on a web-page.

2. Intersection Observer API: The `Intersection Observer` API is a browser API that provides a way for the browser to measure the position of a DOM element relative to the top of the view-port. One key thing to note is that it performs all these operations asynchronously.

Now, that we've defined that, let's see how we can use that to "lazy-load" images.

## Step 1: HTML

![Markup](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/za8ud3kqtmxcwtnblu80.png)

Notice the images to be lazy loaded assigned a class of `lazy-img` and a `data-src` attribute. The links in src attributes of these images are placeholders that will load on the page initially before they are replaced by the images in the `data-src` attribute as we scroll.

## Step 2: CSS (Optional)

![Styling](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/vcl8vqpotqpsspqavohq.png)

I decided to make the images block elements here so that they don't all show up when the DOM is loaded, that way, some images are hidden from the view-port enabling us to see the effect of lazy-loading.

## Step 3: JavaScript
![Functionality](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/jzxwwquvvw85x7bdwhtq.png)

The Intersection Observer API takes in a callback function and options guiding how the callback should be called. 

The `root` option specifies the element to be used as the view-port for checking the visibility of the target DOM element. It defaults to the browser's viewport if set to null.

The `threshold` option takes in a number specifying how much of the target element should be visible before the callback is executed. In this case, I set it to 0.5 which indicates 50%.

## Final Step - Test
So you can see it in effect, below is an embedded code-pen showing lazy-loading implemented.

{% codepen https://codepen.io/samuelorobosa/pen/BaYaroG %}
Week 4 - Handle Input App
Tags: react, hook, usestate, handlinginput
Published: 2022-05-01 15:22:25

---
title: Week 4 - Handle Input App
published: true
description: creating small UI component to build large scale projects
tags: reactjs, hook, useState, handlinginput
cover_image: https://i.imgur.com/GciEcvd.jpg
key: 1
series: React Curve
---

## Welcome to Week 4 of React Curve

Hello developer!, glad to see you again.

This is a react-curve, open source project where I can share and start creating small UI components in the way I understood the concepts to build large scale projects .

----------------

## Handle Input App

![handle input app](https://i.imgur.com/ijyXALD.gif)
This week we created a Handle Input app that handled the data of the input when it changes value in react.

To create a HandleInput component; We have to :

* Input data is usually handled by the component. So all the data is stored in the component state.
* Create a state that holds the value of the input with inital value an empty string.
* The value of the input is the value of the state.
* Adding event handlers in the onChange attribute to control input changes and update our state.
* Now, We handled the data when it changes value

## Code
```react
import React, {useState} from 'react';

const HandleInput = () => {
    const [value, setValue] = useState("");

    return (
        <div>
            <h2>Handle Input</h2>
            <input
                type="text"
                placeholder="Enter Your Title"
                value={value}
                onChange={(e) => setValue(e.target.value)}
            />
            <p>{value}</p>
        </div>
    );
}

export default HandleInput;

```
### Conclusion
Thank you for reading and any contribution is more than welcome in the threads below!

[Live Preview](https://this-react-curve.vercel.app/handle-input)
[Source Code](https://github.com/this-mkhy/react-curve)
Start Using Web Components with open-wc
Published: 2022-05-01 15:21:31

## Helpful tools

It’s possible to code web components in JavaScript with nothing extra installed, but the use of these tools can make development much easier.

[**Node.js**](https://nodejs.org/en/) is an event-driven runtime environment for JavaScript,. It can build modular web servers and process user actions and other events for the program. 

[**npm**](https://www.npmjs.com/), node package manager, is an online repository for Node projects, a utility for interacting with the repository through the command-line, and it is also incredibly useful for dependency management. It allows a user to install packages in one command and will update package.json files for you. 

[**Lit**](https://lit.dev/) is a library for building web components, useful for both existing templates and easily building custom elements using HTML and JavaScript. 

[**Oh My Zsh**](https://ohmyz.sh/) is a framework for plugins, functions, and themes to help manage your terminal shell.

**Git** is an open-source system used for version control. It tracks the code as you change or add to it and can be used to help distributed collaborators stay organized when working in parallel. 

[**Open Web Components**](https://open-wc.org/) is a great tool for accessing open-source web components and is very easy to set up with their quickstart [guide](url) and easy to understand [documentation](url).


## Creating the Component 

After installing the tools used, create a folder to store your project in. Navigate to this folder using the terminal. 
Once in this directory, type `npm init @open-wc` into the terminal, which will install and start open-wc. 

![initial response from starting open-wc](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/xobhvyvr8spa4zf1m55z.png)

From there you can scaffold a new project for a web component and edit the source code as you wish to manipulate your component. 
 
This is code for a sample Hello World web component, based on the Lit [Playground](https://lit.dev/playground/#sample=examples/full-component) example.

![code from HelloWorld file](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/jixeauk320cdiawvpvlg.png)

Import the code to the index file, and enter `npm start` to bring up a local server that displays your new web component. 

![Web page showing two boxes, Hello Neptune in green and Hello Mars in red](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/kafc64baszw7fqy0yokm.png)
 
You can view the code I used to build this component in my [GitHub repo](https://github.com/ParkerEM/etj-lab1) for the project.
Python Debugging Exercises
Published: 2022-05-01 13:00:27

[The following is a series of debugging exercises that you may encounter in the real world of development. They are based on problems I have been asked. I thought it would be fun to share them.]


It is your first week at your new job as a software developer. You have your environment set up and you're seated beside a fellow junior who started a few days before you.

He turns to you and asks if you have a minute.

"Hey if you don't mind, please help me find out what's wrong..."

## Problem 1 
### Context

To change display name of Model Instances, we will use `def __str__()` function in a model. The str function in a django model returns a string that is exactly rendered as the display name of instances for that model.

For example, if we adjust a model in models.py like so

```python
from django.db import models
from django.db.models import Model
  
class SomeModel(Model):
    name = models.CharField(max_length = 100)
     
    def __str__(self):
         return f"{self.name}"
```

When we access SomeModel.objects.all(), the output should be a list of the name fields of this object.

### Problem

It doesn't work for comments. When a Comment object is printed, it shows [Comment object (1)] rather than what is defined under str. 

Let's check the code:

```python
# imports here

class Listing(models.Model):
  max_bid = models.DecimalField(...)
  ...
  
  def __str__(self):
    return ...

class Bid(models.Model):
  ...

class User(AbstractUser):
  ...

class Comment(models.Model):
  comment = models.TextField()
  listing = models.ForeignKey(Listing, on_delete=models.CASCADE)
  user = models.ForeignKey(User, on_delete=models.CASCADE)
  
  def _str__(self):
    return f'{self.id}: {self.comment}' 
```

Where did your fellow teammate go wrong?

## Problem 2 
### Context

Your coworker was secretly interviewing with other companies and was told to find the min value in a list without using min. 

### Problem

The below code doesn't seem to find the minimum element in the list. Why? 

```python
def minimum(some_list):
    a = 0
    for x in range(1, len(some_list)):
        if some_list[x] < a:
            a = some_list[x]
    return a
```

Where did your fellow teammate go wrong?
What is scrum?
Tags: scrum, framework
Published: 2022-05-01 15:05:48

## Scrum: Introduction

***Scrum*** is a simple framework for managing complex projects.

When we have projects where the technology and requirements are well defined, we can use waterfall methodologies. However, when we know less about the requirements, the technology and more complex, scrum is adopted.

Scram has 3 fundamental pillars:
 - transparency: of processes, delivery requirements and status.
 - inspection: constant of everything that is being done.
 - adaptation: both process and product.

## Fundamental practices

![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/9dj5aaqnw001y02ynerz.png)

***Product Owner*** and the central point with leadership powers over the product and in what order it should be done. And he who prioritizes the backlog items.

***Scrum Master*** is responsible for helping all individuals to
understand embracing scrum values and practices.

***Dev Team*** are the project developers, in the project they are
who decide how things will be done.

## Scrum dynamics

It all starts with the product vision, and whoever proves it is the ***Product owner***.

Afterwards, this project vision must be broken down into functionalities that
we call it the ***Product Backlog***.

The Scrum master assists the ***Product Owner***.

The features are divided into priorities:
  - essential
  - important
  - it would be nice to have

This prioritization and responsibility of the ***Product Owner***.

## Scprints

![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/e9mhxvv8eh1wz3vh5cw7.png)

The project is planned in sprints, which are periods of time
All sprints must respect a duration that must be
***2 to 4 weeks***.

Before each sprint starts, Sprint Planning must be done.
What is a sprint planning meeting, in sprint planning
the sprint backlog will be created.

Every morning, a meeting is held with each member of the team.
It asks 3 basic questions.

  - What did you do yesterday?
  - What will you do today?
  - Do you have any impediments?

## Sprint Review

The objective of this activity is to validate and adapt the product that is being
being built. And check that what is being done is
as expected. Here is the presentation of what was done in the sprint, and here that the changes can appear, to
the ***product backlog*** will be updated.

## Retrospective

It aims to verify adaptation needs in the process
Here it will be seen:
  - what was done
  - What hasn't been done
  - What should improve
  - What should stop doing.

![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/iubjb47t0fpkbwc7pjak.png)

<br />

[![Texto alternativo da imagem](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/ds4alkts3uxq0dsco0nv.png))](https://www.linkedin.com/in/israel-lopes-419a32189)
5 years working with Java, got big surprise today with "Pass by value"
Tags: java, devjournal
Published: 2022-05-01 14:54:13

Today I saw a simple Java exam question about OOP

Before it, I knew **stack and heap** and the Java rule **everything pass by value**.

And value means the reference address stores in stack, not the object in heap.

![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/6gr6bpdhhe695zyuf6xi.png)
 
Let have a look at this question:
**What is output of this execute code?**
```java
class Person {
    private String name;
    public Person(String name) {this.name = name;}
    public String toString() {return name;}
}


public class Tester {

    public static Person checkPerson(Person p) {
        if (p == null) {
            p = new Person("Joe");
        } else {
            p = null;
        }
        return p;
    }

    public static void main(String[] args) {
        Person p = null;
        checkPerson(p);
        System.out.print(p);
        p = new Person("Mary");
        checkPerson(p);
        System.out.print(p);
    }
}
```
**Answer**
A) Joenull
B) nullnull
C) Marynull
D) nullMary

The checkPeson() method logic
```java
if (p == null) {
    p = new Person("Joe");
} else {
    p = null;
}
```
ah ha, the first print must be "Joe" cause we pass a null to it
right away select the Answer A - Joenull without any hesitate, but correct answer is D) nullMary

Wait, what? the first print is null.
But we have p = new Person("Joe") already in the method?

> I start to doubt about did Java pass the reference of object to the method?

After some crazy search on internet, I finally understand why

> By simple value in "everything pass by value" mean **a copy of reference address value** (not the real reference value)

The parameter I pass to the method is a clone of the real one, it's a local variable (a variable that's declared within the body of a method)

The real one still points to a null value, it got no effect after the method execute

That why we have correct answer **nullMary**

Oh what a shame, after 7 years in Software Development and 5 years with Java, Sometime thing I am a senior but everything collapse after this.

Couldn't believe I lacked this important point

**My excuse**
- I have learn many languages whenever my company have a new project (or when I land new job).
Learn Java at university, first job with C#, then Ruby, VBA and final comeback with Java
- As a fullstack developer, I use 50% time working with Style and client events (javascript, JQuery)
- Lazy reading technical document, always prefer short explain and blog cause all I want is make code run as soon as possible

The way I am working is still good, customers love that problem solve quickly and I'm like a superstar in my team

But for me, it's time to slow down, learn the concept instead of google for code and use Trial-error method
Odoo 安裝
Tags: odoo
Published: 2022-05-01 14:44:14

Odoo 是企業用的商業套件，主要是 ERP，不過除了庫存、帳務控制外，也包了很多很多的模組，也可以自行擴展，又是 open source 的。

利用這段長假花點時間開始研究研究。從安裝開始，安裝主要是參考官方文件 Installing Odoo，採用 DEB 的模式安裝。

Odoo 需要搭配 PostgreSQL 使用，先把 PostgreSQL 裝起來：

```sh
> sudo apt install postgresql
```

輸出 PDF 則是靠 wkhtmltopd，也裝起來：

```sh
> sudo apt install wkhtmltopdf
```

開始加 Odoo APT repository：

```sh
> wget -O - https://nightly.odoo.com/odoo.key | sudo apt-key add -

> echo "deb http://nightly.odoo.com/12.0/nightly/deb/ ./" >> /etc/apt/sources.list.d/odoo.list

> sudo apt update
> sudo apt install odoo
```

以上跑完，確認一下服務有沒有跑起來：

```sh
> sudo service --status-all
```

應該會看到 `[ + ] odoo` 和 `[ + ] postgresql`。

註記一下安裝多了或動了哪些檔案或目錄：

- /etc/init.d/odoo
- /etc/logrotate.d/odoo
- /etc/odoo
- /lib/systemd/system/odoo.service
- /usr/bin/odoo
- /usr/lib/python3/dist-packages/odoo
- /usr/share/doc/odoo

瀏覽器開到 http://localhost:8069 就可以看到初次啟動的設定頁面了，自由發揮填一下，等它跑完就會自動進入主畫面，安裝完畢。