Сүүлийн 4 жил vim -ээс салбарлаж үүссэн neovim ашиглах болсон. Тиймээс энд neovim -ийн талаар бичигдэх болно. Neovim ийн тохиргоо lua хэл дээр бичигдэх боломжтой болсон нь нэмэлт(plugin) хөгжүүлэх эко систем нь асар хурдацтай хөгжиж байгаа билээ. Дахиад нэг програмчлалын хэл сурах нь гэж бодож байвал энэ нь харьцангуй амархан гэдгийг урьдчлаад хэлэе.

Харин lazyVim гарч ирсэнээр энэхүү ажил маш хялбар болж байгаа юм байна.

Нэн түрүүнд шаардлагатай зүйлс нь:

• Neovim >= 0.9.0 (LuaJIT ашиглан build хийсэн хувилбар)
• Git >= 2.19.0 (мэдээж Git)
• a Nerd Font(v3.0 болон түүнээс дээш) (заавал биш ч гэсэн зарим нэг icon -д шаардлагатай)
• lazygit (заавал биш)
• C компайлэр, nvim-treesitter -д ашиглагдана
• telescope.nvim (заавал биш)
  - grep: ripgrep
  - Файлууд олох: fd
• true color болон undercurl дэмждэг терминал:
  - kitty (Linux & Macos)
  - wezterm (Linux, Macos & Windows)
  - alacritty (Linux, Macos & Windows)
  - iterm2 (Macos)

Суулгах:

Юмыг яаж мэдэх вэ гээд, өмнө нь өөрт чинь nvim тохиргоо байсан бол backup хийгээд авсан дээр.

# заавал
mv ~/.config/nvim{,.bak}

# заавал биш гэхдээ хийгээрэй
mv ~/.local/share/nvim{,.bak}
mv ~/.local/state/nvim{,.bak}
mv ~/.cache/nvim{,.bak}

Дараа нь lazyVim ийн темплэйт тохиргоог clone хийж аваад:

git clone https://github.com/LazyVim/starter ~/.config/nvim

nvim ээ эхлүүлнэ.

nvim

nvim эхлэхдээ lazyVim ийн тохиргоог шууд ажиллуулж хэрэгцээтэй нэмэлтүүдийг өөрөө татаж авч суулгах учир тэвчээртэй хүлээгээрэй.

Суулгаж дуусахаар нь :checkhealth командыг ажиллуулж ямар нэг асуудалгүй байгаа эсэхийг нягтлаарай.

Амархан байгаа биз дээ. LazyVim ийн default тохиргоо ер нь л ихэнх хэрэгслүүдийг агуулсан учраас бараг л энэ чигээрээ ажиллана. Миний хувьд хэдэн customization хийсэн нь:

Тохиргоо

Neovim default -аараа json файлын “ quote ийг нуугаад байдаг үүнийг ил болгохдоо nvim/lua/config/autocmds.lua файлд доорхи өөрчлөлтийг оруулав.

vim.api.nvim_create_autocmd("FileType", {
  pattern = { "json", "jsonc" },
  callback = function()
    vim.wo.spell = false
    vim.wo.conceallevel = 0
  end,
})

Мөн товчний хослолууд дээр доорхи тохиргоонуудыг хийсэн nvim/lua/config/keymaps.lua

local keymap = vim.keymap
local opts = { noremap = true, silent = true }

-- KeyMap
--- Хуваасан цонхнуудруу шилжихдээ Ctrl + {h,j,k,l} ашиглах
keymap.set("n", "<C-h>", "<C-w>h", opts)
keymap.set("n", "<C-j>", "<C-w>j", opts)
keymap.set("n", "<C-k>", "<C-w>k", opts)
keymap.set("n", "<C-l>", "<C-w>l", opts)

--- идэвхижүүлсэн мөрийг дээш доош хөдөлгөх
keymap.set("v", "J", ":m '>+1<CR>gv=gv", opts)
keymap.set("v", "K", ":m '<-2<CR>gv=gv", opts)

--- buffer хооронд шилжих
keymap.set("n", "<leader>]", ":bn<CR>", opts)
keymap.set("n", "<leader>[", ":bp<CR>", opts)

Мөн lazyVim ийн default тохиргоонд nvim/lua/config/lazy.lua дараах өөрчлөлтүүдийг оруулав.

local lazypath = vim.fn.stdpath("data") .. "/lazy/lazy.nvim"
if not vim.loop.fs_stat(lazypath) then
  -- bootstrap lazy.nvim
  -- stylua: ignore
  vim.fn.system({ "git", "clone", "--filter=blob:none", "https://github.com/folke/lazy.nvim.git", "--branch=stable", lazypath })
end
vim.opt.rtp:prepend(vim.env.LAZY or lazypath)

require("lazy").setup({
  spec = {
    -- add LazyVim and import its plugins
    { "LazyVim/LazyVim", import = "lazyvim.plugins" },
    -- import any extras modules here
+    { import = "lazyvim.plugins.extras.linting.eslint" },
+    { import = "lazyvim.plugins.extras.formatting.prettier" },
+    { import = "lazyvim.plugins.extras.formatting.black" },
+    { import = "lazyvim.plugins.extras.lang.typescript" },
+    { import = "lazyvim.plugins.extras.lang.tailwind" },
+    { import = "lazyvim.plugins.extras.lang.python" },
+    { import = "lazyvim.plugins.extras.lang.json" }, 
+    { import = "lazyvim.plugins.extras.ui.mini-animate" },
    -- import/override with your plugins
    { import = "plugins" },
  },
  defaults = {
    -- By default, only LazyVim plugins will be lazy-loaded. Your custom plugins will load during startup.
    -- If you know what you're doing, you can set this to `true` to have all your custom plugins lazy-loaded by default.
    lazy = false,
    -- It's recommended to leave version=false for now, since a lot the plugin that support versioning,
    -- have outdated releases, which may break your Neovim install.
    version = false, -- always use the latest git commit
    -- version = "*", -- try installing the latest stable version for plugins that support semver
  },
  install = { colorscheme = { "tokyonight" } },
  checker = { enabled = true }, -- automatically check for plugin updates
  performance = {
    rtp = {
      -- disable some rtp plugins
      disabled_plugins = {
        "gzip",
 +      "matchit",
 +      "matchparen",
 +      "netrwPlugin",
        "tarPlugin",
        "tohtml",
        "tutor",
        "zipPlugin",
      },
    },
  },
})

