DEV Community: Drozerah

No comment...

Drozerah — Wed, 14 Oct 2020 17:37:53 +0000

Available at Google Icons

What is the french translation of "stub" in the field of programming ?

Drozerah — Thu, 16 Apr 2020 19:51:13 +0000

Literal translation is not enough to understand such a programming notion...

What is your everything files or folders naming convention ?

Drozerah — Tue, 03 Mar 2020 12:46:13 +0000

Hi,

I'd like to know what is your files and folders naming convention if you have one ?

hello_world.ext
hello-world.ext
hello.world.ext ...

Can you explain your preference in the way to fit best to that data programming world we are living in ?

Thanks

Make your `console.life` easy !

Drozerah — Thu, 27 Feb 2020 10:33:20 +0000

Using Better Comments and a VSCcode snippet we can achieve this :

VSCode Snippet:

    "Console.log()": {
        "prefix": "clg",
        "body": [
          "console.log('$0') // !DEBUG"
        ],
        "description": "Console method log()"
    }

What we have now is a [clg + enter] autocomplete with a red colorized debug comment that highlights your debugings :)

easy to use and configure
no more time consuming looking for lost console.log in your code
code readability improvement

Be proud !

CSS - Center both vertically and horizontally

Drozerah — Wed, 24 Jul 2019 17:52:35 +0000

Say you have a HTML <body></body> tag and you want its child <div></div> to be centered both vertically and horizontally with modern CSS : how to achieve that ?

index.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <link rel="stylesheet" href="/css/style.css">
</head>
<body>
    <div>
        <h1 class="title">Hello DEV!</h1>
    </div>
</body>
</html>

Flexbox says :
style.css

CSS Grid says :
style.css

Voilà!

See you next time!

Drozerah

Vue.js SVG Responsive Component

Drozerah — Tue, 02 Jul 2019 18:42:32 +0000

Simply Demonstrate a Vue.js component that returns a .svg file passed to the component as a property + turn the img html tag into a responsive/adaptative element using CSS rules

Method:

we use a computed property to work with the SVG file into the component.

note: Computed properties sit halfway between properties of the data object and methods: we can access them as if they were properties of the data object, but they are specified as functions...

we create a computed property function that returns the .svg file path using the require() method to access the assets folder
we create the full path to the .svg source file using the value stored/passed as the property (props) of the component this.SVGFile
we use the ES6 template literal syntax to construct the full path dynamically...
we bind the value of the computed property to the src attribute of the img html tag...
the responsive-img CSS class will let the img tag to automatically fit the size of its parent container

component src\components\SVG-image.vue

<template>
    <img class="responsive-img" alt="JS logo" :src="path">
</template>

<script>
export default {
  name: 'SVG-image',
  props: {
    SVGFile: String
  },
  computed: {
    path(){
      return require( `@/assets/svg/${this.SVGFile}`)
    }
  }
}
</script>

<style lang="scss" scoped>

.responsive-img{
  max-width: 100%;
  height: auto;
}

</style>

Using the component src\App.vue

<template>
  <div id="app">
    <main>
      <SVGImage SVGFile='logo-js.svg'/>
    </main>
  </div>
</template>

<script>
import SVGImage from './components/SVG-image.vue'

export default {
  name: 'app',
  components: {
    SVGImage,
  }
}
</script>
//...

Check it out !

Get a local copy of this repository

$ git clone https://github.com/Drozerah/vue-svg-responsive-component.git

Project setup

$ npm install

Compiles and hot-reloads for development

$ npm run serve

Compiles and minifies for production

$ npm run build

Once you are done with the compilation, simply:

$ cd dist

Then go live your index.html with your local development server...

That's it!

Vue.js SVG Responsive Component

Thanks for reading!

See you next time!

Drozerah

VSCode Snippet your ES6 template literals!

Drozerah — Sat, 22 Jun 2019 08:46:30 +0000

The more you use ES6 template literals into your console.log() - like I do -, the more you need your VSCode snippet! Do not repeat yourself writing the same template!

