Skip to content

Instantly share code, notes, and snippets.

View darnocer's full-sized avatar
👽
Greetings Earthling

Darian Nocera darnocer

👽
Greetings Earthling
10 followers · 16 following
View GitHub Profile
@darnocer
darnocer / smoothscrolling.md
Last active August 13, 2022 16:10
Smooth Scrolling Effect in CSS

Smooth Scrolling Effect

To add a "smooth scrolling" effect to a site, simply add this code to your CSS:

html {
  scroll-behavior: smooth;
}
@darnocer
darnocer / concatvue.md
Last active December 22, 2020 03:09
Concatenating a string with data-binding in Vue.js

Concatenating Data-Binding with Strings in Vue

Use single-quotes for the string within the double quotes like:

:property="'string' + data"

Example: :class="'skill-level--' + item.level"

Output:

@darnocer
darnocer / srcbind.md
Last active January 8, 2024 00:01
Fix Images Not Displaying in Vue.js

Images Not Displaying When Binding Data to :src with Vue

If you're using data binding to display an image with Vue.js, such as:

<img :src="'../assets/images/portfolio/' + item.image)" />

and the image is not displaying, it is because you need to require the path so that the string is recognized as a dependency:

@darnocer
darnocer / syntaxhighlighting.md
Last active April 2, 2023 17:36
Code Syntax Highlighting by Language in Markdown

Color Highlighting Code Syntax in Markdown

To add syntax color highlighting to your codeblock in markdown, specify the language or its alias after the first ```.

Example

```html
<body>
<h1>Hello World!</h1>
@darnocer
darnocer / emmet.md
Last active August 13, 2022 15:56
How to Use Emmet in VSCode

How to Use Emmet

Emmet comes with VSCode and autocompletes HTML.

(For the following examples, --> represents pressing the tab key.)

You can specify a .class or #id, which will expand into a <div> by default:

.class-name --&gt;
@darnocer
darnocer / scssabstract.md
Last active August 13, 2022 15:56
Variables, Mixins, Extends in SCSS

Variables, Mixins, and Extends in SCSS

Variables

// declare it
$text-color: red;`

// call it
font-color: $text-color;
@darnocer
darnocer / codepenblog.md
Last active December 22, 2020 03:03
Embedding CodePen Snippets

Embedding Codepen Snippets

Dev.to

{% codepen https://codepen.io/darnocer/pen/xxEqgQQ %}

Hashnode

%[https://codepen.io/darnocer/pen/xxEqgQQ]

@darnocer
darnocer / cssreset.md
Last active August 13, 2022 15:55
CSS Boilerplate Reset

Boilerplate CSS Reset Code For New Projects

The following CSS is a good "reset" for new projects

*,
*::after,
*::before {
margin: 0;
padding: 0;
@darnocer
darnocer / filetree.md
Last active August 13, 2022 20:18
File Directory Tree Structure

File Directory Tree Strucutre Example

├─ styles/
│  ├─ sass/
│  │  ├─ abstract/
│  │  │  ├─ variables.scss
│  │  │  ├─ mixins.scss
│  │  ├─ base/
│ │ │ ├─ base.scss
@darnocer
darnocer / collapsible.md
Last active August 13, 2022 15:55
Collapsible Section in Markdown

Collapsible Section for Markdown

<details>
  <summary>This is the summary</summary>
  This is the details
 </details>

Preview