Энд анхаарах юм нь nvim/lua/config доторх файлуудад require дуудаж болохгүй. Учир нь lazyVim автоматаар доторх файлуудыг дууддаг. Зарим нэмэлтүүд тохиргооны заавар дээрээ require дуудсан байдаг!

Нэмэлтүүд(Plugins)

file tree explorer ийн байршлыг сольсон. Ингэхдээ nvim/lua/plugins/neotree.lua файлыг үүсгээд доорхи хэсгийг бичиж өгөв.

return {
  "nvim-neo-tree/neo-tree.nvim",
  event = "LazyFile",
  opts = function(_, opts)
    opts.window.position = "right"
  end,
}

Default theme буюу colorscheme нь миний ашигладаг theme тул ердөө transparent болгох нэмэлт тохиргоо л бичив. nvim/lua/plugins/colorscheme.lua

return {
  "folke/tokyonight.nvim",
  lazy = true,
  opts = {
    style = "storm",
    styles = {
      sidebars = "transparent",
      floats = "transparent",
    },
  },
}

Ингээд л болоо. LazyVim өөрөө treesitter, syntax, нэмэлт суулгах, тухайн нээсэн файлын төрөлд тааруулж language-server асаах зэрэгээ хийдэг тул толгой өвтгөсөн асуудлууд байхгүй. Бас нэг зүйл нь lazyVim өөрийн нэмэлт plugin үүдээ үргэлж lazy буюу зөвхөн хэрэгцээтэй үед нь дууддаг. Харин хэрэглэгчийн нэмэлтээр суулгах plugin уудад та өөрөө нэмж тохируулах юм. Жишээ нь ts-autotag нэмэлтийг суулгах бол nvim/lua/plugins/autotag.lua гэж үүсгээд дотор нь:

return {
  "windwp/nvim-ts-autotag",
  lazy = true, --- хэрэгтэй үед нь л дуудна.
  opts = {
    ...
  },
}

Хѳгжүүлэгч хүн хэзээ ч суралцахаа зогсож болохгүй. Сүүлийн үеийн технологиудын талаар мэдээлэл, туршлага, номын дууг жолооны ард, гэрээ цэвэрлэж байхдаа г.м хаана ч сонсох боломжтой нэг зүйл нь подкаст билээ. Миний зүгээс доорх подкастуудыг санал болгож байна. Дараах подкастуудыг өөрсдийнх нь вэб болон Apple Podcasts, Google Podcasts аппликешнүүдээр сонсох боломжтой

1. Full Stack Radio

Adam Wathan дизайнаас эхлээд тест хүртэлх маш өргөн олон зүйлсийг хамарсан сэдвээр зочин урин ярилцдаг.

2. Syntax

Вэб хөгжүүлэлтийн талаарх tutorial, course, блогуудаар танил болсон Wes Bos, Scott Tolinski нар өөрсдийн туршлага, мэдлэг, entrepreneurship -ын талаар 2 долоо хоног тутам хуваалцдаг.

3. Front End Happy Hour

Netflix, Evernote, Linkedin -ын инженерүүд цуглан frontend хөгжүүлэлтийн талаар нэмэлт зочинтой хөөрөлддөг. Сонирхолтой нь тэд ийнхүү хөөрөлдөх зуур түлхүүр үг дээр үндэслэн шар айраг, коктейл, виски, коняк уудаг. Нээрээ нээрээ :P

4. Sofware Engineering Daily

Өдөр бүр програм хангамжийн инженертэй сонирхолтой яриа, асуудлын шийдэл зэргийг ярилцдаг. Database, Devops, React, Machine Learning, AR, VR г.м

5. ShopTalk

Codepen -ын co-founder Chris Coyier болон Dave Rupert нар вэб дизайн болон хөгжүүлэлт, сайжруулалт, UI, UX -ын талаар ярилцаж зөвлөгөө өгдөг.

6. Javascript Jabber

7 хоног бүр зөвхөн javascript хэл дээр front-end болон back-end -ийг бүхэлд нь хамран tools, best practice, тест, deployment гэд бүгдийг нь 3–4 хүн ярилцдаг.

7. The Changelog

Adam Stacoviak, Jerod Santo нарын нээлттэй эхийн хөгжүүлэлтийг хийж буй хүмүүстэй ярилцах санаа нь хэрэгжиж changelog болсон. Програм хангамжийн инженерүүд, хакерууд, бүтээлч хүмүүс зочид болж, програмчлалын хэл, үүсэл, ирээдүйн чиглэл, түүний community талаар ярилцдаг.

8. Modernweb

Шинэ framework, стандарт, аргачлалууд, шинэчлэлтүүдийг яг тухайн framework -ын core хөгжүүлэгчтэй ярилцдаг.

9. React Podcast

Вэб хөгжүүлэлтийн ертөнцөд хамгийн халуухан сэдвүүдийн нэг нь React гарцаагүй мөн билээ, Тэгэхээр зөвхөн react -д зориулагдсан podcast -ыг бол орхиж болохгүй. Мөн зочид нь ч бас дутахааргүй халуун сэдвүүдийг ярилцана. NPM -ын co-founder Laurie Voss хөтөлдөг.

Нийтлэл таалагдсан бол 👏 дарж энэ талаар сонирхдог хүмүүст share хийгээрэй.

Гайхалтай дуугаралттай, маш эвтэйхэн санагдах Sony WH-1000XM3 нь Sony -ын 2016 оноос эхлэн чимээ үл нэвтрүүлэх чихэвчний зах зээлд Bose -ын эсрэг зарласан дайны анхны 1000XM -ын үр хойч юм. Одоогоор Bose -ын хамгийн сайн буюу QuietComfort-35 аас илүү гарч чадсан энэхүү 3дахь хувилбар $350(одоогийн ханшаар 875к ₮ орчим) үнэтэй ба чимээ үл нэвтрүүлдэг, утасгүй чихэвч дотроо ерѳнхий role model болсон байна.

