teleren/devto huggingface dataset:
Smaller, Better, Faster... Server?
Tags: javascript, webdev, webapps, pwa
Published: 2021-05-04 05:36:40

Lit Element brought us 60 FPS pure DOM changes wrapped in a super light library with simple, declarative JavaScript templating.

Well, now Lit 2.0 is here and it is smaller, better and faster.

"Our major goals for Lit 2.0 were to reduce size, add powerful new features, improve performance and make some key changes under the hood to facilitate server-side rendering (SSR)... " - Gray Norton

Unlike most libraries, with a new version Lit actually is smaller, meaning your users get features they deserve faster with reduced download times.

Lit also improved its API so you will find it even easier to write clean and maintainable code. It has ultra fast templating, reactive properties so your components can update in response to changing state, a customisation reactive update lifecycle and very easy to use scoped styles.

Lit 2.0 is speedier, compared to the previous versions of Lit, which were already faster than other popular Javascript libraries. Lit 2.0 is faster by up to 20% faster on the initial render, and 15% faster on updates.

Perhaps the biggest change of Lit 2.0 is that it is now much simpler to use Lit for SSR. This enables a full range of integration for SSR including using Next.js and even static site generators or even using apps entirely built with Lit.

Every Lit components is a standard web component. This means you can use it anywhere you can use HTML. Be that another web framework, inside other components and plain html.

Lit then becomes the perfect addition for progressively enhancing basic websites, creating shareable components across frameworks and teams especially in the case of design systems.

