Forem: Armin Arlert

About DEV SHOP Orders

Armin Arlert — Fri, 29 Jan 2021 05:46:27 +0000

Hi all!

About 40 days ago I placed an order from DEV Shop. I sent 2 e-mails to yo@dev.to but did not receive any feedback. I cannot get any information about whether my order will arrive or not, or its status. Is there any other address you know I can contact?

Thanks

2 Basic Things for Powerful SEO and Social Media Sharing

Armin Arlert — Fri, 03 Apr 2020 10:23:38 +0000

Hi guys,

This article was originally published at sfb.dev

In the last one or two months, I spent a lot of time working on SEO optimization in the company I work for. I was very happy that these efforts were not wasted and the improvements I made were useful. Today I will talk about open graph(og) tags and google structured data that i developed and implemented in this process.

Open Graph

What is Open Graph ❓ 😵

Open graph is a protocol that fully reads tags. It creates a preview of your content thanks to the tags you give it and allows you to create more attractive shares.

In the past, when you shared a link on sites like facebook or twitter, the system would choose any image and content description from the link and showed it. The system could choose any ridiculous image. For example, social media links on footer. Open graph is a protocol developed to solve this problem. For example, you can choose the description, image and title that will appear when you share a blog post on Twitter, thanks to the open graph.

Open graph is currently a protocol adopted by many major platforms such as Facebook, Youtube and Twitter.

Open Graph Tags

The 4 tags below are enough tags to create a basic preview. In addition, you can see all other tags from here.

<meta property="og:title" content="PAGE TITLE" />
<meta property="og:description" content="PAGE DESCRIPTION" />
<meta property="og:url" content="PAGE URL" />
<meta property="og:image" content="PAGE IMG" />

Also, you can use Twiter Card Validator and Facebook Sharing Debugger to how your links will look on facebook and twitter.

Google Structured Data

What is Google Structured Data❓

Google structured data is a type of data used to give hints to the google bots to understand the page. By providing information about the page, you can help google to classify your page.

If you want to be with enhanced views on Google Search, you need to add all the features required. Defining more recommended features can make you stand out from these searches. However, it is more important to provide fewer but more complete features rather than entering a missing or incorrect feature.

Google can also use schema.org and sameAs property. Some of these can be used to provide search features if the benefits are seen.

I took the photo from Google Developers
As you can see in the picture, when each feature of the recipe is labeled separately, users can search for the recipe using ingredients, calories, cooking time and other features.

Google structured data supports the following formats:

JSON-LD (suggested)
Micro Data
RDFa

Google Structured Data Rules

There are certain rules for adding structured data to google search results. If these rules are not followed, google can reduce the popularity of your site or It might mark your site as spam.

I have listed some of these rules from by the Google developers page

Rule
1. Provide updated information. Google, no longer show rich snippets for time-sensitive content that is not relevant.
2. Provide original content created by you or your users.
3. Don't flag irrelevant or misleading content, such as fake comments or content that has nothing to do with the main idea of the page.
4. Do not use structural data to deceive or mislead users. Do not imitate any person or institution
5. Indicate all the features required for your rich result type. Items with missing required features are not suitable for rich results.
6. If you have duplicate pages for the same content, place the same structured data on all copies of the page, not just the standard page.
7. Try to use the most obvious valid type and feature names defined by schema.org for your markup.
8. All image URLs must be crawlable and indexable. Otherwise, Google Search cannot find them and display them on the search results page.

Define the Type of Structured Data

To define the type of structured data;

Open A script tag of type application/ld+json into the head.

<head>
 <script type="application/ld+json">

 </script>
</head>

Let's add the tag indicating that you will use schema.org in the script tag.

<head>
 <script type="application/ld+json">
  {
   "@context": "http://schema.org/",
  }
 </script>
</head>

To tell Google what you explained.

<head>
 <script type="application/ld+json">
  {
   "@context": "http://schema.org/",
   "@type": "Website"
  }
 </script>
</head>

Above we see an example of structured data in its simplest form. You can review schema.org to add the suggested features.

I will share an example of how the Organization scheme looks like below.