Чимээ үл нэвтрүүлэх тал дээр энэ ангилалдаа 1-рт бичигдэж байгаа учир мэдээж дууны гаргалт чанарын хувьд ярих асуудалгүй биз. Ѳмнѳх хувилбаруудыг сайжруулах бус бүгдийг эхнээс нь дахин хийсэн нь чихэнд тааламжтай материал, том чихтэй хүмүүст зориулан доторх зайг арай том болгож ѳгсѳн нь дурьдахгүй ѳнгѳрч болохгүй зүйл юм. Мѳн ѳмнѳх хувилбарыг бодвол илүү хѳнгѳн бас толгой чихэвч 2ын хооронд гарах зай бага болж, эвхээд авч явахад хүртэл нилээд авсаархан болсон байна.

Энэ загварын хамгийн том дэвшил нь чимээ үл нэвтрүүлэх QN1 чип юм. Ѳмнѳх загварууын DAC(Digital to Analog Convertor) -д ѳѳрчлѳлт оруулж нэмэлт чимээг бууруулдаг байсан. Харин QN1 тусдаа чип болгосоноор орчны болон нэмэлт чимээг ѳмнѳх загваруудаас 4 дахин багасгадаг болж 32бит -ын аудио боловсруулах нэмэлт тѳхѳѳрѳмж багтах зай гаргаж ѳгсѳн байна. Ингэснээр энгийн шахагдсан дуунаас ялгаа мэдрэхгүй ч lossless дуу сонсоход жинхэнэ утгаараа ялгааг нь мэдэрч чадах нь.

Түүнчлэн Sony -ын LDAC холболт дэмждэг болсон ч одоогоор зѳвхѳн бусад Sony тѳхѳѳрѳмжүүдтэй л хослон ажиллах нь

LDAC нь Sony компаниас гаргасан утасгүй холболтоор аудио цацах боломжтой шинэ технологи юм. LDAC нь bluetooth -ээс 3 дахин ѳргѳн учраас энэ холболтоор илүү тѳгс дуугаралт мэдрэх боломжтой.

Уг чихэвчээр юу ч тоглуулсан, бүр яг юу ч тоглуулсан(literally anything) Led Zeppelin — discography -ыг earpod оор сонсож байгаад Sony 1000XM3 дээр тоглуулж сонсоход тухайн тоглуулж буй дууг амилуулж байгаа нь үнэхээр гайхамшигтай санагдсан шүү.

Зарим чихэвч удаан зүүхэд толгой хэт хавчих, чих ѳвтгѳх зэрэг зовиур байдаг бол 1000XM3 ыг 8 цагын нислэгийн турш зүүхэд асуудалгүйн дээр, чихний хэсэг нь амьсгалдаг болохоор чих хѳлрѳх асуудалгүй болсон юм байна. Бас ѳмнѳх загвараас илүү хѳнгѳн болсон гэж хэлсэн бил үү?!

Ѳѳ хэлсэн хүнд нэг л ѳѳ байна даа, хажуу талын touch хэсэгт дууны чанга сулыг тохируулах явцдаа санаандгүй дуу солигдоод байсан нь :(

QN1 чипний тухайд сони үнэн хэлжээ, ѳмнѳх загваруудтай харьцуулахад мэдэгдэхүйц дуу чимээ үл нэвтрүүлж байна. Онгоцонд моторын хүнгэнэсэн дуу байхгүй болж кино үзэх, дуу сонсоход доторх чимээ тэр чигтээ байхгүй болж байсан. Чимээтэй metro хүртэл зүгээр л podcastны орчин болсон.

Sony -ын утасны апп-ыг ашиглан хэр их чимээ нэвтрүүлэхээ тохируулж хотийн гудамжын гоёмсог чимээг мэдэрч болно, хэрвээ байнга тохиргоо ѳѳрчлѳх хэцүү бол adaptive sound control-оор орчиндоо тааруулан ѳѳрчилж болдог.

Sony апп нь бас дуу чимээ үл нэвтрүүлэх тохиргоог зѳвхѳн таны сонсголд тохируулж ѳѳрчилж болдог, мѳн sony апп-ын тусламжтай google туслах холбох боломжтой.

30 цагын турш ажиллах чадамжтай 1000XM3 нь USB-C порттой нь хэрвээ та аль хэдийн C порт хэрэглээд сурчихсан бол илүү usb кабель авч явах шаардлагагүй болох нь, мѳн Sony -ын ѳѳрийх нь adapter 10мин дотор 5 цаг ашиглах цэнэг авдаг давуу талтай. Үнийн хувьд $350 нь нилээд санаа зовох асуудал болоод байгаа ч үнэхээр decent чихэвч бѳгѳѳд worth it байх нь ээ.

Орчуулга: engadget.com

Баяртай Bose буюу Sony WH-1000XM3 -ын талаар. was originally published in Technote on Medium, where people are continuing the conversation by highlighting and responding to this story.

Source код оо текст засварлагч дээрээ нээгээд blog/models.py файлыг нээж дотор нь дараах мѳрийг нэмнэ.

cover = models.ImageField(upload_to="blog_cover")

ингээд blog модэлийн харагдах байдал:

from django.db import models
from django.utils.text import slugify

class Blog(models.Model):
    title = models.CharField(max_length=50, null=True)
    body = models.TextField()
    author = models.CharField(max_length=50, null=True)
    slug = models.SlugField(unique=True, blank=True)
    cover = models.ImageField(upload_to="blog_cover")

def __str__(self):
        return self.title + '-' + self.author

def get_absolute_url(self):
        return "/%s" % self.slug

def save(self, *args, **kwargs):
        self.slug = slugify(self.title, allow_unicode=True)
        super(Blog, self).save(*args, **kwargs)

def author_slug(self):
        return "Publisher: %s - %s" % (self.author, self.slug)

Мэдээж models.py дээр ѳѳрчлѳлт оруулсан тул migration хийх шаардлагатай. Хэрвээ models.py дээр ямар нэг ѳѳрчлѳлт оруулсан л бол заавал migration хийх ёстойг байнга санаж хэрэгжүүлж сурах хэрэгтэй. Тэгэхээр одоо терминал дээр:

python manage.py makemigrations

Одоо demo_project/settings.py файлыг нээж хамгийн доод талын мѳрѳнд дараах 2 мѳрийг нэмнэ. Ингэснээр upload хийгдэх файлууд media хавтас дотор хуулагдахыг зааж ѳгнѳ. Мѳн файлруу хандахдаа domain.com/media/файлын_нэргэж хандахыг тохируулж ѳгч байгаа юм.

MEDIA_URL = '/media'
MEDIA_ROOT = os.path.join(BASE_DIR, 'media')

дээр тохируулсан url ээ demo_project/urls.py дээр тохируулж ѳгнѳ. Доорхи кодыг ѳмнѳх код дээр хуулж тавина.

...
from django.conf import settings
from django.urls import re_path
from django.views.static import serve
...

] + static(settings.MEDIA_URL, document_root=settings.MEDIA_ROOT)