Lit really does make it easy to build fast, lightweight web components. To find out more visit the new [Lit website](https://lit.dev) at [lit.dev](https://lit.dev).
Or [watch the Lit 2.0 launch video.](https://youtu.be/f1j7b696L-E)
How to handle IE in a modern app without punishing your users.
Tags: javascript, pwa, webdev, ux
Published: 2021-05-04 05:35:01

Most of the world has declared IE dead and buried. However often it is still a requirement when dealing with large corporations and government. As much as the reasoning behind keeping the worlds worst browser operational could be argued it's not going to be covered here.

Modern browsers support cleaner code, better features and are far safer and faster. However the common answer to supporting legacy browsers is to throw your code through a converter like Babel. Don't get me wrong this is a solution and works for many situations but the result is more code, and code that is catered to the lowest common denominator. There are also several issues with this as it only seems to cover language features not browser APIs.

What might be a great alternative to this is targeting missing APIs and use a [polyfill service](https://polyfill.io/v3/). The reasons this works is that the browsers that need it are the only ones impacted over a small amount of extra code and one if condition.

The following example adds in the [polyfil](https://polyfill.io/v3/) for html template.

    <script>
        this.HTMLTemplateElement || document.write('<script src="https://polyfill.io/v3/polyfill.min.js?features=HTMLTemplateElement"><\x2fscript>');
    </script>

You can do this for any polyfill that you need. Checkout [https://polyfill.io/v3/](https://polyfill.io/v3/) for more details.

I am aware that you can deferentially serve content, and that might be an even more ideal solution in many cases, but if that is not an option this is an alternative to serving up a lowest common denominator build.

Please let me know your thoughts and other tips in the comments below.

[Photo by Hasan Albari from Pexels](https://www.pexels.com/photo/photo-of-man-reading-newspaper-1652340/)
Vue router demo
Tags: vue
Published: 2021-05-04 03:16:21

```html
<html>
  <head>
    <script src="https://unpkg.com/vue@3"></script>
    <script src="https://unpkg.com/vue-router@4"></script>
  </head>
  <body>
    <div id="app">
    <h1>Hello App!</h1>
      <p>
        <!--使用 router-link 组件进行导航 -->
        <!--通过传递 `to` 来指定链接 -->
        <!--`<router-link>` 将呈现一个带有正确 `href` 属性的 `<a>` 标签-->
        <router-link to="/">Go to Home</router-link>
        <router-link to="/about">Go to About</router-link>
      </p>
        <!-- 路由出口 -->
        <!-- 路由匹配到的组件将渲染在这里 -->
      <router-view></router-view>
    </div>
    <script type="text/javascript">
      // 1. 定义路由组件.
      // 也可以从其他文件导入
      const Home = { 
        template: '<div>{{this.age}}</div><button @click="goToDashboard">button</button>',
        created() {
          console.log("....${this.username}")
          console.log(this.username)
          console.log(this.age)

        },
        data() {
          return {
            age: 24
          }
        },
        computed: {
          username() {
            // 我们很快就会看到 `params` 是什么
            return 2
            // return this.$route.params.username
          },
        },
        methods: {
          goToDashboard() {
            if (true) {
              console.log(this.$route.params)
              this.$router.push('/test')
            } else {
              this.$router.push('/login')
            }
          }
        }
      }
      const About = { template: '<div>About</div>' }

      // 2. 定义一些路由
      // 每个路由都需要映射到一个组件。
      // 我们后面再讨论嵌套路由。
      const routes = [
        { path: '/', component: Home },
        { path: '/about', component: About },
        { path: '/test', component: Home}
      ]

      // 3. 创建路由实例并传递 `routes` 配置
      // 你可以在这里输入更多的配置，但我们在这里
      // 暂时保持简单
      const router = VueRouter.createRouter({
        // 4. 内部提供了 history 模式的实现。为了简单起见，我们在这里使用 hash 模式。
        history: VueRouter.createWebHashHistory(),
        routes, // `routes: routes` 的缩写
      })

      // 5. 创建并挂载根实例
      const app = Vue.createApp({})
      //确保 _use_ 路由实例使
      //整个应用支持路由。
      app.use(router)

      app.mount('#app')

      // 现在，应用已经启动了！
    </script>
  </body>
</html>
```
How to use textillate.js
Tags: javascript, html, css
Published: 2021-05-04 05:27:46

What is Textillate.js?
Textillate.js combines some awesome libraries to provide an easy-to-use plugin for applying CSS3 animations to any text.

⭐ Create a folder :

1. Inside the folder create an index.html file.

2. Inside this HTML file create an element, it can be hading or paragraph.
![code](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/5kjtme059sr14r810ges.png)

3. Add this CSS file CDN into the index.html file.
   CDN Link: https://cdnjs.com/libraries/animate.css
![code](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/8xye8p4zunn9xxo2m5z8.png)

4. Link these scripts into index.html (The 
  sequence of the script files should be the same).
  CDN Links: 
  👉 https://cdnjs.com/libraries/jquery
  👉 https://cdnjs.com/libraries/textillate
  👉 https://cdnjs.com/libraries/lettering.js/0.6.1
![code](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/gb5u26xqc4uwbtxhav1o.png)

5. Using jQuery target the element that you had created previously and add textillate() method to it
![code](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/x4g8du7baxabmdzqlrjn.png)
 
6. Run index file (open index file on the browser).

7. If still not working properly then watch this
video: https://youtu.be/FeRmCXYS3Wo

Thank you 💖
How to use POM in software testing
Tags: testing, selenium, programming, java
Published: 2021-05-04 05:25:13

What is POM?

POM is a design pattern which is commonly used in Selenium for Automating the Test Cases. This design pattern can be used with any kind of framework like keyword-driven, Data-driven, hybrid framework, etc. I think you have an idea about the above frameworks Anyway I'll talk about them later.

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

Project hierarchy?

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

Under this model, for each web page in the application, there should be a corresponding Page Class. This Page class will identify the WebElements of that web page and also contains Page methods which perform operations on those WebElements. Name of these methods should be given as per the task they are performing, i.e., if loader needs to search something using the search box the method name will be setSearchBox(String item).

Consider following  script for search some thing

![image](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/9uz6biv2t3z5q7psfwhv.png)

As you can see all we are doing in this script is finding the web elements and setting the methods to fill those values. Above code is under the package pages

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

what we are doing here is filling the search box with values we provided(Test cases). Internal logic of these methods are implemented with the separate classes in the page package.

The chief problem with script maintenance is that if 10 different scripts are using the same page element, with any change in that element, you need to change all 10 scripts. This is time consuming and error prone.

A better approach to script maintenance is to create a separate class file which would find web elements, fill them or verify them. This class can be reused in all the scripts using that element. In future, if there is a change in the web element, we need to make the change in just 1 class file and not 10 different scripts. That is the page object model(POM)

Summary

Developing a maintainable automation code is one of the keys to a successful test-automation project. When developing Selenium WebDriver tests(Or any other framework), We can use the page object model pattern, This pattern helps enhances the tests by making them highly maintainable, reducing the code duplication, building a layer of abstraction, and hiding the inner implementation from tests.
All about Vue JS
Tags: vue, javascript
Published: 2021-05-04 05:15:56

##What is Vue JS 

Vue JS is a front end framework for JavaScript. It is open source as well, meaning anyone can contribute to its development. Frameworks are simply outlines used to build websites and web applications. One of the greatest advantages of Vue is that it is fast, easy to use, and very versatile.

##Using Vue

I have used Vue to recreate a template resume that I made a while back ago. I have cut out many parts of it only leaving the header. but you will also notice that it has greatly simplified the header portion of my resume. It was pretty easy to implement and I did not run into very many problems.

My Code
https://codepen.io/ljp5342/pen/QWpLwEo

I also documented my usage of Vue in a Youtube video as well. 

https://youtu.be/EeKC_6CF0Sg
Drawing book problem - Hackerrank
Tags: kotlin, algorithms, programming, beginners
Published: 2021-05-04 05:06:32

Problem statement is available [here](https://www.hackerrank.com/challenges/drawing-book/problem)


This problem needs minimum number of turns required to reach a particular page. 

**Input**
All the books start with page1 on the left and may or may not fill the left side of the page.

For a book contains **n** pages to reach page **p**, following is true.

* From front, turns (**t**) is always p/2. Below you can see few usecases

   ```kotlin
   page 1 --> 1/2 --> 0
   page 2 --> 2/2 --> 1
   page 3 --> 3/2 --> 1
   page 4 --> 4/2 --> 2
   
   i.e
   val turnsForPage = p/2
   ```

* When coming from back, there might be a fluctuation. Due to last page being an odd or even number. 

   For a book with **7** pages, reaching 2nd page from back takes 2 turns.

   **[-,1] [2,3] [4,5] [6,7]**

   

   If the book has **6** pages, the result is same

   **[-,1] [2,3] [4,5] [6,-]**



For turn count computation from back, the last pair should be treated equally. As we know, the turn count from front is consistent one. Lets try it for the above books.

```kotlin
val turnsForLastPage = n/2

6/2 = 3
7/3 = 3
```



Now we know, **the problem is never about the page number, but on which turn we land in it**. With this is mind, lets build a table to visualize turns vs pages mapping.

| Turns [Front] | 0    | 1    | 2    | 3    |
| ------------- | ---- | ---- | ---- | ---- |
| Turns[Back]   | 3    | 2    | 1    | 0    |
| Page - pair   | _, 1 | 2, 3 | 4, 5 | 6, 7 |



From the table we know, `Turn[Front] + Turn[Back] = turnsForLastPage`.



Let's apply this and get Turn[Back] from above computations.

```kotlin
val turnsFromLastPage = turnsForLastPage - turnsForPage
```



### Solution



So the complete solution is as below

```kotlin
fun pageCount(n: Int, p: Int): Int {
    val turnsForPage = p/2
    val turnsFromLastPage = n/2-turnsForPage
    return Math.min(turnsForPage, turnsFromLastPage)
}
```
A LinkedIn For Newbies (Updated)
Tags: showdev, webdev, career, saas
Published: 2021-05-04 04:54:16

KwickBox, https://kwickbox.cloud is a new innovative career platform developed specifically for newbies and job seekers with little or no working experience.

Over the years, LinkedIn has largely favored job seekers with considerably amount of working experience (4+). A job seeker not having work experience does not mean they aren't capable or talented. There are many job seekers with amazing talents that an overlooked. The talent industry needs change.

It also provides a public platform to showcase the profiles and front pages of job seekers with little or no working experience to recruiters and employers. The platform provides a dead simple user interface where users can easily invite friends and colleagues to review their C.V online

KwickBox provides a simple user interface which makes setting up a professional C.V site easy as pie. Another interesting feature in the platform is the online C.V review feature. With this feature, users are able to collect diverse feedback from friends and colleagues by simply sharing their C.V site link.

The project started as a side project. Currently it has 1K+ daily active users and is growing rapidly.

I am giving out free premium coupon codes to the next 200 people to register on the platform. With premium, you'll be able to:

- Invite people to review your CV online in a simple manner. Said people will be able to rate each section of your CV and add feedback for improvement.

- Access a geographical map to view locations where your CV has been accessed from.

- Get featured on the platform's website to lots of recruiters and startup companies.

- Send out requests to referees to provide valid references.
jsf - Faking JSON data from a schema 
Tags: python, json, faker, fastapi
Published: 2021-05-04 04:47:08

https://github.com/ghandic/jsf

Use **jsf** along with fake data generators to provide consistent and meaningful fake data for your system.

## Main Features

- Provides out of the box data generation from any JSON schema 📦 
* Extendable custom data providers using any lambda functions 🔗
* Multi level state for dependant data (eg multiple objects sharing value, such as children with same surname) 🤓 
* Inbuilt validation of fake JSON produced ✅
* In memory conversion from JSON Schema to Pydantic Models with generated examples 🤯
* Seamless integration with [FastAPI](https://fastapi.tiangolo.com/) 🚀

## Installation

```console
$ pip install jsf

---> 100%
```

## Usage

### Basic 😊

```python
from jsf import JSF

faker = JSF(
    {
        "type": "object",
        "properties": {
            "name": {"type": "string", "$provider": "faker.name"},
            "email": {"type": "string", "$provider": "faker.email"},
        },
        "required": ["name", "email"],
    }
)

fake_json = faker.generate()
```

Results in ...

```python
{
    'name': 'Jesse Phillips', 
    'email': 'xroberson@hotmail.com'
}
```

### From JSON file 📁

```python
from jsf import JSF

faker = JSF.from_json("demo-schema.json")
fake_json = faker.generate()
```

<details markdown="1">
<summary>Or run stright from the <code>commandline</code>...</summary>

#### Native install

```bash
jsf --schema src/tests/data/custom.json --instance wow.json
```

#### Docker

```bash
docker run -v $PWD:/data challisa/jsf jsf --schema /data/custom.json --instance /data/example.json
```

</details>


### FastAPI Integration 🚀

Create a file main.py with:

```python
from jsf import JSF
from fastapi import FastAPI

app = FastAPI(docs_url="/")
generator = JSF.from_json("custom.json")


@app.get("/generate", response_model=generator.pydantic())
def read_root():
    return generator.generate()

```

Run the server with:

<div class="termy">

```console
$ uvicorn main:app --reload

INFO:     Uvicorn running on http://127.0.0.1:8000 (Press CTRL+C to quit)
INFO:     Started reloader process [28720]
INFO:     Started server process [28722]
INFO:     Waiting for application startup.
INFO:     Application startup complete.
```

Navigate to [http://127.0.0.1:8000](http://127.0.0.1:8000) and check out your endpoint. Notice the following are all automatically created:

- Schema with descriptions and examples
- Example response
- Data generation by clicking "try it out"

![Example Swagger UI - Page 1](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/kli4ipus7thnm1ia86zr.png)
![Example Swagger UI - Page 2](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/aoony7l0jkdttf4v11lg.png)
![Example Swagger UI - Page 3](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/uex78wxjmsh3bovkbro9.png)
![Example Swagger UI - Page 4](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/grxjocvh8dojvn000pj4.png)

</div>
How to Create Expense Tracker in Python
Tags: python, programming
Published: 2021-05-04 04:17:57

for see original article click here <a href="https://pythonslearning.com/2021/05/how-do-you-create-make-an-expense-tracker-in-python.html">expense tracker</a>



How about an application that does all this work for you and you just need to feed the information?

So, understanding the importance of the application, we are here to give you a nice explanation and implementation of the same.

If you want to read in details about how to create expense tracker using python then open below link https://pythonslearning.com/2021/05/how-do-you-create-make-an-expense-tracker-in-python.html
Best of luck
Having fun at home
Published: 2021-05-04 03:52:49

I love this dress + corset from Dracula Clothing!

They're super comfortable, the dress has more than enough room for big boobs with a small waist!

I love how the brocade design reflects light!

Hope to get more from them this year!

https://draculaclothing.com/brocade-gothabilly-dress.html

![Alt Text](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/i5i0m8qk7objpb8gypk2.png)
![Alt Text](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/hkzmgxbqlrbzyct2viip.png)
![Alt Text](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/vn9vir66tcao7vljch2l.png)
![Alt Text](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/bb52o856vttkzpzchm4u.png)
Authenticated Live View Tests
Tags: tipstricks
Published: 2021-05-26 17:43:38

---
title: Authenticated Live View Tests
published: true
date: 2021-05-03 21:15:24 UTC
tags: TipsTricks
canonical_url: https://mrmurphy.dev/authenticated-live-view-tests/
---

I've been running through [Pragmatic Studio's Live View course](https://pragmaticstudio.com/phoenix-liveview), which I highly recommend, and wanted to make a specific note of how to authenticate users when writing Live View tests after adding `phx_gen_auth` to a Phoenix project.

Happily, this is a very short post, because `phx_gen_auth` does all the work for you. When you've run that generator, you get a function added to your `conn_case.ex` called **register\_and\_log\_in\_user**. This function takes a map with a connection in it, creates a new user, logs the user in, and returns it with a modified connection.

So now my test that used to fail because the page now requires authentication:

```
    test "saves new message", %{conn: conn} do
      {:ok, index_live, _html} = live(conn, Routes.message_index_path(conn, :index))

      assert index_live |> element("a", "New Message") |> render_click() =~
               "New Message

---

     ** (MatchError) no match of right hand side value: {:error, {:redirect, %{flash: "SFMyNTY.g2gDdAAAAAFtAAAABWVycm9ybQAAACRZb3UgbXVzdCBsb2cgaW4gdG8gYWNjZXNzIHRoaXMgcGFnZS5uBgCMD68zeQFiAAFRgA.zriUcbZsaCi0a4Bqq-hpJK0WP8IH-MHusGt3DPw028g", to: "/users/log_in"}}}
```

Will pass if I just call that function at the front:

```
    test "saves new message", %{conn: conn} do
      # 🚨 Add this line to authenticate the test request.
      %{conn: conn} = register_and_log_in_user(%{conn: conn})
      {:ok, index_live, _html} = live(conn, Routes.message_index_path(conn, :index))

      assert index_live |> element("a", "New Message") |> render_click() =~
               "New Message
```
Code Smell 69 - Big Bang (JavaScript Ridiculous Castings)
Tags: codenewbie, oop, programming, webdev
Published: 2021-05-04 03:32:24

*This handy operator is a trouble maker.*

## TL;DR: Don't mix booleans with non-booleans.

# Problems

- Not Declarative Code

- Hard to debug

- Magic Castings

- Accidental Complexity

# Solutions

1. Be Explicit

2. Don't mix Booleans with non-booleans.

3. [Fail Fast](https://dev.to/mcsee/fail-fast-48dm)

4. Be Smarter than your compiler.

5. Stay loyal to the bijection.

{% post https://dev.to/mcsee/the-one-and-only-software-design-principle-3086 %}

# Sample Code

## Wrong

```php
!true // returns false
!false // returns true

isActive = true 
!isActive // returns false

age = 54
!age // returns false
array = []
!array // returns false
obj = new Object;
!obj // returns false

!!true // returns true
!!false // returns false

!!isActive // returns true
!!age // returns true
!!array // returns true
!!obj // returns true
```


## Right

```php

!true // returns false
!false // returns true

isActive = true 
!isActive // returns false

age = 54
!age // should return type mismatch (or 54 factorial!)
array = []
!array // should return type mismatch
obj = new Object;
!obj // should return type mismatch (what is an obejct negated in a real domain?)

!!true // returns true - it is idempotent
!!false // returns false - it is idempotent

!!isActive // returns true - it is idempotent
!!age // nonsense
!!array // nonsense
!!obj // nonsense
```


# Detection

Since this is a "feature" in some languages it would be hard to test. We can set programming policies or choose more [strict languages](https://dev.to/tmaximini/typescript-bang-operator-considered-harmful-3hhi).

We should detect *!* *!!* usages in non-boolean objects and warn our programmers.

# Tags

- Casting

- Coercion

- Javascript

# Conclusion

Languages like JavaScript divide their whole universe into *true* or *false* values. This decision hides errors when dealing with non booleans. 

We should be very strict and keep booleans (and their behavior), far away from non booleans.

# Relations

{% post https://dev.to/mcsee/code-smell-24-boolean-coercions-25l4 %}

{% post https://dev.to/mcsee/code-smell-06-too-clever-programmer-37lb %}

# More info

[Reddit](https://www.reddit.com/r/ProgrammerHumor/comments/6erd7r/the_best_thing_about_a_boolean_is_that_even_if/)

[Double Bang](https://www.bennadel.com/blog/3858-the-double-bang-operator-and-a-misunderstanding-of-how-javascript-handles-truthy-falsy-values.htm)

[Mozilla](https://developer.mozilla.org/en-US/docs/Glossary/Truthy)

# Credits

Photo by <a href="https://unsplash.com/@grakozy">Greg Rakozy</a> on <a href="https://unsplash.com/s/photos/universe">Unsplash</a>  

* * *

> It is easier to write an incorrect program than understand a correct one.

_Alan J Perlis_
 
* * *
 
{% post https://dev.to/mcsee/software-engineering-great-quotes-26ci %}