DEV Community: Özlem

Bölüm 3) echarts.js ile ilk grafiğimiz

Özlem — Wed, 29 Jun 2022 12:30:04 +0000

Tekrar merhaba, bu aralar "The Expanse" adlı diziyi izledik. (6 sezon). Henüz hala etkisinden kurtulamamışken ilk dashboard'u The Expanse ile ilgili verileri kullanarak yapmaya karar verdim.

Öncelikle portfolio için Layout oluşturacağım. Layout içerisinde konularına göre ayrılmış bir Sidebar olacak. Belki sonradan Footer ve Header da ekleriz ama şimdilik gerek yok.

Sidebar.tsx:

import type { NextPage } from 'next'

const SideBar: NextPage = () => {
  return (
    <div className="w-72 bg-black text-white h-screen">
      Sidebar
    </div>
  )
}

export default SideBar

Layout.tsx:

import Sidebar from "./Sidebar";
import Head from "next/head";
import React from "react";

type Props = {
  children: React.ReactNode
}

const Layout: React.FC<Props> = ({ children }) => {
  return (
    <div className="flex">
      <Head>
        <title>Create Next App</title>
        <meta name="description" content="Generated by create next app" />
        <link rel="icon" href="/favicon.ico" />
      </Head>
      <Sidebar/>
      <main>{children}</main>
    </div>
  )
}

Bunun için, pages klasörü altında "the-expanse" adında yeni bir sayfa oluşturuyorum ve Layout içine ilk grafiğimi oluşturacağım.

import type { NextPage } from 'next'
import Layout from "../components/Layout"

const TheExpansePage: NextPage = () => {
  return (
    <Layout>
    </Layout>
  )
}

export default TheExpansePage

İlk grafiğim en basitinden bir çubuk grafik (bar chart) olacak ve Güneş sistemindeki gezegenlerin uydu sayılarını gösterecek.

İl önce ReactEcharts'ı ekliyoruz ve option adında bir değişken tanımlıyoruz. Değişkenimiz bir grafik oluşturmak için en az x ve y eksinindeki değerleri ve grafiğin tipini içermelidir.

import React from "react";
import ReactEcharts from "echarts-for-react";
import type { NextPage } from 'next'

const Orbit: NextPage = () => {
  const option = {
    xAxis: {
      type: 'category',
      data: [ 'Mercury','Venus','Earth', 'Mars','Jupiter', 'Saturn','Uranus', 'Neptune'],
    },
    yAxis: {
      type: 'value'
    },
    series: [
      {
        data: [0,0,1,2,79,82,27,14],
        type: 'bar',
      }
    ]
  };
  return (
    <div className="w-96 h-96">
      <ReactEcharts option={option} />
    </div>

  )
}
export default Orbit;

the-expanse.tsx sayfasına Orbit bileşenimizi(component) ekledikten sonra ilk grafiğimizi oluşturmuş oluyoruz.

import type { NextPage } from 'next'
import Layout from "../components/Layout"
import Orbit from "../components/charts/Orbit";

const TheExpansePage: NextPage = () => {
  return (
    <Layout>
      <Orbit/>
    </Layout>
  )
}

export default TheExpansePage

Grafiğimizde bazı gezegen isimleri görünmüyor. Bunun için x ekseninde bulunan isimleri açılı gösterebiliriz.

      axisLabel: {
        rotate: 60
      },

Sadece veri serisini verdik ve grafik veri setimize göre auto scale edildi. Yani veri 0-82 aralığındaydı ve grafiğim 0-100 aralığında oluştu.

Verinin daha rahat algılanabilmesi için arka planı renklendirebiliriz.

Grafiğe başlık eklemek için:

    title: {
      text: 'Number of Moons'
    },

Üzerine geldiğimizde uydu sayısını göstermesini istersek (tooltip): option değişkenine tooltip özelliğini eklememiz yeterli.

tooltip: {},

Grafik çubuklarının rengini değiştirmek için de color özelliği eklememiz yeterli.

Son durumu:

import React from "react";
import ReactEcharts from "echarts-for-react";
import type { NextPage } from 'next'

const Orbit: NextPage = () => {
  const option = {
    title: {
      text: 'Number of Moons'
    },
    tooltip: {},
    color: '#60a4b3',
    xAxis: {
      type: 'category',
      data: [ 'Mercury','Venus','Earth', 'Mars','Jupiter', 'Saturn','Uranus', 'Neptune'],
      axisLabel: {
        rotate: 60
      },
    },
    yAxis: {
      type: 'value'
    },
    series: [
      {
        data: [0,0,1,2,79,82,27,14],
        type: 'bar',
        showBackground: true,
        backgroundStyle: {
          color: 'rgba(180, 180, 180, 0.1)'
        }
      }
    ]
  };
  return (
    <div className="w-96 h-96">
      <ReactEcharts option={option} />
    </div>

  )
}
export default Orbit;