Ингэснээр demo_project/urls.py файл ингэж харагдана.

"""demo_project URL Configuration

The `urlpatterns` list routes URLs to views. For more information please see:
    https://docs.djangoproject.com/en/1.11/topics/http/urls/
Examples:
Function views
    1. Add an import:  from my_app import views
    2. Add a URL to urlpatterns:  url(r'^$', views.home, name='home')
Class-based views
    1. Add an import:  from other_app.views import Home
    2. Add a URL to urlpatterns:  url(r'^$', Home.as_view(), name='home')
Including another URLconf
    1. Import the include() function: from django.conf.urls import url, include
    2. Add a URL to urlpatterns:  url(r'^blog/', include('blog.urls'))
"""
from django.conf.urls import url
from django.contrib import admin

from django.conf import settings
from django.urls import re_path
from django.views.static import serve

from blog.views import all_blog, single_blog

urlpatterns = [
    path('admin/', admin.site.urls),
    path('', all_blog, name="all_blog"),
    path('<slug>', single_blog, name="single_blog"),
] + static(settings.MEDIA_URL, document_root=settings.MEDIA_ROOT)

Одоо тэмплэйт дээрээ ѳѳрчлѳлт оруулж зураг харуулцгаая.

index.html нээгээд for loop дотор ингэж ѳѳрчлѳв.

{% for blog in blogs %}
    <div class="cell">
      <div class="media-object">
        {%if blog.cover %} <!--зураг байвал доорх img гарна-->
         <div class="thumbnail">
           <img src={{blog.cover.url}} alt="{{blog.title}}" class="cover"/>
         </div>
        {% endif %} <!--нѳхцѳл шалгалт дуусна-->
        <div class="media-object-section">
          <h4><a href="{{blog.get_absolute_url}}">{{blog.title|capfirst}}</a></h4>
          <p>{{blog.body|truncatechars:'140'}}</p>
          <a href="{{blog.get_absolute_url}}">Үргэлжлэл...</a>
        </div>
      </div>
    </div>
  {% endfor %}

Ингээд серверээ асааж эхлээд admin хэсгээс нэг блогруу cover зураг оруулая.

Одоо нүүр хуудсаа харвал

Зураг маань хэт том зураг байх нь үүнийг бага зэрэг css бичээд янзалж болно. Үүний тулд base.html -ын foundation.min.cssдоод талд доорхи мѳрийг нэмнэ.

<link rel="stylesheet" href="{% static 'css/style.css' %}">

Дараа нь static/css/style.css файл үүсгээд доорхи css ыг бичнэ.

.cover {
  width: 10rem;
  height: auto;
}

хадгалаад нүүр хуудсаа reload хийж харвал

Ингээд cover зураг admin аас оруулдаг боллоо. Дээр бичсэн шиг detail хуудас буюу single.html дээр cover гаргаж болох нь.

Github дээрх тѳслийн эх код update хийгдсэн. Нийтлэл таалагдсан бол clap & share хийж хэрэгтэй хүмүүст түгээгээрэй.

Django 007: Зураг, файл админаас upload хийх нь was originally published in limitx on Medium, where people are continuing the conversation by highlighting and responding to this story.

Django 2.x.x хувилбараас эхлээд python 3.xx л ашиглана гэсэн болохоор гол кодуудаа python 3 -т тааруулан ѳѳрчлѳх хэрэгтэй. Жишээ нь __unicode__ ашиглаж байгааг __str__ болгох хэрэгтэй г.м. Python 3 compatible болгох хэсэг нэг их ажил биш учир уншигч танд ѳѳрт тань энэхүү зугаатай ажлыг үлдээе. Энгийн google хайлтанд гараад ирэх илэрц шүү. Тиймээс Django 2.0 ын ѳѳрчлѳлтүүдыг шууд хийгээд явъя.

1. ForeignKey ашиглахад on_delete заавал бичнэ.

class MyModel(models.Model):
    group = ForeignKey(
        'MyGroup',
        on_delete=CASCADE,
    )

2. Namspace ашиглаж байгаа route -ууд заавал app_name шаардана.

urlpatterns = [
    path('myapp/', include('my_app.urls', namespace='my_app', app_name='my_app')),
]

Тэгэхээр include хийгдэж буй url файл нь дараах ѳѳрчлѳлттэй байна.

app_name='my_app'
urlpatterns = [
    # ...
]

Мѳн url гэж бичихгүй оронд нь path гэж бичнэ.

3. User object is_authenticated() болон is_anonymous() байхаа больсон

User ээс биш, моделын property болсон. Тэгэхээр дуудаж ашиглахдаа

user.is_authenticated() → user.is_authenticated
user.is_anonymous() → user.is_anonymous

4. urlresolver -оос reverse дуудахаа больсон

from django.core.urlresolvers import reverse

ингэж ашигладаг байсан нь доорхи замаар дууддаг болсон.

from django.urls import reverse

5. MIDDLEWARE_CLASSES -> MIDDLEWARE болсон

settings.py дотор MIDDLEWARE_CLASSES ѳѳрчлѳгдѳн MIDDLEWARE болсон.

6. django.shortcut.render_to_response() байхаа больсон

render_to_response() хуучирч django.shortcuts.render() ашиглах нь

