teleren/devto huggingface dataset:
A nifty alternative to box-shadows
Published: 2021-07-07 12:56:06

Most folks know about the `box-shadow` property and use it a lot already in their CSS, however there are certain scenarios where a box-shadow doesn't give us ideal results. There is however also a CSS filter called `drop-shadow` that let's us do some cool things we cannot achieve with box-shadows. It's currently supported in all modern browsers and definitely worth a look. Here's how a drop-shadow looks like in CSS:

```jsx
.selector {
  filter: drop-shadow(0 10px 12px rgba(0, 0, 0, 0.4));
}
```

## What's the use case?

While box-shadows are sufficient in most scenarios, they can only give us a shadow around the exact shape of an element, which is usually angular or round due to a `border-radius`. With drop-shadows however, we can cast a shadow around elements and even images that stays in direct proximity to the non-transparent parts of the image or element.

So in essence this works on regular HTML elements, SVGs and also transparent PNGs. Here's an example:

```jsx
.triangle {
	width: 180px;
	height: 180px;
	background: linear-gradient(45deg, yellow 50%, transparent 50%);
	filter: drop-shadow(0.2rem 0.2rem 1rem rgba(0,0,0, 0.8));
}
```

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

One downside we can spot in the syntax here is that we're not able to set a spread parameter the shadow should have. Other than that, the parameters match what we're used to with box-shadows (x-offset, y-offset, blur, color).

The real magic however becomes more obvious when we apply a drop-shadow to a transparent PNG, which gives us the same effect as seen above, instead of just putting a shadow on the whole image or container, we see the shadow aligned to the filled lines and shapes.

```jsx
<style>
    img {
        filter: drop-shadow(0.5rem 0.5rem 0.5rem rgba(0, 100, 200, 0.7));
    }
</style>
<img src="./waves.png">
```
![Alt Text](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/bxjtiqqpz7c16zc32qw1.png)

Stay tuned for more frontend-focused articles like this 👉 https://allround.io
I made 150+ high-quality illustrations, totally free. Use it anywhere without attribution.
Tags: webdev, productivity, showdev, opensource
Published: 2021-07-07 12:42:05

Hey everyone,

I know that all of you are working on exciting products. To help you make it a bit more beautiful, I have made 150+ high-quality illustrations.

As the title suggests, they are:

1. Totally free

**2. Absolutely need NO attribution :)**

---

### Scale and its launch