<head>
 <script type="application/ld+json">
  {
   "@context": "http://schema.org",
   "@type": "Organization",
   "description": "Personal blog by Şefik Furkan Bayram. Furkan is a frontend 
    developer specializing in UI Design and JavaScript. He has been developing 
    web apps since 2018.",
   "url": "https://www.sfb.dev/",
   "contactPoint": {
    "@type": "ContactPoint",
    "telephone": "+905465459634",
    "contactType": "Personal"
    },
   "sameAs": [
    "https://www.twitter.com/sfbdev/",
    "https://www.dev.to/sfbdev/",
    "https://www.github.com/sfbdev/",
    "https://www.linkedin.com/in/sefikfurkanbayram/"
   ]
  }
 </script>
</head>

Validate the structured data

Finally, to test Google structured data you should use Structured Data Testing Tool. You can make your test either by URL or by adding code snippet.

If you are still here thank you for reading :)

Font family recommendation

Armin Arlert — Tue, 31 Mar 2020 06:49:11 +0000

Hi everyone ☕

In theese days, I work remotely because of the pandemic. So I have a little more time in the morning and I spend this time having breakfast in front of the computer and review the codes I wrote. I noticed that I was bored with the font family I used this morning. I think I need to change this to increase my productivity :) I am currently using "Consolas, 'Courier New', monospace". Which font family do you use when writing code? By sharing here, we may increase someone's productivity.

My code editor looks like below

What is CSS Preprecessor? (for begginers)

Armin Arlert — Thu, 26 Mar 2020 01:19:15 +0000

Hello to everyone ⭐

Today I will give information about SASS and SCSS from CSS-preprocessors.

What is CSS Preprocessor ❓

Preprocessors provides us opportunities such as creating functions, defining variables, using operators while writing CSS as in programming languages.

There are 3 preprocessor that are popular right now. These are SASS, LESS, and Stylus . In this article, I will talk about SASS and SCSS .

What is SASS ❓

SASS is a Ruby Gem that started to be developed in 2006 and aims to write CSS in a language close to the Ruby language. It is currently being developed as an open source technology.

We wouldn't expect CSS to remain an old technology in the constantly evolving software world. Thanks to SASS we started dynamically writing CSS, and making advanced animations without including javascript on our pages has become easier and simpler thanks to SASS.

SASS is an extension language. It is a technology that allows us to write our work with CSS easier, faster and more readable. It is written with a Ruby-like syntax and these codes are converted to CSS.

What is SCSS ❓

SCSS is SASS more like CSS as syntax.

Developers accustomed to writing CSS were having trouble writing SASS because no parentheses and semicolons were used when writing SASS. For this reason, using SCSS , brackets and semicolons are back. Syntax look a bit more like CSS.

Why Should We Use SCSS ❓

You will understand why you should use SCSS more easily with the examples I will show in other articles, but for now let me tell you about a few awesome features of SCSS .

I think the most important reason we use SCSS is that we can remove CSS from the static structure and use it like a dynamic programming language.
It allows us to quickly create style files.
As projects grow, our CSS files become more complex. After a certain time, the codes start to repeat, which causes us to write code unnecessarily. SCSS saves us from this complexity and prevents us from repeating code.

How to Install SASS and SCSS ❓

We do not install SASS and SCSS separately. As I mentioned above, both work under the same roof, only syntax difference. The setup below applies to both.

We have two options to install on your computer. The first is with utility desktop programs, and the second is setup from the command line. I will tell you the setup from the command line...

To work with SASS and SCSS , Ruby must be installed on our computer.
You can download and install here by selecting the version that is appropriate for your operating system.
After installing Ruby on our computer, we come to the desktop, press the Windows + R keys and start the command line by typing cmd in the field that opens.
We install the sass by typing the following command on the command line.

gem install sass

Type the following command to check that the installation is taking place and as a result, if it returns the sass version installed on your computer, the installation is complete.

sass -v

Result 🔥

There is no need to explain the importance of a clean and readable code structure. As the projects grow, the CSS files become unusable and it is very difficult to write these style files in a clean and legible way with CSS only. This is where CSS preporecessors come into play. The reason I use SCSS is that the syntax is very similar to CSS and there are many sources.

If you don't be careful when you write SCSS , after a while it will not be different from normal CSS. This means that there is no point in using CSS preporecessor . So you need to code carefully and cleanly.

In my next article, I will talk about how to make SASS and SCSS settings. I would be very happy if this will help you.

Have a nice day!

Build Free Blog Page with Jekyll

Armin Arlert — Tue, 10 Mar 2020 15:13:06 +0000

Hi everybody, Firstly, I tell about what is Jekyll? What should we use?