7. SessionAuthenticationMiddleware шаардлагагүй болсон.

Django 1.10 аас эхлээд энэ middleware цаанаасаа enabled болохоор

Дээрх ѳѳрчлѳлтүүдийг зѳвхѳн ѳѳрт байгаагаа ѳѳрчлѳѳрэй. Ѳмнѳх хувилбар ахиулах гэж ядаргаатай санагдаж байвал шууд django 2.0 дээр тѳслѳѳ эхлүүлээд доторхоо зѳѳсѳн ч болно.

Манай demo blog -ын хувьд аль болох хоцрогдох функцууд ашиглаагүй учраас, мѳн дээрх ѳѳрчлѳлтѳѳс ашиглаж байгаа зүйл бага болохоор одоохондоо ямар ч асуудалгүй шилжлээ.

Update хийгдсэн тѳслийн эх код github дээр байршсан.

Нийтлэл таалагдсан бол clap & share хийж бусад хэрэгтэй хүмүүст нь хүргээрэй.

Django 006: Django 1.x.x дээрх тѳслийг Django 2.x.x migrate хийх нь was originally published in limitx on Medium, where people are continuing the conversation by highlighting and responding to this story.

API Аюулгүйн жагсаалт

API гаргах, загварчлах, тестлэхэд аюулгүйн талаас авах сөрөг арга хэмжээний жагсаалт.

Authentication

• Basic Auth бүү ашигла, Стандарт authentication ашигла (Жнь. JWT, OAuth).
• Authentication -ын token generation, password storage зэргийг бүү дахин шинээр хий, стандарт ашигла.
• Нэвтрэх(Login) үед Max Retry ашиглан хорилт хий.
• Чухал өгөгдлүүдийг encrupt хий.

JWT (JSON Web Token)

• Санамсаргүй үүссэн түлхүүр (JWT Secret) ашиглаж token -ыг brute force -оос хамгаал.
• Payload -аас алгоритмаа бүү задал. Backend дээрээ хий (HS256 or RS256).
• Токен дуусах хугацаа (TTL, RTTL) аль болох бага болго.
• Чухал өгөгдлийг JWT payload -д бүү хадгал, decode хийхэд амархан.

OAuth

• redirect_uri -ыг үргэлж сервер талд шалган зөвшөөрөгдсөн URL эсэхийг шалга.
• Аль болох токен биш код солилц (response_type=token -ыг зөвшөөрч болохгүй).
• OAuth authentication -ын үед state параметрийг санамсаргүй үүссэн hash ашиглан CSRF ээс сэргийлнэ.
• Хувьсагчид анхны утга заавал оноож өг, утгыг байнга шалга.

Access

• Хүсэлтийн тоог хязгаарлаж (Throttling) DDoS / brute-force дайралтаас хамгаална.
• HTTPS ашиглаж сервер талдаа MITM (Man In The Middle Attack) дайралтаас хамгаална.
• HSTS header -ыг SSL дээр ашиглаж SSL Strip дайралтаас хамгаална.

Input

• Яг зөв HTTP хүсэлтийг ашигла: GET (унших), POST (үүсгэх), PUT/PATCH (орлуулах/солих), мөн DELETE (устгах), бас 405 Method Not Allowed -ыг хүсэлтийн төрөл тодорхойгүй үед ашигла.
• content-type -ыг хүсэлтийн header (Content Negotiation) дээр шалгаж зөвхөн дэмжигдсэн төрлийг зөвшөөр (Жнь. application/xml, application/json, гэх мэт) бас төрөл нь таарахгүй бол 406 Not Acceptable хариу буцаа.
• content-type -ыг post хийх өгөгдөл дээр шалга (Жнь. application/x-www-form-urlencoded, multipart/form-data, application/json, г.м).
• Хэрэглэгчээс гараас оруулсан утгыг шалгаж түгээмэл нүхнүүдээс сэргийлнэ. (Жнь. XSS, SQL-Injection, Remote Code Execution, г.м).
• Чухал өгөгдлүүдийг (credentials, Passwords, security tokens, or API keys) URL ээр бүү явуул, оронд нь стандарт Authorization header ашигла.
• API Gateway үйлчилгээ ашиглан Rate Limit Policies (Жнь. Quota, Spike Arrest, Concurrent Rate Limit) болон cache хийх, мөн API deploy хийхэд ашигла.

Processing

• Нэвтрэх явцад алдаа гарахаас сэргийлж бүх endpoint -уудыг нэвтрэх шаардлагатай эсэхийг шалгах.
• Хэрэглэгчийн ID ашиглахаас зайлсхийх. /user/654321/orders үүний оронд /me/orders ашиглах.
• Автоматаар нэмэгдэх ID бүү ашигла. UUID ашигла.
• XML файл parse хийх үед entity parse бүү хий ингэснээр XXE (XML external entity attack) -аас сэргийлнэ.
• XML файл parse хийх үед entity expansion бүү хий ингэснэр Billion Laughs/XML bomb дайралтаас сэргийлнэ.
• Файл upload хийхэд CDN ашигла.
• Их хэмжээний өгөгдөлтэй ажиллах үед Workers болон Queue ашиглан үйлдлийг аль болох background -д ажиллуулж хариуг хурдан явуулах нь HTTP Blocking -оос сэргийлнэ.
• DEBUG горимыг унтраах.

Output

• X-Content-Type-Options: nosniff header дээр явуул.
• X-Frame-Options: deny header дээр явуул.
• Content-Security-Policy: default-src 'none' header дээр явуул.
• Ул мөр үлдээх X-Powered-By, Server, X-AspNet-Version header үүдыг устга.
• content-type -ыг хүсэлтийн хариуд нь харгалзан буцаах, Хэрвээ application/json хүсэлт явсан бол хариуд нь content-type нь application/json байх.
• Чухал өгөгдлүүд credentials, Passwords, security tokens бүү буцаа.
• Тухайн ажилд тохирсон статус код илгээх. (Жнь. 200 OK, 400 Bad Request, 401 Unauthorized, 405 Method Not Allowed, г.м).

CI & CD