Here's Scale's link: [Scale](https://2.flexiple.com/scale/multi-color-illustrations)

I just launched this on Product Hunt. Your support would mean a lot to me: https://www.producthunt.com/posts/multicolor-illustrations-by-scale.

---

###What's new in Scale 2.0?
- Now you can tweak 3 colors in the illustration
- Add/remove masks from the characters
- Filter illustrations by Gender


Have fun and build great projects!
How to Export Database Records to Excel using PHP(Laravel)
Tags: laravel, php
Published: 2021-07-07 12:20:58

---
title: How to Export Database Records to Excel using PHP(Laravel)
published: true
description: 
tags: #Laravel, #PHP
cover_image: https://dev-to-uploads.s3.amazonaws.com/uploads/articles/sk7rdzg71gk6lo5d1zfz.png
---

Have you encountered a challenge where you need to export records from the database to excel using Laravel?

We will be using [Maatwebsite](https://laravel-excel.com) Laravel package 

##Installation 
First require the Maatwebsite laravel package in your `composer.json`
```
composer require maatwebsite/excel
```

The `Maatwebsite\Excel\ExcelServiceProvider` is registered by default. But you can manually register the ServiceProvider in your `config/app.php`

```
'providers' => [
    /*
     * Service Providers...
     */
    Maatwebsite\Excel\ExcelServiceProvider::class,
]

```

The Excel Facade is discovered and registered by default. But you can add it manually to your `config/app.php`


```
'aliases' => [
    ....
    'Excel' => Maatwebsite\Excel\Facades\Excel::class,
]


```
Publish config by running the vendor command

`php artisan vendor:publish --provider="Maatwebsite\Excel\ExcelServiceProvider" --tag=config`

This will create a new config file named `config/excel.php.` and your setup is completed.

##Exporting

On our already seeded database, we will be exporting those records to an excel file.[Checkout how to seed in laravel](https://laravel.com/docs/8.x/seeding) First we create a controller using:
```
 php artisan make:controller ExportToExcelController
```

then we create an export class in the `app\Export` using the:

```
php artisan make:export UsersExport --model=User
```

the `UsersExport` is the Export class while the flag `--model=User` is referencing the model class in use.

The result of the command `php artisan make:export UsersExport --model=User`:

```

<?php

namespace App\Exports;

use App\Models\User;
use Maatwebsite\Excel\Concerns\FromCollection;

class UsersExport implements FromCollection
{
    public function collection()
    {
        return User::all();
    }
}


```

Head over to your `ExportToExcelController` you can export records

```

<?php

namespace App\Http\Controllers;

use App\Exports\UsersExport;
use Maatwebsite\Excel\Facades\Excel;

class ExportToExcelController extends Controller 
{
    public function ExportRecords() 
    {
        return Excel::download(new UsersExport, 'users.xlsx');
    }
}


```

Ooh one more thing, add a route to be able to access ExportRecords:

```
Route::get('data/export/', 'ExportToExcelController@ExportRecords');
```
**Thats IT!** :sunglasses:
Reboot
Tags: blogging
Published: 2021-07-16 10:19:23

---
title: Reboot
published: true
date: 2021-07-07 12:01:00 UTC
tags: blogging
canonical_url: https://dils.blog/reboot/
cover_image: https://images.unsplash.com/photo-1624718393399-9d448945f176?crop=entropy&cs=tinysrgb&fit=max&fm=jpg&ixid=MnwxMTc3M3wwfDF8c2VhcmNofDV8fHJlYm9vdHxlbnwwfHx8fDE2MjYwOTExOTQ&ixlib=rb-1.2.1&q=80&w=2000
---
**In the past** I jumped on the blogging bandwagon around 2000, I met some interesting people and maybe got some street cred in the small but interesting Sri Lankan blog scene. Around 2008 having moved for work and started family I lost interest and dropped off.

All of the 20 people who read my blog moved on and that was that.

Looking back my old writing sounded a bit condescending with a hint of ego. It might have been my age talking as well but I didn't mean to sound that way, I was just trying to help.

In my mind I was always writing and rewriting my views of the world. It was kind of boring as well. Also I spent a lot of time picking themes and building blogging platforms over the years that I never came back.

I'm older and tired now, so I'm not going to mess around with tools (maybe a little) and get the words out.

**Presently** locked down like everyone else, I was hoping and counting the days, months now years to see the end of this pandemic.

These days I'm listening more and trying to sound less condescending and reflecting on better days gone by.

From the dot com crash of 2000, the global financial crisis of 2008 and now the pandemic of 2020 (to 2025?) the good times seem to have a predictable expiry date.

**The future** is the hard part. No one really knows where we go from here. Whatever the future looks like I can bet you everyone is making plans. We had a lot of home time to think things through.

These ideas will shape the future world we live in and I might have a tiny say in that.
Search and data structures
Tags: beginners, programming, algorithms
Published: 2021-07-07 12:00:27

Remember our search algorithm trip to the beach? If not check out this previous article: https://rhurbans.com/plan-search-repeat. Our trip can be represented as a graph. What's a graph? It's a data structure used by algorithms to do smart things.

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

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

Data structures are concepts in computer science used to represent data in a way that is suitable for efficient processing by algorithms. A data structure is an abstract data type consisting of data and operations organized in a specific way.

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

An example of a data structure is an array, which is simply a collection of data. Different types of arrays have different properties that make them efficient for different purposes.

A graph is a data structure containing several states with connections among them. Each state in a graph is called a node (or sometimes a vertex), and a connection between two states is called an edge.

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

A tree is a popular data structure that simulates a hierarchy of values or objects. A hierarchy is an arrangement of things in which a single object is related to several other objects below it.

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

A path is a sequence of nodes and edges connecting nodes that are not directly connected. A node connected to another node by following a path away from the root node is called a descendent, and by following a path toward the root node is called an ancestor.

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

It is useful to understand the different types of graphs to best describe the problem and use the most efficient algorithm for processing. Some of these categories of graphs are used in ant colony optimization algorithms and artificial neural networks.

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

If you enjoyed this and want to learn more, check out my book, Grokking Artificial Intelligence Algorithms with Manning Publications: [http://bit.ly/gaia-book](http://bit.ly/gaia-book), consider [following me for more](https://twitter.com/RishalHurbans), or join my mailing list for infrequent knowledge drops in your inbox: [https://rhurbans.com/subscribe](https://rhurbans.com/subscribe).
Daily Developer Jokes - Wednesday, Jul 7, 2021
Tags: jokes, dailydeveloperjokes
Published: 2021-07-07 12:00:02

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

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

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

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

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

<!-- 
Joke text:
Asynchronous JavaScript is amazing.

I Promise you, await and see.
 -->
Will PHP practicing click eventually?
Tags: php, mysql, laravel
Published: 2021-07-07 11:45:48

What's up guys!, I'm new here by the way so nice to meet everyone on this forum. Anyway i want to ask this newbie question as i'm still pretty new to PHP coding. I kept hearing people saying that even if i don't understand the language for me to just keep coding and build projects and it will just click in my head eventually?..
Keluaran Togel Macau 2021– Informasi Pengeluaran Toto Macau

Tags: totomacau
Published: 2021-07-07 11:39:51

Keluaran Togel Macau 2021– Informasi Pengeluaran Toto Macau

Keluaran Togel Macau 2021 terlengkap yang dapat kalian miliki pada artikel yang telah kita sajikan hari ini, Pengeluaran macau ini pastinya hendak amat berguna untuk pemeran togel bumi dan toto online, karena dengan rincian informasi itu, macau pools 2021 ini dapat diprediksi lebih terperinci, alhasil nilai kemenangan kian kokoh. Lalu ikuti seluruh pengeluaran macaupools, betul!

Dimaksudkan dengan adanya informasi macau pools 2021 ini hendak bermanfaat untuk Kamu seluruh dalam membenarkan dengan cara tentu hasil kemenangan atas pemasangan nilai hari ini.

Di atas merupakan ikhtisar keluaran Terkini pengeluaran macau pada tahun

2021. Pembaharuan keluaran macau pool, keluaran macau pools, macaupool keluaran, macaupool Live, macau pool keluaran, Tercepat, pengeluaranl macau, keluaran, macau pool Malam Ini, keluaran Hari Ini.

Laman ini yakni web yang merujuk pada data gambling toto online macau sangat laris. Penayangan pengeluaran togel seluruh tipe hendak kita rekap mulai dari informasi togel sebelum- sebelumnya. Bila Kamu mencari informasi macau terlengkap, inilah tempatnya!

Perkiraan Nilai Keluaran Berikutnya dengan Informasi pengeluaran macau Malam Ini. Memakai informasi keluaran sangat terupadate, Kamu bisa melaksanakan studi pada hasil live togel yang hendak tiba, nah inilah mengapa informasi ini amat bermanfaat untuk Kamu para bettor.

Nilai Pengeluaran Togel Macau Live

Informasi pengeluaran macau 2021 Sangat Cermat, Web Sah Togel makau Tidak Dapat Dibuka. Perihal itu disebabkan pertaruhan merupakan aksi bawah tangan di Indonesia, hingga Kominfo juga memblokirnya. Tetapi hening, Kamu dapat menciptakan seluruh data sekeliling pertogelan di mari.

Informasi keluaran macau 2021, 2021, serta Sangat Terkini Hasil Dari macaupools. Informasi pengeluaran macau 2021 senantiasa kita segerakan buat di- update tiap hari dengan cara kilat serta pas. Laman ini merangkum banyak informasi macau 2021 terlengkap sah dari web pasaran togel macau, live macau tercepat, hasil togel macau, result live macau pools. Demikian informasi keluaran macau terkini buat hari ini.

source: https://templeofcuteanimals.com/live-draw-macau-terobosan-baru-dunia-pertogelan/
kbc head office number
Tags: kbc, kbcofficialwebsite, lotterywinner, luckydraw
Published: 2021-07-07 11:39:26

We are KBC officials we give all information about how to play kbc official game. You can contact with <a href="https://kbcwinneers.com/">kbc head office number</a> and on KBC official website.

You can get all information about kbc head office number, kbc whatsapp number, kbc official game, jio head office, whatsapp lucky draw, jio kbc head office number, kbc head office whatsapp number, kbc lottery winner on our <a href="https://kbcwinneers.com/">kbc official website</a>.
🏅 The 5 Visual Studio extensions that will increase your productivity
Tags: csharp, visualstudio, dotnet, programming
Published: 2021-07-07 11:22:00

Visual Studio… Who has not heard that name before? Today it is still one of the BEST IDE for any developer, since apart from being **free**, it supports Windows, iOS, Android, Cloud and Web. 💻

One of its greatest advantages is that it has a store with thousands of extensions, specifically more than 4000 today.

By now you may have asked yourself…

> Which are the best? 🤔

> Which ones would help me improve my programming performance? 🤔

I’m going to get you out of your doubts **right now** :)

---

## 1. Visual Studio Spell Checker ✅

This extension checks and corrects the spelling of comments, strings, and plain text as you program. It also makes it easy to spell check the entire project. I recommend this over similar extensions for 2 things:

- It supports many languages.
- You can **train** the extension to automatically ignore words like *app.config* as if it were an artificial intelligence to learn from you.

--- 

## 2. GitHub Extension for Visual Studio ✅

Who doesn’t know about *GitHub*? Who wouldn’t want to be able to connect their repositories with *Visual Studio*? This extension makes it **easy** for you. It allows you to **connect** with your team in a very simple way, apart from having **shortcuts** that will save you a lot of time.

Its main functions are 👇
- Create repositories
- Clone repositories
- Create Gists with 3 clicks
- See the Pull Request

---

## 3. Shield ✅

The main problem for many programmers is their lack of knowledge about the security of their applications. You may be developing the app of your life for years, but if you **don’t protect it properly**, anyone with a modicum of knowledge can decompile it, read its code, and **STEAL IT** in a matter of seconds.

*Shield* allows you to protect your application without having to be an expert in it. You configure it **only once** and you simply hit the compile button as you always do, *Shield* will take care of everything.

It has many types of protections such as👇

- Constant Encryption
- Anti Debugger
- Anti Tampering

---

## 4. ReSharper ✅

This extension has support for *C#, JavaScript, CSS, ASP.NET, VB.NET* and many more.

It allows you to improve the quality of your code quickly, detecting problems such as👇

- Compiler errors
- Runtime errors
- Redundancies

This extension has become one of my favorites since it not only highlights problems for you, but also suggests possible solutions instantly.

---

## 5. Image Optimizer ✅

Every day multimedia content is used more within applications, but users want it all now. What a person hates the most is having to wait for the app to load.

With this extension you can optimize image files such as *JPEG, GIF* or *PNG* with **just 2 clicks**.

It also has options such as 👇

- Best Quality
- Better compression
- Copy base64 DataURI

---
Responsive And Adaptive UI
Tags: reactnative, expo, beginners, jsx
Published: 2021-07-07 11:08:27


This is an absolute beginners post but would be useful if you are still switching devices one after the other to check and make corrections to your codes and also wondering how to display your screen layout based on certain conditions and screen sizes.

Often times we focus on developing using one mobile phone (irrespective of OS) or emulator and forget to check how our UI will respond when we launch them in other devices perhaps smaller ones. However, if you are developing for a particular screen size then you may disregard this post but if your intention is to cover a wild range of screen sizes then this is **CRITICAL!**
Long story short... How do we achieve this  **RESPONSIVENESS** in react-native?

Just like we use the *media queries in css* , we can use the *DIMENSION API combined with IF CHECKS and TERNARY OPERATORS*. But How?!.. Alright chill... 

##Steps
1. We need to first be able to monitor our code changes using different screen sizes Live. so let's say you have a 5.7" smartphone and Expo Go installed, you can install a 3.7" android emulator from android studio... IOS developers can set up different screen sizes with XCode ![emulator](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/5dct8507go7rmdmxve2f.png).

2. We must know the height and width of your target devices in pixels (density-independent pixel...react-native default unit).

import the Dimensions Api ```import { Dimensions } from 'react-native'``` 
to enable use use the ```Dimensions.get('window').height and Dimensions.get('window').width``` properties.

3. Combine these properties with some conditional statements to display your components, fonts, styles, margins, paddings etc to fit your monitors.

![if](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/gfssmwo1bxu7tzfegazz.png)
 
![ternary](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/l5khlbforpsa80g19faw.png)
 
That's all at the most basic level. This is quite simple and very helpful.
**Don't forget you can change almost anything**

Thanks for reading..
Extremely competitive pricing Uptime monitoring tool
Published: 2021-07-07 10:31:29

##What [Statusping](https://statusping.app/)  has to offer:?

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

Here is what Statusping has to offer: Uptime Monitoring, SSL Certificate Monitoring Performance Monitoring, and unlimited public/private status pages. Enjoy deeper control with String and Status code check, and also Monitor URLs with Custom Headers and basic authentication.

##Receive notification wherever you are
StatusPing offers integration with Email, Slack, Twilio, Teams, and Webhook to receive instant downtime notifications. We will also be working on a few other notification channels.




Here, the limited 20% offer. Use **08DFDC93** coupon code on checkout page.

To register : [Statusping](https://statusping.app/)
A solo VM lab
Published: 2021-07-07 10:23:21

I plan to build a IT lab contains serval VMs which I need to learn all in one PC box.

#### The technical stack to build this lab:

 - Hype-V - the Hypervisor for this lab.
 - Packer - the VM template builder, build VM template (Vagrant vbox) from ISO file.
 - Vagrant - the VM provision controller, make VM run from the vbox.
   
#### Network architecture in this lab
![Network architecture](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/sburdh9v7c6fzfjcxzuv.jpg)

Reason to build the gateway VM

 - Communitcate between host and VMs (seems the VMs cannot direct communicate to the host by default switch).
 - With DHCP services, I am no need to config VM IP address individually.
 - Set this gateway as a transparent proxy server, which means all machines are able to connect the TRUE internet through the gateway.

I will get start from the gateway VM.

to be continue
Flutter Beginners RoadMap (2021)
Tags: flutter, dartlang, android, firebase
Published: 2021-07-07 10:16:28

Hey Folks!

Do you want to learn flutter & don't know how to proceed your learning process? I have created a flutter roadmap for beginners. This helps you to learn flutter in 30 days (4 week).

[![Flutter RoadMap](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/rz1k475ipopg6w7emi30.png)](https://www.youtube.com/watch?v=I11fZRTiXGU)

Video: [Flutter Beginners Roadmap](https://www.youtube.com/watch?v=I11fZRTiXGU)

Register for ["Free Flutter Course"](https://appmaking.co)

### Flutter Beginners Roadmap

**Week 1**
- Installation
- Hello world
- Understand Widgets
- UI Widgets
- Layouts
- Flash Light App

**Week 2**
- Dart Basics
- Duplicate Any App
- Networking
    - Http CRUD
    - Upload / Download files
- Quiz App
- Motivational Quotes App / Recipe App / News App

**Week 3**

- Grocery App UI
- Packages
    - Camera
    - Geolocation
    - Google Maps

**Week 4**

- Complete Grocery App with Firebase Backend
- Firebase (Auth, FireStore, Storage, Push Notification, Cloud functions)
- Deployment


Register for ["Free Flutter Course"](https://appmaking.co)