teleren/devto huggingface dataset:
You want enabling CSS selectors, not disabling ones
Tags: css, webdev
Published: 2021-12-17 11:10:29

An enabling selector is what I call a selector that does a job without disabling the particular rule. I'll explain using the following example.

Let's say we have list items and we want to add the margin to the last one.

```html
<ul>
  <li>Item 1</li>
  <li>Item 2</li>
  <li>Item 3</li>
  <li>Item 4</li>
  <li>Item 5</li>
<ul>
```

Here's the usual, disabling way.

```css
li {
  margin-bottom: 1em;
}

li:last-child {
  margin-bottom: 0;
}
```

First, we add `margin-bottom` to all elements. Then, we disable the bottom margin on the last element. I call this technique disabling selector since the `li:last-child` selector disables the previous selector's rule.

But we could do better using enabling selectors.

```css
li:not(:last-child) {
  margin-bottom: 1em;
}
```

The selector `li:not(:last-child)` is enabling `margin-bottom` on all elements except the last one. There's no need to disable anything. That is much readable and maintainable if you ask me.

Here's another version of the enabling selector for the same example.

```css
li + li {
  margin-top: 1em;
}
```

In this version, we add `margin-top` to all elements that have a previous sibling, which means to all elements except the first one, which doesn't have a previous sibling.

There you have it, enabling selectors that do a better job in less code. Here's the demo:

{% codepen https://codepen.io/CiTA/pen/WNogPdB default-tab=css %}
Some tip for Laravel 8.76
Tags: php, laravel, beginners, programming
Published: 2021-12-17 10:57:10

Let's start quickly
I found some tip that I thought would be useful for you.
afterRefreshingDatabase method you can use in tests when you want to seed some data in a test directly after running migrations 
```php
abstract class TestCase extends BaseTestCase
{
    use CreatesApplication;
    use LazilyRefreshDatabase;
 
    protected function afterRefreshingDatabase()
    {
        $this->artisan('db:seed', [
            '--class' => RoleAndPermissionSeeder::class
        ]);
    }
}
```
forbidden() and unauthorized method to the Response class. These methods clean up logic around these statuses nicely
```php
// Before
if ($response->status() === 401) {
    // ...
}
 
if ($response->status() === 403) {
    // ...
}
 
// After
if ($response->unauthorized()) {
    // ...
}
 
if ($response->forbidden()) {
    // ...
}
```
invisible modifier support, introduced in MySQL v8.0.23. When columns are marked as invisible, they are not implicitly (i.e., SELECT *) and thus not hydrated in Laravel models. These columns can still be explicitly selected, making it useful to omit unless you explicitly need the data
https://dev.mysql.com/doc/refman/8.0/en/invisible-columns.html
```php
Schema::table('users', function (Blueprint $table) {
    $table->string('secret')->nullable()->invisible();
});
```
finally :- substrReplace() to Str and Stringable classes
```php
// Insert a string at a certain position
$string = '1300';
 
$result = Str::substrReplace($string, ':', 2, 0);
// '13:00'
 
// Replace the remainder of a string
$result = (string) Str::of('Laravel Framework')
    ->substrReplace('– The PHP Framework for Web Artisans', 8);
// 'Laravel – The PHP Framework for Web Artisans'
```
I hope you enjoyed the code.
Source :- https://laravel-news.com/laravel-8-76-0
Code review
Published: 2021-12-17 10:43:47

My code review activities for Seneca College's internal open source projects will be detailed in this blog.

This is my first experience reviewing code on GitHub, and it's both exciting and informative. Code review is the act of actively and methodically meeting with one's fellow programmers to examine each other's code for errors, and it has been proved to speed up and simplify the software development process in ways that few other methods can.

## Reviewing
Reviewing two PRs from a classmate is one of the duties for this project. The PRs, as well as my reviews, are available [here](https://github.com/Seneca-CDOT/telescope/pull/2624) and [here](https://github.com/Seneca-ICTOER/IPC144/pull/147). Both of the PRs I reviewed were really well-written and detailed, with very few mistakes. It was interesting to observe how different people approached certain changes, such as adding a svg file.

## Learnings
I have learned that code review helps in many ways. some of which are Minimizing your mistakes and their impact, Improving code performance, Sharing new techniques and learning for other coder/contributor. This becomes much more critical as the project grows in size and complexity. As I previously indicated that this is my first time reviewing code, the PRs were not particularly complicated, thus the reviews were a touch simple, but it was a good first step into doing the first code review.
Number one question on every PHP interview 
Tags: programming, webdev, php, beginners
Published: 2021-12-17 10:40:27

I am a PHP programmer and have been on many job interviews. I noticed that on each of them one question always came up.

That question is:

**What's the difference between abstract class and interface?**

The answer to this question is simple and proves the candidate's familiarity with object-oriented programming.

So let's compare these two:

##Abstract class

- It can provide some functionality and leave the rest for the derived class.
- The derived class may or may not override the concrete functions defined in the base class.
- A child class extended from an abstract class should logically be related.

To declare class to be abstract just simply `abstract` before `class` keyword

##Interface

- It cannot contain any functionality. It only contains definitions of the methods.
- The derived class MUST provide code for all the methods defined in the interface.
- Completely different and non-related classes can be logically grouped together using an interface.

To declare interface use `interface` keyword

```
interface Template
{
    public function setVariable($name, $var);
    public function getHtml($template);
}
```
Solving day 16 of Advent of Code 2021 in JavaScript
Tags: challenge, adventofcode, javascript, video
Published: 2021-12-17 10:35:25

---
title: Solving day 16 of Advent of Code 2021 in JavaScript
published: true
description: JavaScript walkthrough of Advent of Code 2021 (day 16)
tags: challenge, AdventOfCode, javascript, video
series: Advent of Code 2021 in Javascript
---

{% youtube w2gjRvKIVuo %}
How Structure Light Technology is working to find the depth measurement of objects
Tags: machinelearning, opensource, datascience, deeplearning
Published: 2021-12-17 10:25:45

Hi Guys
I am working on to find the depth measure of parcel boxes of different dimensions like amazon had and the major challenge is to find the depth measurement.

One of the example product in the market is orbbec 3d camera & microsoft konnect working on the same principal,want to understand the inner working how image is getting processed with respect to phase shift & you can find reference from this article https://www.roboticstomorrow.com/article/2018/04/what-is-structured-light-imaging/11821
Test Orchestration: What, Why, and How
Tags: testorchestration, testautomation, tests
Published: 2021-12-17 10:20:18

In the agile development methodology, the velocity of testing holds the key to delivering the best quality software within the stipulated budget and time constraints. As such, this drives the need to automate the testing process. Most software development teams visualize test automation as a discreet step in the delivery lifecycle instead of viewing it as a designed sequence of steps. There are various aspects of testing through which software needs to pass, such as unit testing, functional testing, integration testing, smoke testing, performance testing, and more. Each of these needs to be automated in order to achieve certainty of software behavior and reduce the time to test. However, simply automating the tests is not enough to achieve the desired levels of quality and reduction in the time and cost to get there. This is where test orchestration plays an essential role.
[Continue reading](https://www.katalon.com/resources-center/blog/test-orchestration/)
The role of AI in the metaverse
Tags: javascript, webdev, beginners, react
Published: 2021-12-17 10:16:39

The current breakthroughs can’t be attributed to being a historical precedent as this leap in quantum technology is responsible for the growth of areas such as Artificial Intelligence, Machine Learning, Internet of Things. Artificial Intelligence (AI) is the main technology that will help drive the development, help, and aid in the realization of the idea of the metaverse. Its existence AI can be observed at every level of this shared 3D space. AI-powered systems are able to learn from information and become more intelligent through experiences, delivering a precise and personalized experience for users. These two elements are the driving force behind the development in the metaverse towards worldwide acceptance. and VR and spatial computation will bridge the space between the physical and the digital world, engulfing all aspects of our lives with technology.
The Arrow Function in JS!
Tags: javascript, tutorial
Published: 2021-12-17 10:14:06

Hey **fellow creators**

The *arrow function* exists since 2015 and is quite different from the classic functions. Let’s see how !
 
If you prefer to watch the video **version**, it's right here :

{%youtube O6lMYOT6XLs%}

##1. How to use an arrow function.

Here is the basic syntax, we don't need the "function" keyword and we put it by default in a constant, that way we won't have hoisting issues.

```js
const add = (a,b) => {
	return a + b;
}

console.log(add(2,2));

```

If you have just a return, you can use the short version.

```js
const add = (a,b) => a + b;
```

If you have one parameter (but only one), you can remove the parenthesis which would make it even more concise:

```js
const add = a => a;
```

It’s very useful when you use it with some higher order function like the *map.()* method:

```js
const multiplied = array.map(num => num * 2)
```

##2. The difference between a classic function and an arrow function.

The main difference between the classic and arrow function is the value of "this".

If you use a classic function as the value of a property in an object, "this" will refer to the calling context, i.e. the obj where the function is defined :

```js
const obj = {
	a: 5,
	foo: function() {
		console.log(this)
	}
}

obj.foo() // {a: 5, foo: ƒ}
```

Otherwise, if you use an arrow function, "this" will return the global object.

```js
const obj = {
	a: 5,
	foo: () => {
		console.log(this)
	}
}

obj.foo() // Window Object
```
In that case, this will refer to the parent of the calling context, thus the global object.

Instead of refering the direct context, it will refer to the parent of that context.

You need to keep that difference in mind when you are dealing with functions and the "this" keyword.
 

Come and take a look at my **Youtube channel**: https://www.youtube.com/c/TheWebSchool


Enzo.
Chain of Responsibility Pattern | Design Patterns in Java
Tags: java, beginners, programming, codenewbie
Published: 2021-12-17 10:13:58

Behavioral design pattern: Watch a Java implementation of the Chain of Responsibility Pattern which passes a request/command along a chain of potential handlers/processors until one of them handles request. In this example a chain of logging objects can log to either file, database or console. The client sends a command to the chain and it runs down the chain until a processor can handle the requested logging type. Bonus info: The Chain of Responsibility Design Pattern is also one of the Gang of Four design patterns.

{% youtube 0gIZoplAATk %}
What are the best WordPress support services available?
Tags: webdev
Published: 2021-12-17 10:11:01

If You are looking for the best WordPress support services then here are the most common 4 services that you can try:
 
•	WP Buffs is one of the most common 24/7 WordPress maintenance and management support services.
•	FixRunner is an affordable and the best WordPress help and support service. 
•	WP Site Care is one of the best WordPress support and maintenance services that you can try.
•	If you are facing any issue in WordPress then WP Tech Support is a WordPress help and support service.
https://www.wordpresssupport.co/
Whatsapp Plus with new development features on the app
Tags: whatsapp, javascript, programming
Published: 2021-12-17 09:53:09

Whatsapp Plus is whatsapp modded with several extra features which are not available in whatsapp. Whatsapp Plus is one of the most downloaded application for android smartphones till date. This application reaches towards its full capacities when combined with whatsapp web . Lets see about whatsapp plus in detail...

Features added in [whatsapp plus original](https://whatsappplusdownload.com) are much useful than WhatsApp Messenger app itself ..

Some of the features added in whatsapp plus are as follows:
-You can hide your last seen, blue ticks, gray ticks. 

-You can change the app icon and notification badge. 

-You have more control over what you share on WhatsApp including photos, videos and contacts. 

-You can set a status for how long you want it to be displayed instead of just a one-time thing. 

-You can add effects to your photos and videos before sending them. 

-Group admins can now invite people to join groups without having to add them first. 

There are many more features that whatsapp plus offers which are not available whatsapp, so if you are looking
What is exactly working for a big software company?
Tags: beginners, programming, healthydebate
Published: 2021-12-17 09:49:26

First 🤔, let me try to explain what is the meaning of _big software company_, it means work in an environment where everyday let us some **learning**, an environment where you really understand what **working in team** means exactly, 👨🏼‍💻.

Yes, software company is one of the most important piece of this **society**, all the **staff** you know is made by them 😇, _bank, social networks ...._, all this staff is needed for your lifestyle, isn't it? You need to think that your life depends on these **software companies**, try to remember what happen when WhatsApp, Facebook or Instagram is **down**, I know you didn't know what should have you done 😅. 

Really, working here is 

```js
for (let i=0; i<œ; i++) {
  console.log("so");
}

Yes, inline **_so_** later, really stressful, you don't mind what are you working on, you only send and send **build**, like _apples are sold _, 🤤 but, I really love it, it has allowed me to learn a lot, mainly from my partners but also from the other teams (UI/UX/BEND). It's really 🤒 enjoyable working in an environment where everyday you see _200-300_ commits, your mailbox is saturated, it's impossible to check all this staff, to be sure that you are up to dated of all the future which are being introduced, it's really difficult, I mean, it's **impossible** 😵‍💫.

I won't change my **life**, I have found a business where my tech lead 🤧 is _incredible_, near of him I feel strongly unused, he always thinks in the perfect approach, never mind, he always keep all the **features** included. I'm here for the last two months but I have just learnt things I have never mind of their **existence** 🎃, this is exactly what's working on a big software company looks like. 

I really recommend you don't working on a determinate company only by money, it's a _mistake_, probably you have just rejected tons of opportunities without **taking** care about who are working there 😄. I mean, I know that all the things I have learnt I those two months cost thousand of €, but I received it **free and personalised **, it means don't chose a work only by money, chose a work because you are sure about when you'll working on, you can look for information about your future teammates and keeping up to date about what will you working on.

It's my real advice about how to work on a big software company, keep in mind these advices. If you really like this post please don't forget to share with your friends 💀
final release 0.4
Published: 2021-12-17 09:49:00

In the final blog, I am now writing about bringing the code together, testing and PR.

I brought the whole code together, which look like this 
```
/**
@example
``
import {isEqualType} from 'ts-extras';
const isEqual = isEqualType<ExpectedType, ActualType>();
``
*/
export type IsEqual<ExpectedType, ActualType> =
	(<T>() => T extends ExpectedType ? 1 : 2) extends
	(<T>() => T extends ActualType ? 1 : 2)
		? true
		: false;

function assertType<T extends boolean>() {
}

export function isEqualType<T, G>(): boolean;
export function isEqualType<T, G>(value : G): boolean;
export function isEqualType<T, G>(a: T, b: G){
	return assertType<IsEqual<IsEqual<T, G>, true>>();
}
```

now one of the main task was to be done to test and check if our code is working or no. 
The project is already using testing framework `xo` and `ava` so now I only had to take a look at the testing style in xo and ava and write my test cases. 
Finding how to do the test cases was also a bit difficult as I did not have clear idea to what kind of cases to write and compare since there are many types that can be wrote. I then went back to the internet where I can find the way people how other projects were done testing. I tried to get a summary understanding of it started implementing it and after a few additions and subtraction, I came up with my test cases and was ready to test. Well of the cases do pass and covers a broad spectrum of possible cases, but I doubt I might have missed special cases. The good thing is it covers over 99% cases but I am looking forward to search for that 1% of case I have missed. 

The test cases look like this:
```
import test from 'ava';
import {isEqualType} from '../source/index.js';

test('isEqual()', t => {

    t.true(isEqualType<1, 1>());
    t.true(isEqualType<any, any>());
    t.true(isEqualType<unknown, unknown>());

    t.false(isEqualType<{}, {x:1}>());
    t.false(isEqualType<1, 2>());
    t.false(isEqualType<1, any>());
    t.false(isEqualType<1, unknown>());
    t.false(isEqualType<any, unknown>());

});
```

I then updated the readme page and push my commits and created a PR
10 Tailwind resources for you to make better websites
Tags: javascript, webdev, css, programming
Published: 2021-12-30 15:32:29

---
title: 10 Tailwind resources for you to make better websites
published: true
date: 2022-01-10 09:47:09 UTC
tags: javascript, webdev, css, programming
cover_image: https://d6f6d0kpz0gyr.cloudfront.net/uploads/images/_1200x630_crop_center-center_82_none/tailwind-thumb.jpg?mtime=1609771799
---

Tailwind CSS is a "utility-first" CSS framework that provides a deep catalog of CSS classes and tools that lets you easily get started. Rather than focusing on the functionality of the item being styled, Tailwind is centered around how it should be displayed.


1️⃣ Pallete Generator

Color palette generator that outputs Tailwind CSS configuration files.

[https://adevade.github.io/color-scheme-generator](https://adevade.github.io/color-scheme-generator)

2️⃣ tail-animista

Configurable custom animation utility generator for Tailwind CSS.

[https://tail-animista.vercel.app/](https://tail-animista.vercel.app/)

3️⃣ Flowrift

Beautifully designed Tailwind CSS UI blocks.

[https://flowrift.com/](https://flowrift.com/)

4️⃣ Windframe

Tailwind CSS drag and drop builder to rapidly build and prototype websites.

[https://www.devwares.com/windframe/](https://www.devwares.com/windframe/)

5️⃣ Windy

Browser extension to convert HTML elements to Tailwind CSS.

[https://usewindy.com/](https://usewindy.com/)

6️⃣ Updrafts.app

Advanced online no-code drag and drop editor for Tailwind CSS.

[https://updrafts.app/](https://updrafts.app/)

7️⃣ Play

Advanced online playground for Tailwind CSS.

[https://play.tailwindcss.com/](https://play.tailwindcss.com/)

8️⃣ Tailwind Cheat Sheet

Tailwind CSS utility class names in a searchable interface.

[https://flowbite.com/tools/tailwind-cheat-sheet/](https://flowbite.com/tools/tailwind-cheat-sheet/)

9️⃣ Beginners to Advanced Tailwind Course

An all-in-course for people to start learning Tailwind or brush up their knowledge.

[https://www.youtube.com/watch?v=lZp4salRFFc](https://www.youtube.com/watch?v=lZp4salRFFc)

🔟 Wicked Templates

Your one-stop shop for Tailwind Templates and components.

[https://wickedtemplates.com](https://gumroad.com/a/387208307)

### Thank you for reading

If you liked this post, subscribe to our newsletter to never miss out on our blogs, product launches and tech news.

[Subsribe to Visualway's newsletter](https://tinyletter.com/visualway)
Monokle 1.4.0 improves K8s resource creation and editing

Tags: kubernetes, kustomize, helm, opensource
Published: 2021-12-17 09:43:48

Hi everyone - happy to share our recent Monokle release with a bunch of new features and bug-fixes primarily focused on the creation and editing of Kubernetes manifests without having to know any YAML (!)

Check out the full list of new features at https://medium.com/kubeshop-i/monokle-1-4-0-4122e88742c5 and download the latest release/installers from GitHub - https://github.com/kubeshop/monokle - and be sure to let us know how it works for you - and how it can be made even better.. 

Thank you!
Planning for release 0.4
Published: 2021-12-17 09:35:59

For release 0.4, I had to work on something bigger and something difficult. This blog is divided into 2 other blogs; Preparing for release 0.4, working on release 0.4 and final release.

## Looking for a Project and issue
I always wanted to contribute to a project which is turning big. I tried to looking around alot finding such project, later I recalled about a project that got my attention during Hacktober but I did not do it because it was way to big for me to understand. The project is [ts-extras](https://github.com/sindresorhus/ts-extras). I think it is a big project since its developer [sindresorhus](https://github.com/sindresorhus) is a professional open source contributor and has given many npm packages to the community. I want to be in one of his projects. Although he is currently working on many projects and packages, I choose this because this package is not large in size but very useful for everyone that gives Essential utilities for TypeScript projects. It helps in things like finding is-empty, is-finite, assert-error and other functionalities of a typescript project. Now, there was one more such functionality to be added to the project of is-equal. I thought to work on it.

## Understanding the Issue
It might sound easy in the first and thats one of the reason I was attracted to during Hacktober fest(my early days of opensource development) but I later found out that it needs much more typescript and programming knowledge than the few lines of code. This is because comparing to varibales, types and a variable and type is not easy when you dont have a function or module to help you. And yes thats correct, this issue aims in building that function so that it would be easier to comparing those things in the future.

## Planning
Although I do not have expert knowledge of typescript, my aim was to contribute to this issue. I started by finding online help and blogs that can help in better understanding and some idea of the solution but there no great content that can I found that can help me with this issue as those discussion on the internet were making use of helper module to solve it and those helper modules were very complex and had 1000s of line of code which was not allowed in the project(the project is made to make work simple and easily modifyable). But, reading those discussions did help me understand how people are using such functions and gave me an idea of how the end result should look