• unit/integration тест ашиглан системийн загварчлал, хэрэгжилтийг шалгах.
• Код review ашигла, мөн өөрөө өөрийгөө ч шалга.
• Бүх тусдаа хэсгүүд бүр vendor сан, бусад нэмэлт сангууд бүгдийг нь AV програмаар статикаар шалга.
• Ямар ч үед deploy хийхэд амар шийдэл гаргах.

Мөн үзнэ үү:

• yosriady/api-development-tools — RESTful HTTP+JSON API-г бүтээхэд хэрэгтэй нөөцүүдийн цуглуулга.

Оролцоо

Энэ рэпод оролцох бол fork хийж өөрчлөлтөө оруулаад pull request үүсгэнэ үү. Асуулт байвал бидэнтэй холбогдоорой team@shieldfy.io.

Нийтлэл таалагдсан бол clap & share хийж ижил сонирхолтой хүмүүст хүргээрэй.

API аюулгүйн зѳвлѳмж was originally published in limitx on Medium, where people are continuing the conversation by highlighting and responding to this story.

Ѳмнѳх бичлэгээ дагаад хийсэн бол одоо үргэлжлүүлээд views.py файлыг нээгээд дээд хэсэгт доорхи импорт кодыг хуулж тавина.

from django.core.paginator import EmptyPage, PageNotAnInteger, Paginator

дараа нь all_blog функц дотор доорхи ѳѳрчлѳлтийг оруулна.

def all_blog(request):
    blog_list = Blog.objects.all()
    paginator = Paginator(blog_list, 3)
    page = request.GET.get('page')
    blogs = paginator.get_page(page)
    return render(request, 'index.html', {'blogs': blogs})

Харин одоо тэмплэйт дээр ѳѳрчлѳлт оруулна. Foundation -ын documentation -ээс хуудаслалтын маркапыг хуулж бага зэрэг ѳѳрчлѳѳд,templates/index.html файлыг нээж дараах ѳѳрчлѳлтийг оруулна.

{% extends 'base.html' %}
{% block content %}
  <div class="grid-x">
  {% for blog in blogs %}
    <div class="cell">
      <div class="media-object">
        <div class="media-object-section">
          <h4><a href="{{blog.get_absolute_url}}">{{blog.title|capfirst}}</a></h4>
          <p>{{blog.body|truncatechars:'140'}}</p>
          <a href="{{blog.get_absolute_url}}">Үргэлжлэл...</a>
        </div>
      </div>
    </div>
  {% endfor %}
  <nav aria-label="Pagination">
    <ul class="pagination">
      {% if blogs.has_previous %}
      <li class="pagination-next"><a href="?page={{ blogs.previous_page_number }}" aria-label="Next page">Ѳмнѳх</a></li>
      {% endif %}
      {% if blogs.has_next %}
      <li class="pagination-next"><a href="?page={{ blogs.next_page_number }}" aria-label="Next page">Дараах</a></li>
      {% endif %}
    </ul>
  </nav>
  </div>
{% endblock content %}

Ингээд render хийгээд харвал дараах үр дүнг үзүүлэх нь.

Дараах товчийг дараад:

Ингээд маш хялбар аргаар хуудаслалт хийчихлээ.

Тѳслийн код github дээр update хийгдсэн.

Django 005: Хуудаслалт хэрхэн хийх вэ? was originally published in limitx on Medium, where people are continuing the conversation by highlighting and responding to this story.

Эхлээд virtual environment үүсгэх хэрэгтэй. Миний хувьд virtualenvwrapper ашигладаг, гэхдээ энэ удаа virtualenv ашиглая. Тѳслийн хавтасруу ороод terminal нээгээд доорхи командыг бичиж ажиллуулна.

Virtualenvwrapper ашиглах бол энэ заавраар тохируулна. Заавал virtualenvwrapper суулгах шаардлагагүй.

virtualenv -p python3 venv

Дээрхи команд ажиллаж дуусаад тѳслийн хавтсанд venv хавтас үүсэх ба үүсгэхдээ python3 ашиглана гэх нэмэлт тохиргоо ѳгч байна. -p python3 бичээгүй тохиолдолд default -аар python2 ашиглах юм. Дараа нь доорхи командаар virtualenvironment -оо идэвхижүүлнэ.

source venv/bin/activate

Одоо яг зѳв үүссэн эсэхийг шалгаж үзвэл:

which python

үр дүн нь сая үүсгэсэн venv/bin/python ашиглаж байгааг харуулж байна.

(venv) zorig$ which python

/Users/zorig/projects/django-demo_project/venv/bin/python

Одоо шинээр үүсгэсэн virtual environment дотроо Django суулгах шаардлагатай. Доорхи командаар django хамгийн сүүлийн хувилбар татаж авна. Гэхдээ … 😧

pip install django

Анх django тѳслѳѳ үүсгэхдээ Django 1.11 дээр үүсгэсэн тул дээрх командыг ѳѳрчлѳх шаардлагатай.

Дараагийн нийтлэл дээр django 1.11 ээс django 2.0 хувилбар руу шилжүүлэх(migrate) хийх талаар бичье

pip install django==1.11

Ингээд django маань суугаад дууссан бол сервер ээ ажиллуулж үзээд localhost:8000 руу хандаж үзье

python manage.py runserver

ямар нэг асуудалгүй ажилласан бол одоо requirements.txt файл үүсгэх хэрэгтэй. Энэ файл нь яг ямар сангууд, хэд гэдэг хувилбартайг энэ тѳсѳлд ашиглаж байгаа вэ гэх товч мэдээллийг агуулна. Ингэснээр ѳѳр хѳгжүүлэгч тѳсѳл дээр ажиллах, эсвэл тѳслѳѳ ѳѳр компьютер дээр хѳгжүүлэхэд амар хялбар болж ѳгѳх юм. requirements.txtмаань хоосон учраас суусан сангуудын мэдээллийг бичиж ѳгье.pip listашиглаж нийт суусан сангаа харъя.

Django (1.11)
pip (9.0.3)
pytz (2018.3)
setuptools (39.0.1)
wheel (0.30.0)

