Remove.BG

Tue Jun 20 2023 19:39:39 GMT+0000 (Coordinated Universal Time)

Saved by @SapphireElite #design #tasktools #designtools #image #image_edit #webassembly

https://www.remove.bg/upload

Save snippets that work from anywhere online with our extensions

Comments

Links

@SapphireElite

Remove.BG Custom Services - AddToAny URL & Title to Share - AddToAny GitHub | SapphireElite API — ImgBB

#css #design #gradient

How to Make a Linear Gradient in CSS

.gradient {
  background-image:
    linear-gradient(
      to right, 
      red, 
      blue,
      yellow, 
      green
    );
}

#css #design #gradient #webdev

Radial Gradient in CSS

.gradient {
  background-image:
    radial-gradient(
      yellow,
      #f06d06
    );
}

#css #webdev #design #gradients

CSS Repeating Gradients to Create Stripes or Radial patterns

/* Linear gradient pattern */

.repeat {
  background-image: 
    repeating-linear-gradient(
      45deg,
      yellow,
      yellow 10px,
      red 10px,
      red 20px /* determines size */
    );
}

/* Radial gradient pattern */

.repeat {
  background: 
    repeating-radial-gradient(
      circle at 0 0, 
      #eee,
      #ccc 50px
    );
}

#design #ui

undefined

https://blog.suhailkakar.com/best-design-resources-for-developers

#rust #design #patterns

Rust Design Patterns

https://rust-unofficial.github.io/patterns/intro.html

#css #footer #design

[CSS] Fixed Footer

footer {
  /* fixed bottom */
  position: fixed;
  left: 0;
  bottom: 0;
  width: 100%;
}

#css #design #forms

[CSS] Hiding arrows in Numeric Form Input

/* Chrome, Safari, Edge, Opera */
input::-webkit-outer-spin-button,
input::-webkit-inner-spin-button {
  -webkit-appearance: none;
  margin: 0;
}

/* Firefox */
input[type=number] {
  -moz-appearance: textfield;
}

html {
    background-color: peachpuff;

#css #design #div #center #imp

[CSS] Vertically & Horizontally Centered div

div {
  margin: 0;
  position: absolute;
  top: 50%;
  left: 50%;
  -ms-transform: translate(-50%, -50%);
  transform: translate(-50%, -50%);
}

#css #design #colors

[Color] Color Themes

theme-01: Primary(#0A192F), Secondary(#64FFDA), Font-1(#CCD6F6), Font-2(#8892B0)

#css #design #colors

[CSS] Media Queries (@abeerIbrahim)

/*EX:.container {
    padding: 0 15px;
// 576px window width and more
    @include sm {
        padding: 0 20px;
    }
// 992px window width and more
    @include lg {
        margin-left: auto;
        margin-right: auto;
        max-width: 1100px;
    } */
 
// Small tablets and large smartphones (landscape view)
$screen-sm-min: 576px;
 
// Small tablets (portrait view)
$screen-md-min: 768px;
 
// Tablets and small desktops
$screen-lg-min: 992px;
 
// Large tablets and desktops
$screen-xl-min: 1200px;
 
 
// Small devices
@mixin sm {
   @media (min-width: #{$screen-sm-min}) {
       @content;
   }
}
 
// Medium devices
@mixin md {
   @media (min-width: #{$screen-md-min}) {
       @content;
   }
}
 
// Large devices
@mixin lg {
   @media (min-width: #{$screen-lg-min}) {
       @content;
   }
}
 
// Extra large devices
@mixin xl {
   @media (min-width: #{$screen-xl-min}) {
       @content;
   }
}

#css #design #center

[CSS] Centering Text (Vertically & Horiziontally)

/* Vertically Centering Text */
.parent {
  position: relative;
}

.child {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
}

/* Horizontally Center */
.text {
  text-align: center;
}

#css #design #center

[Express] Boilerplate Code

npm init
npm install express express-generator exlint nodemon


// In package,json
"scripts": {
  ...
  "start": "node ./bin/www",
  "devstart": "nodemon ./bin/www",
  "serverstart": "DEBUG=express-locallibrary-tutorial:* npm run devstart"
  "lint": "eslint src/js"
  ...
}
  
// Express Skeleton using express-generator
express <appnam> --view=pug
cd <appname>
npm install
- Linux: 		DEBUG=express-locallibrary-tutorial:* npm start
- Powershell: 	DEBUG=express-locallibrary-tutorial:* npm start

const mongoose = require("mongoose");
const Schema = mongoose.Schema;
const dateFormat = require("dateformat");

const AssignmentSchema = new Schema({
  title: { type: String, required: true },
  description: { type: String, required: true },
  deadline: { type: date, required: true },
});

AssignmentSchema.virtual("date").get(function () {
  return dateFormat(this.timestamp, "mmmm dS, yyyy, h:MM:ss TT");
});

module.exports = mongoose.model("Assignment", AssignmentSchema);

#fluent #builder #design

VB.NET Fluent Builder Design Pattern - TechNet Articles - United States (English) - TechNet Wiki

https://social.technet.microsoft.com/wiki/contents/articles/52583.vb-net-fluent-builder-design-pattern.aspx

#design #tasktools #designtools #image #image_edit #webassembly

Remove.BG

https://www.remove.bg/upload

#design

Quick Color

https://sbvahbqbyx.postedstuff.com/V2-YjGo-BDRK-UahQ-BShY/