teleren/devto huggingface dataset:
Pagination Example In Laravel 7/8
Tags: laravel, laravel8, pagination, php
Published: 2021-12-31 03:02:36

In this article I will give you pagination example in laravel 7/8, Pagination is very common feature in all websites, if we want to display specific number of details or images then we can use pagination. 

Laravel provide paginate method and it will automatically takes care of setting the proper limit and offset based on the current page being viewed by the user.

There are several ways to paginate items. The simplest is by using the paginate method in laravel 6/7/8. The paginate method counts the total number of records matched by the query before retrieving the records from the database. Here I will show you how to use pagination in laravel 6/7/8.

Let's see pagination example in laravel 6/7/8.

So, first of all we will create controller and add below code in index() function, and I have used paginate() function for pagination. In this example, the only argument passed to the paginate method is the number of items you would like displayed "per page". In this case, let's specify that we would like to display 15 items per page.

Output :

![Pagination Example In Laravel 7/8](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/5tv87go0uk5y4hmqx532.png)

---

> **_[Read More : Pagination Example In Laravel 7/8](https://techsolutionstuff.com/post/pagination-example-in-laravel-7-8)_**
Clone your first Git repository
Tags: git, beginners, webdev, codenewbie
Published: 2021-12-31 02:51:43

Git clone command is used when you are trying to download a project from an existing remote repository. Once the git clone command is successfully executed you will have a copy of the repository in your machine.

The below command will clone the remote git repository and the name of the directory will be the same as the repository name.

**Syntax:**
```
$ git clone <repository>
```

**Example:**
```
$ git clone https://github.com/username/myproject.git
```

And now you can navigate in the cloned directory on you local.

**[Know more about git clone...](https://www.novicedev.com/blog/how-clone-git-repository)**
What are microservices? A quick definition
Tags: architecture, microservices, beginners, cloud
Published: 2021-12-31 01:55:27

## Definition
Microservices are an innovative type of software architecture, which consists of building applications breaking them down into independent services. These services communicate with each other using APIs and provide great agility in development times.

&nbsp;

## How a microservice should be?
According to many autors, there are 8 main requirements that every microservice should fit in, namely:

1. **Stable**
2. **Reliable**
3. **Scalable**
4. **Fault Tolerant**
5. **High performance**
6. **Monitored**
7. **Documented**
8. **Prepared for any catastrophe**

Before sending the microservices to production, a detailed check must be made on each of the above requirements, scoring them, and after that, defining whether they are ready or not to be sent to the production environment.

&nbsp;

## What problems microservices are expected to solve?

The concept of microservices architecture is not new, it derives from distributed systems, a topic that has been around since the beginning of the second half of the 20th century. However, its massive implementation is recent, in recent years, many big techs migrated to the microservices architecture, because their old monolithic systems, were no longer handling the extremely high volume of data and requests.

The goal of microservices architecture is to build a set of small applications, each responsible for performing a function, and allow each microservice to be autonomous, independent and self-sufficient.
4 Packages You Need in Any Laravel Project
Tags: laravel, package, webdev, programming
Published: 2021-12-31 02:40:39

**1. barryvdh/laravel-ide-helpe**r
https://github.com/barryvdh/laravel-ide-helper

**2. barryvdh/laravel-debugbar**
https://github.com/barryvdh/laravel-ide-helper

**3. beyondcode/laravel-query-detector**
https://github.com/beyondcode/laravel-query-detector

**4. spatie/laravel-backup**
https://github.com/spatie/laravel-backup
Azure: cloud computing
Tags: cloud, azure, computerscience, tutorial
Published: 2021-12-31 02:22:41

## What is cloud computing?

**Cloud computing** is the delivery of computing services over the internet by using a **pay-as-you-go** pricing model. You usually pay only for the cloud services you use, which helps you to have lower operational costs, scale as you need and run your infrastructure more efficiently. You are billed just for what you use.

&nbsp;

## What is Azure?

**Azure** is a set of cloud services that help your organization to meet your current and future business challenges, it allows you to build, manage, deploy and monitor your applications. As Amazon has AWS, Google has Google Cloud and Microsoft has Azure; these are the 3 biggest cloud providers in the world.

&nbsp;

## What is Azure Portal?

The **Azure Portal** is a web-based unified console that provides and alternative to command-line tool. So with **Azure Portal** is not needed to use tools like PowerShell anymore if you prefer. Azure Portal provides you a graphical interface, so you can easily:

- Build, manage and monitor
- Create custom dashboards
- Configure acessibility options

&nbsp;

## What is Azure Marketplace?

**Azure Marketplace** is a store to connect and install services, apps and systems to your Azure servers. At Azure Marketplace you can find many services, including external ones, that are not from Microsoft, like Google, RedHat, IBM and other services.
Using both Firebase Analytics Huawei Analytics Kit in Your Android Project.
Tags: android, analytics, firebase, huawei
Published: 2021-12-31 02:18:07

If your Android Project already implemented *Firebase Analaytics*, and want to reach Huawei market by implementing Huawei's Analytics tool.

[Here](https://jimlyas.medium.com/using-both-firebase-analytics-and-huawei-analytics-kit-in-android-application-88240825c71e) is how to do it. Simple, no `build variant` or `build flavor` needed.
Трюки CSS #1
Tags: css
Published: 2021-12-31 01:53:19

Несколько полезных код-сниппетов для того чтобы **ты** стал фронтенд-самураем 🤺

---

Если применить `margin-left: auto` к **последнему флекс-айтему** внутри контейнера он выровняется по правой стороне при том что остальные останутся слева.

`|||---` → `||---|`

---

Отцентрировать элемент внутри можно с помощью `position: fixed`

```css
.popup {
    position: fixed;
    top: 50%;
    left: 50%;
    -webkit-transform: translate(-50%, -50%);
    transform: translate(-50%, -50%);
}
```

---

Центрирование внутри экрана с помощью `grid`

```css
body, html {
    height: 100%;
    display: grid;
}

.i-am-centered {
    margin: auto;
}
```

---

Центрирование элементов внутри контейнера:

```css
.wrapper {
  display: grid;
  place-items: center;
}
```
Year 2 of the Art of Destroying a USB
Published: 2021-12-30 23:53:33

Whaddup folks! It's that time of year again where I do the very very very terrible decision of going to a shooting range and explosives field to destroy USBS and man this year was fun, I got to mess with A C I D and a few toxic folks from tiktok (No you won't get my tiktok, ever) to give suggestions on how to destroy, mangle, melt and vaporize my USBS this year... those were some terrible choices, glad I brought earplugs haha.

So first off, I decided I'd use music to my advantage and I got a very special type of chemical in my posession that quite literally acts like an acid when you sing or play a Bb next to it.

For the rest of my USBS, I decided I'd go ahead and use a sniper rifle on half, and explode the rest using low grade C4 (learned my lesson from last year using high grade!) and man was that fun!


I can't say too much about the rest but I will probably post an image or two to twitter later!


Jonyk5 OUT!


([Ma Twitta](https://twitter.com/Jonyk5_dev))
ColdFusion structKeyExists vs keyExists
Tags: cfml, coldfusion
Published: 2021-12-30 23:36:30

We have a lot of logic that processes data and it extensively uses `structKeyExists` to determine whether or not data exists prior to performing additional logic. I've been modernizing my legacy ColdFusion code and am wondering if we should invest any time to converting `structKeyExists()` to `keyExists()`. Are there any benefits apart from readability? Any assumptions regarding which is more performant?

While I've read that looping over a function multiple times isn't the best way to compare performance, it often reveals issues... especially when one performs 2-4 times faster than the other.

Here's some quick stats comparing 2,000 built-in cfml function calls. (NOTE: It didn't matter which version of ACF2016+ or Lucee is used.)

| function      |  ns  |
| ------------- | --------: |
structKeyExists |   810,284 |
keyExists       | 1,477,436 |

Am I going about this wrong? Am I asking the right questions? Is there any expectation that the performance times would be better (or at least the same) when using `keyExists()`?

## Source code

{% gist https://gist.github.com/JamoCA/809c58aaff993cccd979c143f8de7698 %}
Beautiful Functions: Compose
Tags: functional, javascript, haskell, typescript
Published: 2021-12-30 23:15:08

I'd like to take a look at some functions whose form and function are the epitome of elegant. 

The B combinator, sometimes called "compose":
```js
const B = (f) => (g) => (x) => f(g(x))
```
Which has the type:
`(b -> c) → (a -> b) → a → c`

in TypeScript:

```ts
const B = <A, B, C>(g: (y: B) => C) =>
  (f: (x: A) => B) =>
    (a: A): C =>
      g(f(a));
```

What it does is combine two unary functions (single-argument functions) together such that the output of the second is the input of the first. This is the core of composing functions in math as well as programming. If you have a couple procedures you want to link and sequence consider using this operator to do so.

```ts
const armTheMissiles = (missles: Missle[]): Missle[] => {...}

const fireTheMissles = (missles: Missle[]): void => {...}

const armAndFireMissles = B(fireTheMissles)(armTheMissles)
```

This is such a core way of writing code that advanced languages like Haskell and F# have operators dedicated to it: `.` and `<<`, respectively.

```haskell
armAndFireMissles = fireTheMissles . armTheMissles
```

An easy place to integrate this function into your code is in cases where you take a callback that calls a function with it's parameters.

```js
const fetchStuff = () =>
  fetch(...).then(data => parseData(validate(data)))
```
In this case you can use the B combinator to drop the inner lambda:

```js
const fetchStuff = () =>
  fetch(...).then(B(parseData)(validate))
```

This way of eliminating lambdas by using composition techniques is called eta-reduction.

It may help to have an idea of what a partially applied `B` means. I like to think of it as the function has its arms out and is ready for the conga line.

```js
const congaReadyFoo = B(foo);
const congaReadyBar = B(bar);
const congaLine = congaReadyFoo(congaReadyBar(baz));
// where foo, bar, and baz are all unary functions with compatible inputs and outputs.
```

That all said, it's easy to go too far with this kind of technique.
```js
// probably too far
const congaLine = B(foo)(B(bar)(baz))
```

This is mainly due to the syntax as when it's an operator it's much easier to follow (haskell):

```haskell
congaLine = foo . bar . baz 
``` 

There's many more fun combinators but I wanted to start with one many people may already be familiar with from high school math.

## Bonus fact: `B` turns functions themselves into a functor

```haskell
class Functor f where
  fmap :: (a -> b) -> f a -> f b

instance Functor ((->) r) where
  fmap = (.)
```

That is, given a function from `a -> b`, our compose function takes a function which takes something of type  `a` and returns a function which takes something of type `b`. This means it's totally cool to think of composition as mapping a function over another function.
A subtle error I made with constructors
Tags: javascript, oop, launchschool
Published: 2021-12-30 22:48:44

---
title: A subtle error I made with constructors
published: true
description: 
tags: javascript,oop,LaunchSchool
cover_image: https://upload.wikimedia.org/wikipedia/commons/d/d6/Timeless_Books.jpg
---
## In which I almost didn't notice a mistake

I was able to track down a subtle but important error I was making when using constructors with sub-classes and manually setting prototypes.

Consider the following code (from an implementation of rock-paper-scissors):
```JavaScript
function Player(){
  this.move = null;
}
Player.prototype.setMove = function(mv) {
  this.move = mv;
};

function HumanPlayer() {

}
HumanPlayer.prototype = new Player();

let player1 = new HumanPlayer();
let player2 = new HumanPlayer();

player1.setMove('paper');
console.log(player1.move, player2.move);
//paper null
```
While the error ended up not being a major issue here, notice where the move property of player1 and player2 is initially stored - the object referenced by `HumanPlayer.prototype` - and this object is shared by all `HumanPlayer` objects!

![The prototypal relationships](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/2r4l4a12j1hldd5bipyh.png)
 

Both players access their `move` property from `Human.prototype` - meaning they share `this.move`!  Let's confirm this by checking the value of `move` using `getPrototypeOf()`
```JavaScript
console.log(player1.hasOwnProperty('move'));
//false
console.log(Object.getPrototypeOf(player1).move);
//null
Object.getPrototypeOf(player2).move = 'paper';
console.log(player1.move);
//paper
```
Not only does `player1` not have an own property move, setting `player2.[[Prototype]].move` to `paper` is accessed by `player1.move`!  We don't actually have `move` defined as individual state for each instance of `HumanPlayer`

Oddly enough, the program worked fine - consider the `setMove()` function:
```JavaScript
Player.prototype.setMove = function(mv) {
  this.move = mv;
};
```
When invoking this function using `player1.setMove('paper')`, `this` refers to player1.  Since player1 doesn't have an own property `move`, one is created!  Each player calls `setMove()`, each now has their own `move` property, and the `move` on `HumanPlayer.prototype` is never used again. 
```JavaScript
player1.setMove('rock');
player2.setMove('paper');
console.log(player1.move, player2.move);
//rock paper
console.log(Object.getPrototypeOf(player1).move);
//null
```
 We got lucky - this time.  How to properly fix this?
 ```JavaScript
function Player(){
  this.move = null;
}

function HumanPlayer() {
  Player.call(this);
}
HumanPlayer.prototype = new Player();

let player1 = new HumanPlayer();
let player2 = new HumanPlayer();

console.log(player1.hasOwnProperty('move'));
//true
 ```

 Focus on the `HumanPlayer` constructor - we've added a call to the `Player` constructor.  Now creating a new HumanPlayer invokes the Player constructor, (using the context of the object first created due to `new`), and sets the `move` property on this object.  Now each player has their own properties.  All is well with the world.
Remote pair programming - What are YOUR best practices? 🧑‍💻👩🏽‍💻
Tags: watercooler, productivity, discuss, programming
Published: 2021-12-30 22:47:05

The certain situation the world has been in for the past almost two years has affected a lot of us devs all around the globe. This hasn't stopped us from delivering amazing software and do good deeds though - Au contraire! Think of global remote hackathons, local efforts to create services that help people in need, providing schools with old laptops, the list goes on. 

Arguably, the tech industry has adapted rather quickly. Video calls became a widespread norm, employees of some companies, like Twitter, [can now work from home forever if they want](https://blog.twitter.com/en_us/topics/company/2020/keeping-our-employees-and-partners-safe-during-coronavirus).

*(As a little disclaimer: I'll use the word "remote" in this post to describe non-onsite things in general, even if you're in the same town as your peers.)*

With the new remote situation came a few hurdles, though. And in this post I want to discuss some of these hurdles, and more specifically, how to overcome them. A specific topic I'd like to look at today is **pair programming**.

Pair programming is a very helpful technique. It helps to onboard new team members to an existing application, give juniors an opportunity to learn from more senior devs (and vice versa!), discussing ideas and concepts. A popular approach to pair programming involves two roles: A driver and a navigator. While the driver is doing the actual coding, the navigator tries to keep the overview and give directions to the driver. Both people get to discuss their ideas and find the best solution together.

From my experience, two people are usually working on the same computer. They come up with a plan together, write down open questions and then get going. I've done this with peers for weeks on end. However, the remote situation has made pair programming rather rare, at least in my team. It can be rather tedious. Screen sharing works, don't get me wrong, but it's easier to point on something on screen with your finger than to figure out the lines (and read them aloud at the same time!) of some blurry editor while the other person is scrolling along. I've played around with IntelliJ's pair programming feature for a bit, but not everyone uses IntelliJ either. For me, coding together on the same machine still feels a lot more productive.

**So, what are your experiences? What tools do you use? What are your best practices when it comes to remote pair programming?**

---

*I hope you enjoyed reading this article as much as I enjoyed writing it! If so, leave a* ❤️ *or a* 🦄*! I write tech articles in my free time and like to drink coffee every once in a while.*

*If you want to support my efforts,* [*you can offer me a coffee* ☕](http://buymeacoffee.com/pthormeier) *or* [*follow me on Twitter* 🐦](https://twitter.com/pthormeier)*!* *You can also support me directly via [Paypal](https://www.paypal.me/pthormeier)!*

[![Buy me a coffee button](https://dev-to-uploads.s3.amazonaws.com/i/x55hp6jopwyy161d8e2u.png)](http://buymeacoffee.com/pthormeier)
[AWS Experiment] 4 - Using AWS CICD
Tags: aws
Published: 2021-12-30 22:14:00

AWS CICD consists of CodeCommit, CodeBuild, CodeDeploy, and CodePipeline. I am not big fan of AWS CICD since there are many other ways to test & deploy applications other than using AWS. But I think if you want to develop an application fully using AWS services than AWS CICD services could be one of the best options.


## CodeCommit

#### Things that I 😍

- User interface of the console was better than I expected. Not too confusing, simple enough.
- In security terms, I believe CodeCommit is better than GitHub. CodeCommit repositories are private by default But GitHub repositories could be way too public if you don't take care of it.

#### Things that I 😕

- Cloning and committing to repositories from local PC require IAM knowledge.

## CodeBuild

#### Things that I 😍

- I really enjoyed writing `buildspec.yml`. The experience working with console to write `buildspec.yml` was pretty easy too.

## CodeDeploy

#### Things that I 😍

- I think it was handy to select EC2 instances as a deployment group by tagging the same value. But at the same time, I thought it could be hard to manage if you don't be careful about managing tags.

- `appspec.yml` was not too hard to understand.

#### Things that I 😕

- I had to install CodeDeploy Agent on all EC2 instances in the deployment group. 
- I could use CloudFormation to launch those EC2 instances as specific AMI that already has installed CodeDeploy Agent, but I felt like no one would want to use this if they are not familiar with AWS services.

- Installing CodeDeploy Agent on EC2 instances

```sh
#!/bin/bash

# Installing CodeDeploy Agent
sudo yum update
sudo yum install ruby

# Download the agent (replace the region)
wget https://aws-codedeploy-eu-west-3.s3.eu-west-3.amazonaws.com/latest/install
chmod +x ./install
sudo ./install auto
sudo service codedeploy-agent status
```

## CodePipeline

#### Things that I 😍

- It triggers build and deploy stages as soon as I commit the changes to CodeCommit.

- With CodPipeline, I did not have to do too much work on CodeDeploy part.

- The User Interface of CodePipeline was very satisfiable.

#### Things that I 😕

- Still, you have to learn how to manage deployment group at the CodeDeploy.

- Hard to reach out CloudWatch log on console.
3DVista and Next.js
Tags: nextjs, 3dvista, virtual, tour
Published: 2021-12-30 22:10:13

# Use 3DVista in a Next.js app

The default export for [3DVista's Virtual Tour PRO](https://www.3dvista.com/en/products/virtualtour) is not supported for frameworks like React or Next.js. Below are the steps that need to be taken in order to get 3DVista working on next.js.

Tested it on:
- Mac: Chrome/Safari/Firefox
- PC: Chrome/Safari/Firefox
- iPhone: Safari/Chrome
- iPad: Safari/Chrome

## 1. Export from 3DVista
- Click _Publish_
- Select _For Web / Mobile_
- Set the Destination to a New Folder called _3DVista_ (this will end up in you next.js projects _/public_ directory)
- Click _Publish_

## 2. Add to next.js project
- Add the newly created _3DVista_ folder into the pages directory of your project

## 3. Move files/folders
- Move these files from /pages/3DVista to /public:
  - /lib
  - /locale
  - /media
  - script_general.js
  - script.js

## 4. Update CSS
- Create a new file called _3dvista.css_
- Remove all declarations in the style tag in /pages/index.htm and place them in _3dvista.css_
- Remove all inline styles, replacing with a class, and putting these classes into _3dvista.css_
- import _3dvista.css_ file at the top of __app.js_

## 5. Edit index.htm
- Rename _index.htm_ to _index.jsx_
- Remove outer html and head tags and the !DOCTYPE declaration:
```html
<!DOCTYPE html>
<html lang="en">
  <head>
  ...
  </head>
  <body>
  ...
  </body>
</html>
```
- Convert to a functional component
```jsx
import Head from "next/head";

export default function index() {
  return (
    <div>
      <Head>
      ...
      </Head>
      <section>
      ...
      </section>
    <div>
  )
```

- Convert script tag to dangerouslySetHtml:
```html
<script type="text/javascript">
  var tour;
  var devicesUrl = {"general":"script_general.js?v=1640882506117"};

  (function() {
    var deviceType = ['general'];
...
  }
</script>
```
to (*see bonus for alternate strategy here)
```jsx
<script
  type="text/javascript"
  dangerouslySetInnerHTML={{
    __html: `
      let tour;
      let devicesUrl = { general: "script_general.js" };

      (function () {
        let deviceType = ["general"];
      ...
      `
</script>
```
**NOTE:** Be sure to have the __html wrapped in backticks `` to avoid single/double quote conflicts

- Remove this comment which is causing an error: ```//Force hide. Some cases the transitionend event isn't dispatched with an iFrame.```

- Remove the ```isSafariDesktopV11orGreater()``` function, as its causing an error
- Replace all instances of ```/Mobile\/\w+/``` with ```/Mobile/```, as they are causing a regex error

- There are query parameters on the .txt, .js, and .jpg in the link and script tags that need to be removed. Locate this (looks something like this `?v=1640882506117`) at the first link tag within the head tag. Remove All occurrences of this query parameter throughout the document (highlight, right click and select "Change All Occurrences")

# THATS IT!
Hope this is helpful to someone else out there in the interwebz :)