requirements.txt файлд гараар бичиж ѳгч болох ч заримдаа тэмдэгт орхиод алдаж магадгүй зэрэг асуудалтай. Үүнээс сэргийлэх нэгэн автомат үйлдэл нь

pip freeze > requirements.txt

Ингэснээр дээр гарч ирсэн сангуудын жагсаалтыг requirements.txt файлруу автоматаар бичих юм.

Одоо ѳѳр нэгэн эсвэл танай багийн хѳгжүүлэгч тѳслийг clone хийж дотор нь virtualenv үүсгээд

pip install -r requirements.txt

командыг ажиллуулахад virtual environment дотроо requirements.txt доторх бүх санг суулгаад зѳвхѳн нэмэлт хѳгжүүлэлтээ хийхэд бэлэн болох юм.

Энд venv файлыг git рүү ХЭЗЭЭ ч хуулж болохгүй тул .gitignore файл дотор доорхи ѳѳрчлѳлтийг оруулав.

*.swp
*.pyc
.vscode
venv/

Тѳслийн код github дээр update хийгдсэн.

Django 004: Хѳгжүүлэлтийн орчны тохиргоо хэрэгжүүлэлт was originally published in limitx on Medium, where people are continuing the conversation by highlighting and responding to this story.

Вэб хѳгжүүлэлтийг дотор нь хэрэглэгчид харагдах, хэрэглэгчийн харилцах хэсэг болох front-end, тухайн харилцааны үр дүнд(товч дарах, форм бѳглѳх г.м) цаана нь ямар үйлдэл гүйцэтгэх, логик ажиллагааг хийх back-end хэсэг гэж 2 хуваадаг.

Тэгэхээр бид front-end хэсгийг одоо хийнэ. Front-end хѳгжүүлэлтийн шаардлага дүрэм гэх зүйлийг энд бичих нь хэт анхан шатны зүйл учраас алгасъя. Манай нѳхцѳлд блог маань гүүглийн хайлтад ѳртѳх зорилготой тул mobile friendly буюу утсанд зориулсан хувилбартай хийх ёстой. Утас болон компьютероос үзэхэд зориулсан хэрэгслүүд байдгаас хэдийг дурдвал:

• Bootstrap — хамгийн алдартай олонд хүрсэн frontend library
• Foundation — хамгийн ѳндѳр customize хийх боломжит frontend library
• SemanticUI — хамгийн олон компоненттэй frontend library
• Бусад сангуудыг эндээс харж болно

Дээрхээс foundation -ыг сонгон UI(user interface) хэсгээ хийнэ. Шалтгааныг эндээс харж болно. Ер нь л customize хийх тал дээр хамгийн сайн нь болохоор мѳн дээр нь flexbox -ыг маш сайн integrate хийсэн учраас сонголоо.

Эхлээд django дээр template -ын удамшил ашиглах хэрэгтэй. templates хавтас дотор base.html нэртэй файл үүсгэж дотор нь доорх html -ыг бичнэ.

<!DOCTYPE html>
<html lang="mn">
<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>Demo Blog</title>
</head>
<body>
  {% block content %}
  {% endblock content %}
</body>
</html>

Энд html хуудасны стандарт анхны маркапыг бичиж өгсөн түүнчлэн django template хэлний нэг боломж болох block -ыг ашиглан удамшил болгоно. {% block content %} -оос эхлээд {% endblock content %} хооронд өөр хуудасны контентийг гаргана. Ингэснээр зарим хэсгийн маркапыг дахин бичихээс зайлсхийх давуу талтай. Одоо templates/index.html дээр өөрчлөлт оруулна.

{% extends 'base.html' %}
{% block content %}
  {% for blog in blogs %}
    <a href="{{blog.get_absolute_url}}">{{blog.title}}</a>
    {{blog.body}}
    <hr>
  {% endfor %}
{% endblock content %}

templates/index.html дээр {% extends 'base.html' %} -ыг дуудсанаар base.html -ын дотор ашиглахыг зааж өгч, харин {% block content %} -с {% endblock content %} хооронд юу гарахыг нь бичиж өгнө. Ингээд render хийгдэх хуудсыг developer tools ээр нээгээд харвал доорх үр дүн гарна.

Харин одоо base.html болон django -ын template удамшлыг ашиглаад foundation ээ дуудан ашиглая.

Foundation -ын вэб сайтаас өөртөө тохируулан custom build хийн татаж авч болно эсвэл шууд download everything гээд бүгдийг нь татаж авч болно. Хэрвээ вэбийн дуудах хурдыг хурдан байлгана гэвэл хэрэглэхгүй компонентуудыг хасаж татаж авсан нь дээр. Татаж авсан файлыг төслийн хавтас дотор static хавтас үүсгэж дотор нь задална.

demo_project/
  blog/
  db.sqlite3
  demo_project/
  manage.py
  README.md
  static/
    css/
      foundation.min.css
    js/
      foundation.min.js
      jquery.js
      what-input.js
  templates/

Одоо demo_project/settings.py файлын хамгийн доод хэсэгт доорх кодыг хуулж тавина. Ингэснээр static файлуудын хавтасыг django -д зааж өгнө. Харин статик файлыг дуудахдаа domain-хаяг/static/css/foundation.min.css гэж дуудна гэсэн URL -ыг бас тохируулсан байна.

STATIC_URL = '/static/'
STATICFILES_DIRS = (
    os.path.join(BASE_DIR, 'static'),
)

ингээд base.html дээр дараах өөрчлөлтийг оруулна. Django -ын template хэл нь бидэнд static файлууд дуудах нэг боломж {% static ..%}гаргаж өгсөн байгааг ашиглана. Ингэснээр дээр settings.py дээр тохируулж өгсөн хавтаснаас эдгээр файлыг хайх юм.

Жич base.html -ын хамгийн дээд мөрөнд {% load static %} гэсэн байгааг мартаж болохгүй шүү.

{% load static %}
<!DOCTYPE html>
<html lang="mn">
<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>Demo Blog</title>
  <link rel="stylesheet" href="{% static 'css/foundation.min.css' %}">
</head>
<body>
  {% block content %}
  {% endblock content %}
  <script src="{% static 'js/jquery.js' %}"></script>
  <script src="{% static 'js/what-input.js' %}"></script>
  <script src="{% static 'js/foundation.min.js' %}"></script>
  <script>
     $(document).foundation()
  </script>