Bölüm 2) Next.js, TailwindCss ve echarts.js kurulumu

Özlem — Fri, 17 Jun 2022 21:20:05 +0000

yarn create next-app --typescript

Typescript nereden çıktı?

Şimdiye kadar küçük projelerde ihtiyaç duymamıştım ve mülakatlar için dökümanları gözden geçirmiştim. Fakat büyük projelerde çalışmak için TypeScript bilgimi artırmam gerektiğini farkettim, bu sebeple bu projeye TypeScript'i de ekledim.

TailwindCSS ile kolay ve orantılı UI çıkarma yeteneği için projeye ekleme şansım varsa ekliyorum. Madem kendi portfolyomu yaratıyoruz TailwindCSS eklemezsem olmazdı.
cd proje_adi ile proje klasörüme girdikten sonra
yarn add -D tailwindcss postcss autoprefixer
yarn tailwindcss init -p ile tailwindCSS dependency'lerini ekliyorum.

Ve styles içindeki globals.css adlı klasöre

@tailwind base;
@tailwind components;
@tailwind utilities;

ekledim.
Ardından tailwind.config.js dosyasına

module.exports = {
  content: [
    "./pages/**/*.{js,ts,jsx,tsx}",
    "./components/**/*.{js,ts,jsx,tsx}",
  ],
  theme: {
    extend: {},
  },
  plugins: [],
}

Next.js için özelleştirilmiş config ayarlarını burada belirttiği gibi ekledim. Kodu yazacağımız dosyalardaki kullanılan class isimlerine bakacak ve kullanmadıklarımızı temizleyecek (purge).

yarn dev komutu ile projeyi localde ayağa kaldırdım.

Sıra echarts'da:

yarn add echarts ve yarn add echarts-for-react dependency'leri ekledikten sonra ilk grafiğimizi oluşturabiliriz.

Bölüm 3) echarts.js ile ilk grafiğimiz

Bölüm 1) echarts.js & Next.js ile Nasıl Dashboard Oluşturabiliriz?

Özlem — Thu, 16 Jun 2022 08:47:22 +0000

Merhaba, bir süredir dashboard geliştirme üzerine uzmanlaşmak istiyordum. Bu dönemde oluşan proje boşluğumda, biraz yeni şeyler öğrenmek, biraz da kendi portfolyomu oluşturup daha niş/odaklı projeler alabilimek için echarts.js ile proje geliştireceğim.

Bir yazı seti oluşturup bu süreci deneyimlemek isteyen kişilere yardımcı olmak istedim.
İlk soru neden echarts.js

Daha önce Next.js ile projeler geliştirdiğim için react.js ile uyumlu çalışan ve beni uzmanı olmadığım hatalarla başbaşa bırakmayacağını düşündüğüm bir kütüphane olduğu için.

Bu şartları sağlayan recharts.js ve amcharts.js da var, fakat recharts.js in hazır grafiklerini echarts.js kadar estetik bulmuyorum.

amcharts.js ise bence çok estetik ama daha önce bir projemde kullandığım için farklı bir kütüphane denemek istedim. Ayrıca amcharts.js opensource değil, enterprise müşteriler için uygun olmayabilir. (Ücretsiz kullanmak istiyorsanız logosunu grafiğe ekliyor.)

Başlangıç aşamasında yetecek kadar hazır örnekler içermekte,

Bunlar benim kendi sebeplerim, daha detaylı bir inceleme için bu kaynağa bakabilirsiniz.

Bölüm 2

GitLab e SSH key eklemek

Özlem — Sun, 06 Mar 2022 19:41:00 +0000

Host key verification failed.
fatal: Could not read from remote repository.
Please make sure you have the correct access rights
and the repository exists.

Gitlab'de kayıtlı key yokken, SSH key kullanarak repository'i klonlamak istediğimizde üstteki hatayı alırız.

Amaç: Bilgisayarımızda bir karmaşık bir anahtar oluşturmak ve bu anahtarı Gitlab'e kaydetmek. Sonrasında editörümüzün (Webtorm/Visual Studio Code...) bu anahtarı kullanarak (kullanıcı adı - parola sormadan) gitlab ile iletişim kurması.

SSH Key Nedir?

SSH Secured Shell'in kısaltmasıdır. Daha detaylı bilgi için: https://www.hostinger.web.tr/rehberler/ssh-nedir