Jekyll is a tool that allows us to create static web pages developed by Github with ruby. When we entered Jekyll's official website, we saw, "Transform your plain text into static websites and blogs." It is completely free and has a considerable number of users. Without further ado, I want to talk about how to install jekyll, how to make it work .

💨

NOTE: I use Debian 9, So I will make my narration on Linux operating systems.

Advantage/Disadvantage

+ ⭐

As with WordPress, you don't have to deal with plugins. You produce your content, Jekyll will do the rest. When you do not tire the server with the plugins and do not require a database on top, the sites you will create with Jekyll will be very high performance.

- 🔥

It is not so easy to install a plugin / theme with one click, as in WordPress platform, you should know a little technical information about HTML - CSS - JS-Ruby photos server configuration.

Install Jekyll 💫

If you want to use Jekyll, you need to install ruby to the computer.


su // you need to be root on the system to install ruby

It will ask us for our system password. After entering, we press enter and continue.


apt-get install ruby-full // installing ruby

exit // exit root.

After installing Ruby, we exit root mode with the exit command.


gem install jekyll  // install jekyll

NOTE: The reason I passed these places quickly is that there is a lot of resources and documentation on the internet. If you get an error or encounter a problem, you can contact me on my social media accounts. I try to help as much as I can.

Create a Jekyll Project 💥


jekyll new project_name // create project

cd project_name // go to project folder

jekyll serve // run project

We created our first project with the new command. Then we go into the folder where we created our project and run our project with the jekyll serve command.

If we get an output like above, our site has been created and working successfully.
If we open our browser and enter localhost:4000 in the address bar, our site will open.

And our site is ready. In the next articles, I will explain what the folders in the project do, how to use a ready-made theme, how to publish it on github and how to use our own domain name.

If you are still here thank you for reading :)

What's New and Updates in Vue CLI 4.0

Armin Arlert — Sat, 22 Feb 2020 23:35:31 +0000

Hi guys ⭐

Today, I will talk about new features that come with Vue CLI 4.0.

How to Install or Update to 4.0 ❔

Install 🔥

If no vue cli version is installed on your computer, you can download the latest cli version by running the command below.

npm install -g @vue/cli #for npm
# OR
yarn global add @vue/cli #for yarn

Update 💨

If you have vue cli on your computer, you can update it latest version by running the command below.

vue upgrade

What's New? ❓

The default directory structure was changed for Vuex and Router

In v3 the default directory structure is src/router.js for router
In v4 the default directory structure is src/router/index.js for router

In v3 the default directory structure is src/store.js for vuex
In v4 the default directory structure is src/store/index.js for vuex

In addition: It's time to api.hasPlugin('router') time. api.hasPlugin('vue-router') is no longer supported.

Extra Approval Step to Prevent Overwriting 💫

If you have uncommitted changes in the current repository, you will see a one more step when you run vue add or vue upgrade or vue invoke.

PS C:\Projects\FURKAN\weatherapp> vue add eslint
WARN  There are uncommited changes in the current repository, It's recommended to
commit or stash them first.
? Still proceed? (y/N)

About SASS/SCSS 💥

In version3 there is sass-loader@7 by default. sass-loader@8 is default version now.

If you look vue cli documantation, you will see this block.

@vue/cli-service will continue to support sass-loader@7 in v4, but we strongly recommend you to take a look at the v8 release and upgrade to the latest version.

Whitespace handling in the template block 👽

To get a smaller package, the preserveWhitespace option of vue-template-compiler is disabled by default in Vue CLI v3.

<span>
    This is <strong>an</strong> <strong>example.</strong>
    Can't touch <strong>this</strong>
</span>

With whitespace: 'condense'

<span> This is <strong>an</strong> <strong>example.</strong> Can't Touch <strong>this</strong> </span>

With preserveWhitespace: false,

<span> This is <strong>an</strong><strong>example.</strong> Can't touch <strong>this</this> </span>

Note the inline whitespace between tags is now preserved.

Build Command for Development Mode 🏃

When you running the build command in version 3 in development mode, the dist folder would be different from the production mode. Now, the directory structures across all modes would be the same.

About Plugins 💀

I got the this part from https://cli.vuejs.org/migrating-from-v3

@vue/cli-plugin-typescript

When importing a file without extension, the webpack resolve options now prefer .ts(x) files over .js(x) and .vue ones. We strongly recommend you to always include the file extension when importing .vue files.

@vue/cli-plugin-jest

Jest is updated from v23 to v24.

The unit-jest plugin now comes with 4 configuration presets:

@vue/cli-plugin-unit-jest The default preset for the most common type of projects
@vue/cli-plugin-unit-jest/presets/no-babel If you don't have @vue/cli-plugin-babel installed and don't want to see babel files in the project
@vue/cli-plugin-unit-jest/presets/typescript The preset with TypeScript support (but no TSX support)
@vue/cli-plugin-unit-jest/presets/typescript-and-babel The preset with TypeScript (and TSX) and babel support.

If you haven't changed the default Jest configurations (lies in either jest.config.js or the jest field in package.json) ever since project creation, you can now replace the massive configuration object with one single field:

module.exports = {
 // Replace the following preset name with the one you want to use from the above list
    preset: '@vue/cli-plugin-unit-jest'
}

A Reminder The default test environment in the new presets is jsdom@15, which differs from the default one in Jest 24 (jsdom@11). This is to be aligned with the upcoming Jest 25 updates. Most users won't be affected by this change. For a detailed changelog with regard to jsdom, see https://github.com/jsdom/jsdom/blob/master/Changelog.md

@vue/cli-plugin-unit-mocha

Use mochapack instead of mocha-webpack, see changelog at https://github.com/sysgears/mochapack/releases. This change is not likely to affect actual usage.

@vue/cli-service-global

See breaking changes in the [@vue/cli-service](https://cli.vuejs.org/migrating-from-v3/#vue-cli-service) & [@vue/cli-plugin-eslint](https://cli.vuejs.org/migrating-from-v3/#vue-cli-plugin-eslint) packages.

@vue/cli-plugin-eslint

This plugin now requires ESLint as a peer dependency.

This won't affect projects scaffolded with Vue CLI 3.1 or later.

If your project was scaffolded with Vue CLI 3.0.x or earlier, you may need to add eslint@4 to your project dependencies (This is automated if you upgrade the plugin using vue upgrade eslint).

It's also recommended to upgrade your ESLint to v5, and ESLint config versions to the latest. (ESLint v6 support is still on the way)

The Prettier Preset

The old implementation of our prettier preset is flawed. We've updated the default template since Vue CLI v3.10.

It now requires eslint, eslint-plugin-prettier and prettier as peer dependencies, following the standard practice in the ESLint ecosystem.

For older projects, if you encountered issues like Cannot find module: eslint-plugin-prettier, please run the following command to fix it:

`npm install --save-dev eslint@5 @vue/eslint-config-prettier@5 eslint-plugin-prettier prettier`

@vue/cli-plugin-e2e-cypress

Before Vue CLI v3.0.0-beta.10, the default command for E2E testing was vue-cli-service e2e. Later we changed it to vue-cli-service test:e2e. The previous command was since deprecated but still supported. We have now completely dropped support for this legacy command.

@vue/cli-plugin-e2e-nightwatch

Nightwatch.js has been upgraded from 0.9 to 1.x. Be sure to read the Nightwatch migration guides first.

The bundled config and generated tests have been completely overhauled. Please follow the link for more details. Most use cases in Vue CLI v3 are still supported. They are just new features.

As ChromeDriver has changed its version strategy since version 73, we've made it a peer dependency in the project. A simple browser version check is implemented in the plugin, so if you've upgraded to an incompatible version of Chrome, there will be a warning to prompt you to upgrade the depended ChromeDriver version.

I would like to state that I have received some of the places in this post from Vue CLI. See the references section for more information.

I hope that gives a basic idea about cli 4.0 is and what came with it. If you are still here thank you for reading :)

References

Migrating from v3

Coolest Tool for Writing Documentation - VuePress

Armin Arlert — Sun, 09 Feb 2020 11:24:44 +0000

⭐ Introduction ⭐

Last week was my first week in my new job and don't have much idea about our projects. We have decided as a team to write documantation. My team lead asked me to create a documentation project for all of our projects. So i did some research and saw a cool star. Then i noticed it was VUEPREEESSS

It's really simple and useable.

What is VuePress ❓

VuePress is composed of two parts: a minimalistic static site generator with a Vue-powered theming system and Plugin API, and a default theme optimized for writing technical documentation. It was created to support the documentation needs of Vue’s own sub projects.

You encounter this part when you open the site of VuePress. I used VuePress to create a documentation project.

How to Create a VuePress Project? ✏️

I used npm to install vuepress.

# install vuepress
npm install -g vuepress # OR yarn global add vuepress

# create the project folder
mkdir vuepress-project