</body>
</html>

Ингээд серверээ ажиллуулаад python manage.py runserver гээд хөтөчөө нээгээд localhost:8000 руу хандахад дараах үр дүнг харуулна.

Одоо маркап аа бага зэрэг янзалъя foundation-ын document дээрх navbar -ын маркапыг templates/base.html -ын {% block content %} -ын дээд талд байрлуулна.

  <div class="top-bar">
    <div class="top-bar-left">
      <ul class="dropdown menu" data-dropdown-menu>
        <li class="menu-text">Site Title</li>
        <li>
          <a href="#">One</a>
          <ul class="menu vertical">
            <li><a href="#">One</a></li>
            <li><a href="#">Two</a></li>
            <li><a href="#">Three</a></li>
          </ul>
        </li>
        <li><a href="#">Two</a></li>
        <li><a href="#">Three</a></li>
      </ul>
    </div>
    <div class="top-bar-right">
      <ul class="menu">
        <li><input type="search" placeholder="Search"></li>
        <li><button type="button" class="button">Search</button></li>
      </ul>
    </div>
  </div>
{% block content %} <!-- block content хэсэг -->
{% endblock content %} 

Дараа нь templates/index.html дээр дараах өөрчлөлтийг оруулая. CSS -ын Flexbox -ыг foundation дээр бас ашиглах боломжтой тул доор ашиглав.

{% extends 'base.html' %}
{% block content %}
  <div class="grid-x">
  {% for blog in blogs %}
    <div class="cell">
      <div class="media-object">
        <div class="media-object-section">
          <h4><a href="{{blog.get_absolute_url}}">{{blog.title|capfirst}}</a></h4>
          <p>{{blog.body|truncatechars:'140'}}</p>
          <a href="{{blog.get_absolute_url}}">Үргэлжлэл...</a>
        </div>
      </div>
    </div>
  {% endfor %}
  </div>
{% endblock content %}

Энд django дээрх өөрийнх нь template tag болох capfirst ашиглан зөвхөн эхний үсгийг томоор render хийх, truncatechars ашиглан нийт render хийх тэмдэгтийн тоог хязгаарлаж өгч байна. Ингээд эцсийн үр дүнг хөтчөөс харвал:

Өөрчлөлт орсон код github дээр тавигдсан байгаа. Master branch дээр хамгийн сүүлийн өөрчлөлтүүд харин бусад branch(001, 002 …) дээр тухайн нийтлэлд харьяалагдах өөрчлөлтүүд тус тус байна.

Хэрвээ энэ нийтлэл танд таалагдсан бол clap, share хийж бусад хүмүүст ч бас хүргээрэй.

Django 003: Front-end хөгжүүлэлт буюу demo блогоо царайлаг болгох нь was originally published in limitx on Medium, where people are continuing the conversation by highlighting and responding to this story.

Ember дээр Route -тэй салшгүй холбоотой нэг зүйл нь Controller юм. Controller нь route дуудагдах үед render хийгдэх тусгай компонентийн үүрэгтэй. Controller нь route ээс ирэх ганцхан model гэх property авдаг. Ашиглаж үзвэл:

ember g controller controller-name

Энд үүсгэх controller -ын нэр нь route -ын нэртэй таарч байх ёстой. Тэгэхээр манай нөхцөлд өмнө нь API -аас дата авч байгаа хэсгийг бага зэрэг өөрчлөөд user route, мөн user/detail route үүсгэе.

ember g route user
ember g route user/detail

ингээд router.js дээр дараах өөрчлөлтийг оруулна.

import EmberRouter from '@ember/routing/router';
import config from './config/environment';

const Router = EmberRouter.extend({
  location: config.locationType,
  rootURL: config.rootURL
});

Router.map(function() {
  this.route('user', function() {
    this.route('detail', { path:'/:id'}); //detail дээр id авна
  });
});

export default Router;

өмнөх app/routes/index.js route дээр бичсэн хэсгийг app/routes/user/detail.js руу хуулаад

import Route from '@ember/routing/route';

export default Route.extend({
  model() {
    return this.store.findRecord('user', 'zorig') 
  }
});

app/templates/user/detail.hbs дотор дараах хэсгийг хуулж тавина.

<h4>{{model.name}}</h4>
<p>{{model.bio}}</p>
<span>Followers: {{model.followers}}</span>
<span>Following: {{model.following}}</span>

Одоо controller үүсгэе ember g controller user/detail ингэснээр app/controllers/user/detail.js файл үүснэ.

Энд user/detail route-тай адил controller үүсгэж байна.

Харин одоо controller дотор буюу app/controllers/user/detail.js дотор доорхи кодыг бичнэ.

Доор ember -ын toggleProperty ашиглаж boolean утга сольж байна.

import Controller from '@ember/controller';

export default Controller.extend({
  isPictureHide: true,
  actions: {
    togglePicture() {
      this.toggleProperty('isPictureHide');
    }
  }
});

Дараа нь app/templates/user/detail.hbs дээр дараахи өөрчлөлтийг оруулна.

<h4>{{model.name}}</h4>
<p>{{model.bio}}</p>
<span>Followers: {{model.followers}}</span>
<span>Following: {{model.following}}</span>
<!-- зураг харах/нуух товч шинээр нэмнэ -->
{{#if isPictureHide}}
  <div class="image">
    <button {{action 'togglePicture'}}>Зураг</button>
  </div>
{{else}}
<div class="image">
  <button {{action 'togglePicture'}}>Нуух</button><br/>
  <img src="{{model.avatar_url}}" alt="{{model.name}}"/>
</div>
{{/if}}

Ингээд эцэст нь сервер ээ ажиллуулаад( ember s ) localhost:4200/user/zorig хаягруу хандаж үзэхэд доорхи үр дүнг үзүүлнэ.

“Зураг” товчийг дарж үзээрэй. ;)

Эх кодыг github -аас

Ember controller ашиглах нь was originally published in Zori’s ember.js тэмдэглэл on Medium, where people are continuing the conversation by highlighting and responding to this story.