const greetings = "Hello"
console.log(`${greetings} the DEV community!`) // Hello the DEV community!

Creating your own snippet with VSCode is easy:

VSCode > File > Preferences > User Snippets > New Global Snippets file

then, select the language you want the snippet to be available for, JavaScriptin our case, copy and past your snippet syntax as .json format:

{}javascript.json VSCode file

//...
"Template literals to console": {
    "prefix": "clgt",
    "body": [
        "console.log(` ${$0}`)"
    ],
    "description": "Template literals to console"
}
//...

This is it !

Now, in any .js file you are working on, simply type the snippet prefix clgt an press Tab to insert a new snippet into your code. Don't forget to enable the tab completion of your editor first "editor.tabCompletion": "on".

Tip => snippet generator

Next step?

Have fun & Be creative!

Thanks for reading!

See you next time!

Drozerah

CLI Starter says Hello World!

Drozerah — Thu, 20 Jun 2019 17:52:09 +0000

To the community,

Hi there! This short message to let you know cli-starter boilerplate is born this sunny day!

This material comes with the minimum settings and files that are required to start the creation of a new CLI utility with a Node.js and NPM environment...

Give it a try!

Structure

├───bin/
│   └───cli.js
├───.gitignore
├───licence
├───package-lock.json
├───package.json
└───README.md

Install

$ git clone https://github.com/Drozerah/cli-starter.git

Then install globally:

$ npm install -g

Once you are done with this step, you need to:

$ npm link

This command will register your CLI project locally so you are now able to run the command below anywhere into the terminal:

$ cli-starter

This command will prompt a message into the terminal meaning that everything is fine with the installation of cli-starter:

That's it!

Next step?

Fork it & Be creative!

Thanks for reading!

See you next time!

Drozerah

Find the largest number in an Array - one line

Drozerah — Tue, 18 Jun 2019 19:27:00 +0000

Spread that out !

README.md fix typo + English syntax

Drozerah — Tue, 21 May 2019 15:57:17 +0000

Hi !

Today I've published a GitHub repository, and because I must improve my English and because it's not my first language, I need any help ! If you are English fluent or if you are a native English writer, would you like to check this README.md and give any feedback in order to fix or improve it ? Thank you !

Drozerah from France

Get App, stand app!

Drozerah — Tue, 06 Mar 2018 10:55:42 +0000

Hi there! I’ve coded a quotes generator on the field of programming as a training subject... The engine is based on a simple page that returns quotes randomly with some HTML5, CSS and Vanilla.js implementation …I don’t know if it must be more efficient, but it works well for that purpose.

Not only returning quotes, I ‘have added a Twitter share button that opens a pre filled input text in a pop up (quote text + tags + page link), like originals Twitter buttons do usually using meta properties (not in my case)… I’ve also added a CSS transition between quotes when a user asks for a new quote.

During the engine construction, I realized that it was a nice experience to be exposed to and read all the quotes and dive into it, kind of meditative way of coding something… So, I decided to share it with you as social experimentation, thinking to myself: “Hey! It would make sense if other concerned people could enjoy adding quotes to the list, read them, and dive into it like I did!”

Anyway, at the actual state of its development, the engine can’t be really called “Application”, no form added, and a simple JS object to store the data, so, at that point, you can’t post anything but!

Feel free to request for new quotes - that make sense to you - using the form bellow this article, so that, I’ll be able to add them to the database witch is not a database. You can also open pull requests directly using the related GitHub repository which is a nice way to add quotes too...

https://quotes-on-programming.netlify.com/

Thank you all for reading, sharing, comment or participate!

Drozerah

ANTISOCIAL

Drozerah — Thu, 08 Feb 2018 09:46:20 +0000

What is the futur of FaceBook, Instagram, Twitter or Tinder? We don't know - we don't care? Andrei Lacatusu got his own idea... Since Google just had its 20 years old, the Romanian artist symbolizes the fall of giants of the Silicon Valley in a serie called “Social Decay” where he imagines their decrepit signs. Must we see the death of social networks on it... and the rise of a real social cohesion?
See the entire serie on Behance