teleren/devto huggingface dataset:
How to make your site speed supper fast to 99
Published: 2022-09-10 08:00:50

There are so many plugins to choose and make your site supper fast to meet the 100 percent. 

In recent time it has become necessary to have a site which is fastest and flexible. 

That is why i have recently checked my site speed and it was up to 60 percent only. 

Let me show you how I have optimised the speed till now.

1 - I have compressed the images
2 - Images lazy load 
3 - CDN connected via cloud-flare
4 - I have removed unnecessary plugins 
5 - Light weight theme

After all these things. Still my site has a very low speed. 
Now, what I have to do to optimise my speed up to 100?

You should check my [tennis portable machine](https://thetennisgeek.com/best-portable-tennis-ball-machines/) site and recommend me bets practices. 

That would be helpful for all of us to know some untaped ideas.
Today's Fun Joke For Developers - Daily Developer Jokes
Tags: jokes, dailydeveloperjokes
Published: 2022-09-10 08:00:19

---
title: "Today's Fun Joke For Developers - Daily Developer Jokes"
description: "Check out today's daily developer joke! (a project by Fred Adams at xtrp.io)"
series: "Daily Developer Jokes"
published: true
tags: #jokes, #dailydeveloperjokes
---

Hi there! Here's today's Daily Developer Joke. We hope you enjoy it; it's a good one.

![Joke Image](https://private.xtrp.io/projects/DailyDeveloperJokes/public_image_server/images/5e12596ec99e0.png)

---

For more jokes, and to submit your own joke to get featured, check out the [Daily Developer Jokes Website](https://dailydeveloperjokes.github.io/). We're also open sourced, so feel free to view [our GitHub Profile](https://github.com/dailydeveloperjokes).

### Leave this post a ❤️ if you liked today's joke, and stay tuned for tomorrow's joke too!

_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:
___Q:___ What sits on a pirate's shoulder and calls, "Pieces of seven, Pieces of seven"?

___A:___ Parroty error.
 -->
Sveltekit News:Announcing new articles on SvelteKit!
Tags: webdev, svelte, sveltekit, update
Published: 2022-09-10 07:59:36

**Recently, SvelteKit made some hard and breaking changes to make it a release candidate for v1. I haven’t posted anything in that time now we have a lot to cover up in upcoming articles. What I'm planning to do** 
- First explanation of every single breaking changes have there own article in detail.
- New features like form action and enhance.

> I'm looking for some suggestions and ideas if you have any question or anything you can ask me comment sections.
Using Alpine.js directives on form_with in Ruby on Rails
Tags: rails, alpinejs, javascript, ruby
Published: 2022-09-10 07:44:48

Alpine.js makes Vue-like declarative state-driven UI available in server-rendered templates without the complexity of a typical JS toolchain.

Alpine can be especially useful on HTML forms. Because the default approach to forms in Ruby on Rails uses the framework's `form_with` function instead of an HTML `<form />` tag, it's not immediately clear how to use Alpine's directives in Rails. Thankfully, it's relatively straight forward to use Alpine directives in the `form_with` function. Take a look at the example below:

```erb
<%= form_with(model: blog_post, html: {"x-data": "{}"}) do |form| %>
    <%= form.button "x-on:click": "alert('Hello!')", type: "button" do %>
      click me
    <% end %>
<% end %>
```

I hope this helps you get up-and-running with Alpine.js when using Rails as your back-end framework. Happy coding!
Function Hoisting In JavaScript
Tags: javascript, codenewbie, beginners, webdev
Published: 2022-09-10 07:23:15

In the [previous post](https://dev.to/chaharsumit/variable-hoisting-in-javascript-1h9i) we talked about variable hoisting. Now we are going to look at function hoisting in JavaScript.

There are two main types of functions in JavaScript - 
- Function Declarations
- Function Expressions

In this post, We'll can understand function hoisting by looking at how function declarations and function expressions behave in the creation and execution phase.

**Hoisting Function Declarations

we'll analyse the below example to understand how function declarations are hoisted - 

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

The below happens in the above example -
- In the creation phase the javascript engine encounters the function keyboard and the default behaviour is that when a function declaration is encountered it's hoisted in the memory with its complete function body.
- When the execution phase starts and the add function is called the full function body is already available in the execution phase so this program outputs 3.

**Hoisting Function Expressions

The way function expressions are hoisted is similar to how variables get hoisted as a function expressions is simply assigning an anonymous function to a variable so that we can later execute that by referring to the variable name.



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



We can conclude from above examples that hoisting the function expressions happens the same way as the variable hoisting.

- In the first example, we get an error `add is not a function` as the variable add was hoisted in memory with a value of `undefined` thus the Js Engine expects add to be undefined and not a function so it throws an error in case we access it before initialisation.
- For the second one i've replaced `var` with `let` and it gives an error again as let/const declarations are only given memory in the creation phase but not a value so it results in the error `cannot access 'add' before initialisation`.
- The third example does print the expected output as we are accessing the variable add only after its initialised in out program so the variable add gets initialised to the anonymous function and we get the output 3 on calling it.
Easily use 10 based unit systems
Tags: css, html, webdev, productivity
Published: 2022-09-10 07:15:41

If we wanted to use rem, We usually convert px by 16 for example `768px/16px=48rem`
If we are setting root as below
`:root {
  font-size: 62.5%;
}`

This will change the default value to 10px but this is not good practice
This will affect the custom value for accessiblity 

To avoid this set body
`body {
 font-size: 1.6rem;
}`

Now we can write 
`768px===76.8rem`
Любая признания приносит свои плоды!
Published: 2022-09-10 06:55:29

Сегодня мне пришла почта, мол вы признаны вашим руководством. Не знаю, как это действует на других, но меня сам факт, что я нахожусь в кругу внимания, дико радует. Радует то, что я что-то делаю и то, что я делаю приносит моему окружению  пользу, и моё окружение благодарен за это. Те, кто работают со мной, знают меня не удивить вознаграждениями в виде финансовых премии или даров, Для меня реакция руководства будь то она положительная или отрицательная должна быть незамедлительной. Таким образом, я ощущает себя значимым: _теперь я точно знаю, что моему начальству небезразличны мои достижения или промахи:)_

Ведь мне достаточно того, что я приношу пользу и коллеги, родные, близкие люди знают это. Но согласитесь, приятно все же, когда тебя за это, за то что ты делаешь свою работу, благодарят. Кому не нравятся похвала а?:) Если преподнести умеренно, то всем  наверное она нравится.  Я пишу и делюсь этой радостью вовсе не показывая, мол смотрите у меня +1 лайк в копилку, а наоборот, среди моих друзей, коллег и тех с кем я имею взаимную подписку, есть владельцы собственных бизнесов, HR менеджеры, начальники и простые работяги как и я. Я хочу довести, хотя перефразирую показать вам, насколько это приятно для самого работника.

И да, не забывайте: Подчиненный, вклад которого в общее достижение не заметили или не оценили, не захочет «проявлять себя» в дальнейшем. Промежуточный результат – тоже результат! Стимулирование работников за маленькие успехи позволит ускорить достижение главной цели. Ведь не зря говорят, что похвала действует лучше наказания. Я рад, что Аллах дал мне возможность быть полезным и почувствовать себя полезным.

В последок добавлю два совета, которые мне помогают делать свою работу лучше и лучше.

**Дома:** Каждое утро, когда я собираюсь на работу прошу отца сделать дуа, он делая дуа говорит: Сынок, где бы ты не работал, чья бы не была б работа, всегда делай её с любовью. Если ты не хочешь работать, попроси отгул на день-два и  отдыхай с любовью, а  после выходи на работу с желанием, что ты сделаешь работу с полной отдачей. Не делай, работу лишь бы прошел день, заказ. Помни, может твоё руководство это не узнает, но Аллах все видит и ты получишь ровно то, что посеял.

**А на работе**, мне один раз сказали: Как ты будешь работать, зависит от твоей совести, но мы с тобой должны понимать, что нам платит Банк, и если мы будем делать свою работу качественно и надежно, банк будет в плюсе и соответственно в плюсе будем мы с тобой. Так что твой доход и отношение к тебе зависят только от тебя. 

Вот вам явный пример, того, что мы в действительности пожмём, то что посеем. Всем плодотворных урожаев. Сейте с любовью друзья. 
У меня все. Всем добра.
What a Fecade😍😍😍😍
Tags: leetcode, chiki1601, 123
Published: 2022-09-10 06:46:22

123 subscribers


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

123 streak of Leetcode


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


What a great coincidence that the same number I have seen on my social media sites.....🥰🥰🥰🥰🥰
A wild idea appeared
Tags: googlecloud, watercooler
Published: 2022-09-10 06:30:01


I got this crazy idea a while ago that it would be super cool to have a custom Google Action that I could load onto my Google home device.

My idea is to be able to ask it for the latest dev tip, and it will prompt back the latest article I've written.

At first, it seemed impossible, but I decided to give it a go.
In the following few articles, I'll dive into this quest, and hopefully, we'll be able to create it.

## Getting started

For this article in specific, we'll get started with the rough setup and gather the pieces we'll need.

The first thing you'll need is a [Google Action developer account](https://console.actions.google.com/). You can simply follow the steps on the page.

Once logged in, you can create your first action on the webpage.
You can pick and of the existing samples to get started.

Once you have created one, you'll be able to get into the visual editor of Google Actions.

For now, we'll be using that.
If you go to the Settings tab, you'll be able to choose the display name. This will be the name of your application.

In my case, I went with "Daily Dev Tip".

![Google Actions display name](https://cdn.hashnode.com/res/hashnode/image/upload/v1661924686695/C1frmPxw1.png)

Then we can move on to the main invocation, which will be the action that happens when users interact with our app.
In my case, I dummy-mocked what I wanted to happen.

In the Invoke tab, I added the following YAML to mock the actions that should happen.

```yml
candidates:
  - first_simple:
      variants:
        - speech: Here is the latest dev tip
    content:
      card:
        title: Some article
        text: Summary
        image:
          URL: 'https://developers.google.com/assistant/assistant_96.png'
          alt: Article description
```

This will result in Google first saying: "Here is the latest dev tip", and showing the rich article card.

This will look something like this:

![Google action testing](https://cdn.hashnode.com/res/hashnode/image/upload/v1661924997845/ifDvhRqSn.png)

That is already perfect but, of course, still super static. We'll need to figure out how to query our endpoint to get the latest article.

More on that in the following articles.
If you are keen to learn with me, don't forget to subscribe to my newsletter not to miss any articles.

### Thank you for reading, and let's connect!

Thank you for reading my blog. Feel free to subscribe to my email newsletter and connect on [Facebook](https://www.facebook.com/DailyDevTipsBlog) or [Twitter](https://twitter.com/DailyDevTips1)
This week’s newsletter is out! (10-09-2022) - Death of the Queen
Tags: javascript, tech, webdev
Published: 2022-09-10 06:21:34

---
title: This week’s newsletter is out! (10-09-2022) - Death of the Queen
published: true
description: Another week of great javascript, tech and web development links.
tags: javascript, tech, webdev, discuss
---

Death of the Queen

https://markjgsmith.substack.com/p/mark-smiths-newsletter-10-09-2022

Would love to hear any comments and feedback you have.

[@markjgsmith](https://twitter.com/markjgsmith)
Cheapest Flights Within K Stops
Tags: python, leetcode
Published: 2022-09-10 06:20:33

There are n cities connected by some number of flights. You are given an array flights where flights[i] = [fromi, toi, pricei] indicates that there is a flight from city fromi to city toi with cost pricei.

You are also given three integers src, dst, and k, return the cheapest price from src to dst with at most k stops. If there is no such route, return -1.


```py

class Solution:
    def findCheapestPrice(self, n: int, flights: List[List[int]], src: int, dst: int, k: int) -> int:
        prices = [float("inf")] * n
        prices[src] = 0

        for i in range(k + 1):
            tmpPrices = prices.copy()

            for s, d, p in flights:  # s=source, d=dest, p=price
                if prices[s] == float("inf"):
                    continue
                if prices[s] + p < tmpPrices[d]:
                    tmpPrices[d] = prices[s] + p
            prices = tmpPrices
        
        return -1 if prices[dst] == float("inf") else prices[dst]
    
```
Put Overlays on image and fit in different aspect ratios
Tags: webdev, javascript, css, todayilearned
Published: 2022-09-10 05:54:17

## Preface
I would not say I am a frontend guy. But most of the time in my company I need to do projects in a fullstack way, meaning that I need to touch the frontend side of work as well. And here comes an interesting problem for me to solve ;D

## Problem
We need to highlight certain phrases of an image full of text. We're given sets of `(x,y,height,width)` of the image. The `(x,y,height,width)` are in percentage so that we can simply do the following to draw an overlay on the image (See example below for highlighting the text `danger` and `science`)
```
overlay {
    left: x%;
    top: y%;
    height: height%;
    width: width%;
}
```
{% embed  https://jsfiddle.net/46q9utsg/23 %}

Ok so how about next? 

What if we need to fit it into a viewport which has different aspect ratio? While at the same time highlighting the same thing as the original one?

## Fit into a different viewport
In order to do that, we need to know 
1. which part of the original image should we show, and
2. how we scale the new positions

### Assumptions
- For simplicity, assume width should always be preserved; as we're fitting a 4629/10110 image to a 700/500 viewport 

### which part of the original image should we show
The css property `background-position` comes into handy. And big thanks to the article from https://dev.to/this-is-learning/all-you-need-to-know-about-background-position-3aac, which clearly explains how `background-position` works. If we know how it works, we could then calculate the new positions by simple maths.

### TL;DR
1. we need to know the minimum y so that we can set that as the new `background-position-y`
2. then we need to calculate the new `y'` and `height'` after the scaling. (I'm skipping the maths here, but if you are interested, feel free to take a look at the example below)

And at last we could result in something like this ;D
{% embed  https://jsfiddle.net/y1zv9ugt/27 %}

## Sum Up
Of course it's not perfect solution. I'm just trying to demo the css properties we can make use of when tackling a problem. There are also other handling/optimisation needed, e.g.
- what if the highlight (partially) lies outside of the viewport?
- what if some coordinates cannot fit into the viewport with `x` unchanged; then we need to scale `x` too.
- others...

Love to hear if there're other approaches towards this too!
Laravel 8 One To Many Polymorphic Relationship
Tags: laravel, laravel8, polymorphic, relationship
Published: 2022-09-10 05:17:27

In this article, we will learn about laravel 8 one to many polymorphic relationships. A one-to-many polymorphic relation is similar to a typical one-to-many relation. 

The child model can belong to more than one type of model using a single association. One to many polymorphic relationships is used when a model belongs to more than one other model on a single association model.

For Example, users of your application can comment on posts and videos. Using polymorphic relationships, you may use a single comments table to contain comments for both posts and videos. using morphMany() and morphTo() you can access data.

In this example, we will create posts, comments, and videos tables. all tables are connected with each other like the below screenshot and we are creating migration and model all tables and retrive data using one to many polymorphic relationships in laravel 6, laravel 7, and laravel 8.
i created oxideapi⚛api developing ecosystem in react js
Tags: react, javascript, python, productivity
Published: 2022-09-10 05:10:38

Hello my dearest developers today we are launching our own api developing ecosystem.You can test apis in some seconds it is running as a web application.It is very faster than other api testing tools like postman and all with your great support only we can update it make as a open-source project.

Oxideapi:-https://oxideapi.web.app
Personal website:-https://sripadhsujith.herokuapp.com
Hackerrank logo in Python
Tags: hackerrank, python, chiki1601
Published: 2022-09-10 05:03:17

Hello friends...

I created Hackerrank logo using Python...

which is shown below:

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

I am glad that I am implementing Python turtle graphics by making various logos🥳🥳🥳🥳🥳
#pythonturtle
Stack Overflow logo in Python
Tags: stackoverflow, python, chiki1601
Published: 2022-09-10 05:03:16

Hello friends...

I created Stack Overflow logo using Python...

which is shown below:

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

I am glad that I am implementing Python turtle graphics by making various logos🥳🥳🥳🥳🥳
#pythonturtle
How does web works?
Tags: webdev, productivity, beginners, github
Published: 2022-09-10 04:58:36

## Clients and servers
Computers connected to the internet are called clients and servers. A simplified diagram of how they interact might look like this

![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/qmsk7xnl3qsdvmhkp7av.png)
When a client device wants to access a webpage, a copy of the webpage is downloaded from the server onto the client machine to be displayed in the user's web browser.
The the client sends a HTTP (Hypertext transper Protocol i.e it defines a langauge for client and server to speak each other) 

## So what happens, exactly?

- The browser sends an HTTP request message to the server, asking it to send a copy of the website to the client (you go to the shop and order your goods). This message, and all other data sent between the client and the server, is sent across your internet connection using TCP/IP.

- If the server approves the client's request, the server sends the client a "200 OK" message, which means "Of course you can look at that website! Here it is", and then starts sending the website's files to the browser as a series of small chunks called data packets (the shop gives you your goods, and you bring them back to your house).

- The browser assembles the small chunks into a complete web page and displays it to you (the goods arrive at your door — new shiny stuff, awesome!).
188. Leetcode Solution in javascript
Tags: javascript
Published: 2022-09-10 04:56:13

```
var maxProfit = function(k, prices) {
    if(!prices.length) return 0;
    // Create dp arrays
    const even = Array(prices.length).fill(0)
    const odd = Array(prices.length).fill(0)

    for(let i = 1; i < k+1; i++) {
        let prevMax = -Infinity
        // Switch arrays to proper values when we are on an odd or even number
        const current = i % 2 === 0 ? even : odd;
        const prev = i % 2 === 0 ? odd : even;
        // Fill dp arrays with max profit on each day when making i amount of transactions
        for(let j = 1; j < prices.length; j++) {
            prevMax = Math.max(prevMax, prev[j-1] - prices[j-1])
            // current[j-1] means we will do nothing on the j day and take the max profit from the previous day
            // prices[j] + prevMax is the profit from gained on this day (prices[j]) and the max profit we could make from a previous transaction (prevMax)
            current[j] = Math.max(current[j-1], prices[j]+prevMax)
        }
    }
    // Current and prev change based on i. This chooses the correct curent array
    return k % 2 === 0 ? even[even.length-1] : odd[odd.length-1]
};
```

#leetcode
#challenge
Here is the link for the problem:
https://leetcode.com/problems/best-time-to-buy-and-sell-stock-iv/
AWS Elastic Beanstalk Cheat Sheet
Tags: 30daysofaws, day02, certifieddeveloperassociate, aws
Published: 2022-09-10 04:46:35

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

- When you want to use new run time capabilities with elastic bean stalk, it's better to use blue-green deployment
- Security group will not be removed when removing the stack with elastic bean stalk
- For long-running tasks - Use Elastic Beanstalk worker environment to process the tasks asynchronously
- Launch configuration is used for modifying instance type, key pair, elastic block storage and other settings that can be configured only when launching the instance
- Rolling with Additional Batch and Immutable both involve provisioning new servers to ensure capacity is not reduced. All At Once means the application will be offline for the duration of the update. Performing a Rolling Update without an additional batch of servers means a reduction in capacity. https://docs.aws.amazon.com/elasticbeanstalk/latest/dg/using-features.deploy-existing-version.html
- For Blue green deployment - Use Elastic beanstalk swap URL feature or route 53 with weighted routing policies
- You create your own Elastic Beanstalk platform using Packer, which is an open-source tool for creating machine images for many platforms, including AMIs for use
with Amazon Elastic Compute Cloud (Amazon EC2).


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



> - [Practice notes](https://romankurnovskii.com/en/docs/aws-certified-developer-associate/ec2/)
> - [Questions](https://dev.to/romankurnovskii/aws-ec2-top-questions-certified-developer-exam-27oo)
> - [Tutorials and samples](https://docs.aws.amazon.com/elasticbeanstalk/latest/dg/tutorials.html)
How do I create a temporary email?
Published: 2022-09-10 04:35:03

There are three main methods you can choose to generate your disposable email address: using a [temporary email](https://10-minutemail.net/) address service, creating an alias on Gmail, and adding a tag to your regular email address. Many services let you create a free, [temporary email](https://10-minutemail.com/) address that you can use for almost anything.

**where can i find this service?**
1  [20 minutes mail](https://10-minutemail.com/temporary-email/20-minutes-mail)  

2  [30 minutes mail](https://10-minutemail.com/temporary-email/30-minutes-mail)

3  [60 minutes mail](https://10-minutemail.com/temporary-email/60-minutes-mail)

4 [24 hours mail](https://10-minutemail.com/temporary-email/24-hours-mail)