GitLab'e nasıl entegre edilir?

Terminale aşağıdaki komutu yazın:

ssh-keygen

Enter file in which to save the key

Key'i nereye kaydetmek istediğimizi soracak. Bir dosya adı yazın veya enter'a basın.

Enter passphrase (empty for no passphrase):

Eğer birisi bilgisayarınıza erişirse, SSH key kullandığınız her sisteme de ulaşabilir. Bu sebeple, extra güvenlik adımı için, isterseniz SSH key'lerinize de bir parola belirleyebilirsiniz.

dosya belirtmediğimiz için alttaki directory'e key eklendi.
cd /Users/username/.ssh (kendi username'iniz ile)

ls -a ile dosyalara bak

cat id_rsa.pub

"cat [dosya-adi]" komutunun amacı belirtilen dosyayı metin olarak dökmektir. Bu komutu kullanarak is_rsa.pub dosyasının içindeki key'i terminal'e yazdırırız.

Çıkan sonucu kopyalayıp, GitLab daki SSH key alanına kaydedin.

Kullanılmayan CSS leri Görüntüleme

Özlem — Thu, 29 Apr 2021 14:45:21 +0000

Chrome Dev Tools ile:

Örneğin instagram landing sayfası için deneyelim:

Chrome ile açtığımız sayfada sağ tıklayıp Denetle(Inspect) seçeneğine tıklıyoruz.

Mac için (Command + Shift + P)
Windows ve Linux için (Control + Shift + P)

basarak çıkan komut satırına "covarage" yazıyoruz.

Çıkan tabda yenile işaretine tıklıyoruz.

Çıkan ekranda hem css hem de js dosyalarının kullanım oranları yazıyor.

url filtresine css yazarak, css dosyalarını filtreliyorum.

Dosya üzerine tıkladığımda, yukarıda kırmızı ve mavi olarak kullanılan ve kullanılmayan css sınıflarını görebiliyorum.

Kaynak: https://developers.google.com/web/tools/chrome-devtools/css/reference#coverage

Editable box component with React Hooks

Özlem — Wed, 24 Feb 2021 12:58:38 +0000

Recently, I needed a user friendly component which can be editable when the user clicks on it. In this post I will show you how to do it with react hooks.

I used the onBlur and onFocus functions of the text area to handle edit and save mode.

Edit Mode:

Saved Mode:

import React, { useState } from "react";

export const EditBox = (props) => {
    const maxChar = 500;
    const rows = 10;
    const [remainedChar, setRemainedChar] = useState(500);
    const [isEditable, setEditable] = useState(false);

    const handleChange = (e) => {
        setRemainedChar(maxChar - e.target.value.length);
    };
    const handleFocus= (e) => {
        setEditable( true);
    }
    const handleBlur = (e) => {
        console.log( 'Saved:', e.target.value);
        setEditable( false);
    }

    return (
        <div className="editbox">
            <div className="custom-label" >
                <div className = "editbox-label">
                    {props.label}
                </div>
            </div>
            <textarea
                rows={rows}
                maxLength={maxChar}
                onChange={handleChange}
                onBlur={handleBlur}
                onFocus={handleFocus}
                className={`editbox-textarea ${isEditable ? "text-edit active-box" : ""} `}
            ></textarea>
            <div className={`edit-bottom  d-flex justify-content-end text-detail ${isEditable ? "" : "invisible"}`}>
                <i className="remained-char">
                    {remainedChar}/{maxChar}
                </i>
            </div>
        </div>
    );
};

export default EditBox;

I removed border and outline of the text-area since I want it to be seen like a box. I get the row number value as a prop and showed the remained-chars to the user, so I set the resize property to none because I did not need it.

/* EDITBOX --------------- */
.editbox {
  margin-bottom: 1rem;
}
.editbox textarea {
  font-family: inherit;
}

.editbox .edit-action {
  text-decoration: underline;
  font-size: 1rem;
  font-weight: normal;
}

.editbox .editbox-textarea {
  outline: none;
  border: none;
  color: var(--text-secondary);
  width: 100%;
  resize: none;
  background-color: transparent;
  border: 1px solid #C6CBD4;
  border-radius: .5rem;
  padding: 1rem;
  transition: .2s;
}

.editbox .editbox-textarea:hover{ border: #9090cc .5px solid;}

.editbox .editbox-textarea:focus,
:active,
:visited {
  outline: none;
}

.editbox .text-edit {
  color: var(--text-secondary);
  background-color: transparent;
  font-weight: normal;
}

.editbox .edit-bottom { transform: translate(-.5rem, -1.5rem);}