# create a markdown file for homepage
echo '# Hello VuePress' > README.md

# run project
vuepress dev

# for build
#vuepress build

After this, you will see just an empty page and Hello VuePress text. You will need a config file to customize to your project.

Customize the project 💭

It is suggested that we create a directory named .vuepress in the Vuepress documentation. Everything about of VuePress will be here.

Config File 🌟

You should create a config file to customize the project and should export configs. It is config.js and must be in .vuepress file.

module.exports = {
    title: 'Project Title',
    description: 'Project Description',
    themeConfig: {
        nav: [
            { text: 'Home', link: '/' },
            { text: 'Guide', link: '/guide/introduction' },
        ],

        sidebar: [
           {
               title: 'Home',
               path: '/home/',
           },
           {
               title: 'Submenu',
               path: '/submenu/',
           }
        ],
    }
}

I wrote my project name and description. In addition I created a navbar and sidebar for navigation.

Customize the Homepage 🏠

To customize the homepage, you can edit the readme.md file of the homepage (./README.md) as follows.

---
home: true
heroImage: /img/logo.jpg
heroText: Welcome
actionText: Get Started
actionLink: /home/
features:
- title: "Simplicity First"
  details: Minimal setup with markdown-centered project structure helps you focus on writing.
- title: "Vue-Powered"
  details: Enjoy the dev experience of Vue + webpack, use Vue components in markdown, and develop custom themes with Vue.
- title: "Performant"
  details: VuePress generates pre-rendered static HTML for each page, and runs as an SPA once a page is loaded.
footer: Copyright © 2020
---

And your homepage will looks like this.

Your project looks like this and the document structure is as follows:

.

├─ .vuepress

│    └─ config.js

├─ home

│   └─ README.md

├─ submenu

│   └─ README.md

├─ README.md

└─ package.json

What's the next? ❕

IT'S TIME TO WRITE DOCUMANTATION FOR FUTURE GENERATIONS!!! 💪

As you can see it's much easy. You can use an editor to write .markdown and so can write documentation fastly.

Thank you for read. If you enjoy this article please like and share! See you!

How to create CSS keyframe animations

Armin Arlert — Tue, 28 Jan 2020 19:08:39 +0000

Firstly hi,

This is my first post on dev.to :)

Before, i usually used jquery to make animation for web apps. But with the innovations coming with CSS3, I can say that I am not even looking at the face of the jQuery library about animations anymore.

Today i will show you what you can do with keyfreames.
I will not tell magical things :)

With the @keyframes feature, we can make various animations only with CSS without using any plugins. Shift, change color, growth, shrinkage etc. to any DOM element. We can apply effects. In short, we set a certain time interval with @keyframes and we can apply everything that can be done with CSS in this time interval to our item.

Browser Support

I want to talk about browser support before I begin my narration. All versions of Google Chrome, Mozilla, Opera and Safari support this feature. It is for more detailed table than here.

Usage

It's really simple

@keyframes animation-name{
    from { css attributes }
    to { css attributes }
}

You can type any variable name that describes your animation in the place that says "animation-name". The "from" part refers to our starting values, the "to" part refers to our end values. Also, we can use it by expressing it in percentiles. Expressing in percentiles in general enables us to establish a more flexible structure.

Features

There are a few values that the selector we will apply animation to. These values are;

Property	Description
animation	A shorthand property for setting all the animation properties
animation-name	Specifies the name of the @keyframes animation
animation-duration	Specifies how long time an animation should take to complete one cycle
animation-timing-function	Specifies the speed curve of the animation
animation-delay	Specifies a delay for the start of an animation
animation-iteration-count	Specifies the number of times an animation should be played
animation-direction	Specifies whether an animation should be played forwards, backwards or in alternate cycles
animation-fill-mode	Specifies a style for the element when the animation is not playing (before it starts, after it ends, or both)
animation-play-state	Specifies whether the animation is running or paused

Example

.box{
    width:25px;
    height:25px;
    background-color:blue;
    animation-name:animasyon-ismi;
    animation-duration:2s;
}

@keyframes animation-name{
10% { 
    width:100px;
    height:100px;
    background-color:red;
 }
50% {
    width:150px;
    height:150px;
    background-color:purple;
 }
100% { 
    width:50px;
    height:50px;
    background-color:yellow;
 } 
}

I have divided our animation into 3 parts above. If you want, you can divide it into 100 equal parts :) 10%, 25%, 50%, 75%, 100%… You can see my application by clicking here.