[class: PM Camp@Fast Campus#6] 개발 #4 – 아랍어는 어떻게 처리하나요? (my note is WIP)

5. 27 수

개발 #4 – 아랍어는 어떻게 처리하나요?

다국어 환경과 웹 접근성 다국어 환경에서 고려해야 할 점, 실습 – 다국어 환경을 고려한 웹 사이트 제작(기존 사이트 수정) 웹 접근성을 고려한 웹 사이트 제작 원칙

김태곤

1. Multi-language environment and web accessibility [Taegon Kim@Fancy.com, software engineer]
1. lesson:
1. areas of SWE’s interest: 1. repetitive and nonrepetitive 2. diff and non-diff
2. multi-language support:
1. translation services
1. free service: pootle.locamotion.org/en and weblate.org/ko (c.f. both written in Python)
2. paid service: c.f. crowdin.com, upwork.com
2. file format
1. on iOS, file format is .strings
2. on JavaScript, check out moment.js
3. content: text, currency (e.g. 10,000.123 for Korea, 10 000,123 for France), weather (e.g. dd-mm-yyyy for UK, mm-dd-yyyy for US)
4. process: i18n to English first, then move to other languages
5. button design: give some space for texts within buttons
6. RTL: e.g. Arabic, Hebrew
7. process: provide context (e.g. for Fancy, subscribe can be translated

2. personal takeaway:
1. learn how to use Git’s Pull feature

[class: PM Camp@Fast Campus#5] 개발 #3 – 직접 개발해 볼까? (my note is WIP)

3주차

5. 23 토

개발 #3 – 직접 개발해 볼까?

간단한 웹 서비스를 개발하면서 개발 개념 이해하기 PHP, HTML, CSS, JavaScript, MySQL의 기초 익히기 Bootstrap을 사용한 간단한 웹 서비스를 GitHub에 저장하기. 주의! 개발 과정을 이해하기 위한 간단한 예제를 만듭니다. 실제  서비스 개발과 거리가 있습니다.

1. Understanding development concept via developing a simple web service [Taegon Kim@Fancy.com, software engineer]
1. lesson
1. Permission: e.g. d (directory) r (read) w (write) x (execute) r- (<-group) xr (<-others other than owner and group) -x
1. c.f. 4 (read), 2 (write), 1 (execute)): e.g. chmod 644 file_name
2. Process
1. usage check: for Windows, use taskmgr on Prompt; for Mac, monitor on Spotlight
2. description: “In computing, a process is an instance of a computer program that is being executed. It contains the program code and its current activity. Depending on the operating system (OS), a process may be made up of multiple threads of execution that execute instructions concurrently.” <source: Wikipedia>
3. Thread
1. description: “In computer science, a thread of execution is the smallest sequence of programmed instructions that can be managed independently by a scheduler, which is typically a part of the operating system. The implementation of threads and processes differs between operating systems, but in most cases a thread is a component of a process. Multiple threads can exist within the same process and share resources such as memory, while different processes do not share these resources. In particular, the threads of a process share its instructions (executable code) and its context (the values of its variables at any given moment)” <source: Wikipedia>
2. c.f. in installing PHP, try thread safe for safer processing (?) instead of non thread safe
4. PHP
1. description: PHP (recursive acronym for PHP: Hypertext Preprocessor) is a widely-used open source general-purpose scripting language that is especially suited for web development and can be embedded into HTML. <source: PHP.net>
2. installing PHP
1. on Windows
1. flow: unzip downloaded PHP installation file -> change the folder name to php -> move the folder on C: -> property information? -> select PATH -> add “;C:\php” -> on cmd, type php
2. check: on cmd, type %appdata% -> see if npm folder exists, otherwise create one
2. on Mac
1. no need to install
2. c.f. type php -v for version info
5. Bracket
1. powerful usecase: using extract feature (e.g. example)
6. Git
1. need to update both server (i.e. web) and client program (i.e. GitHub)
1. server: Pull Request -> Merge -> etc.
2. client program: select Sync
2. c.f. GitBook to create a story on Git environment by using powerful history management system
7. package manager: npm and bower under JavaScript environment
1. install bower: type sudo npm install bower -g -> install bower
2. c.g. programming language containing package manager (e.g. Go)
8. Bootstrap: Bootstrap is the most popular HTML, CSS, and JS framework for developing responsive, mobile first projects on the web <source: Bootstrap>
1. Bootstrap component: link
2. Bootstrap theme: e.g. {wrap}bootstrap, Bootstrap Watch
9. PHP server setup: php -S (<-server) 127.0.0.1:8000 . (<- folder)
1. port number (c.f. link)
1. my computer: 8000
2. http: 80
3. https: 443
4. ssh: 22
2. c.f. port forwarding concept: e.g. 8000 -> 8000, 8001
10. webpage execution order: server side (e.g. PHP, .net, Java) -> client side (e.g. JavaScript)
11. progressive enhancement: add JavaScript codes after building basic features (e.g. add JavaScript’s accordion UI after filling in detail information on each row e.g. link)
12. graceful degradation: e.g. in 60 fps game, provide 10 fps at minimum
1. c.f. 16 fps for human eyes to see continuous movement on screen (c.f. 30 fps for animation)
13. language support
1. utf-8: unicode
1. 4 bytes per each character (e.g. English uses 1 byte, Korean uses 3 bytes)
2. c.f. Korean
1. 조합형 (~11,500 ea) vs. 완성형 (~5,000 ea)
2. 완성형 (cp (code page) 949, euc-kr)
14. minification:
1. .min file: removed space file (<- suggest at your company to implement this method)
15. grid: e.g. dividing page by 12 columns (c.f. 24 columns)
16. RDBMS (relational database management system): e.g. SQL
1. method: get (e.g. search query), post (e.g. signup info)
2. SQL: “SQL (Structured Query Language) is a special-purpose programming language designed for managing data held in a relational database management system (RDBMS), or for stream processing in a relational data stream management system (RDSMS).” <source: Wikipedia> enabling CRUD (create, read, update, delete)
3. password: use sha1 method instead of md5
17. issue: don’t trust clients because they can be manipulated
1. recommendation: consider implementing server verification process not to be manipulated by client (e.g. browser): e.g. for promotional event, implement server verification process
18. hacking via SQL injection method: e.g. type ‘’ OR true OR ‘’ on ID entry box

2. personal takeaway
1. Q. How to know whether a web service has plaintext for password (aka no password encryption)?
2. A: check whether you could retrieve password via finding password feature

[class: PM Camp@Fast Campus#4] 개발 #2 – 개발 환경을 구축하고 맛보기 (my note is WIP)

5. 20 수

개발 #2 – 개발 환경을 구축하고 맛보기

개발에 필요한 어플리케이션을 설치하고 간단히 사용하기 GUI, CUI, Shell, Permission, Process, Thread SVC, GitHub, Wiki, Issue Tracker, Markdown

1. Terms related to development environment [Taegon Kim@Fancy.com, software engineer]
1. lesson
1. CUI: character user interface (aka CLI (command-line interface))
2. shell: usually referring to Linux CUI e.g. bash csh
3. SVC (source version control): aka SCM (source code management or software configuration management)
4. tagging: nicknaming for a code of a specific time
5. branch: features not introducing yet e.g. an experimental feature
6. conflict: problematic situation occurred when diffs were merging
7. resolve: solving the conflict
8. Git (distributed development) is more popularly used then SVN (centralized development) <source: Stack Overflow>
9. project hosting service: GitHub, Bitbucket
10. markdown:
1. description: markup language with plain text formatting syntax designed so that it can be converted to HTML and many other formats using a tool by the same name. <source: Wikipedia>
2. syntax: e.g. #main-title#, ##subtitle##, ###sub-subtitle###, *italics*, **bold**, ~strikethrough~
11. fork: In software engineering, a project fork happens when developers take a copy of source code from one software package and start independent development on it, creating a distinct and separate piece of software. <source: Wikipedia>
12. CDN (content delivery network): e.g. CloudFlare

2. personal takeaway
1. tool: Bracket, Wrike

[class: PM Camp@Fast Campus#3] 개발 #1 – 알고 보면 쉬운 개발 용어 (my note is WIP)

2주차

5. 16 토

개발 #1 – 알고 보면 쉬운 개발 용어

다양한 개발 용어를 이해해 보자 IP, DNS, Host, Protocol, HTTP Front-end, Back-end, Server/Client, 자주 사용하는 프로그래밍 언어, Ajax

김태곤

1. Getting familiar with development terms [Taegon Kim@Fancy.com, software engineer]
1. lesson
1. communication tips
1. use numbers instead of descriptive wordings: e.g. move to the right by 15 px vs. move a little to the right
2. provide detailed and tangible explanation instead of ambiguous and intangible: e.g. latency when pressing on Submit button vs. something wrong with text entry vs.
3. use png instead of jpg (reason: difficult to pinpoint exact color)
4. consider big picture (e.g. feasibility, resource, cost) first before making a request
5. tell animation name and CSS code (link) and mouse over effect (link)
6. before asking questions:
1. before asking any questions, read previous conversation history
2. ask how long will it take to finish a task instead of you can finish this within short period of time
3. c.f. read Joel on Software (link, amazon link)
2. image
1. vector vs. bitmap (raster): vector (e.g. svg, ai format; icon image), bitmap (png, jpg, gif)
2. 1 pixel: combination of red, green, blue
3. color: 0~255 color
4. #0000FF: first 00 (red), second 00, last FF, requiring 3 byte
5. to express transparency, add another byte: e.g. rgba (255, 255, 255, 0.7)
6. icon font: link
3. the Internet and Web
1. IP address
2. localhost: 127.0.0.1 (aka my computer)
3. tracking command: e.g. dig taegon.kim +trace
4. server-client: relative concept because the server can become a client
4. developer
1. role
1. client side: web publisher, javascript
2. server side:web application developer, DBA (database administrator), SE (system engineer)
2. programming
1. application code by condition
2. repetitive code
3. clustered code
3. classification of programming language
1. compile language
1. server side: C/C++, Java
2. client side: n/a
2. interpreter language
1. server side: Python, PHP, Ruby
2. client side: JavaScript
4. library and framework
1. license
1. GPL: need to make entire codes open source if used any (e.g. Linux related codes)
2. LGPL: need to make codes regionally open source where modification happened
3. BSD, MIT: no restriction in usage
5. server service
1. some concept: vertical scaling, sharding
2. service: Baas, Paas, microservice (e.g. address service, paygate service)
6. tool: e.g. asana.com, slack.com
7. cookie: data leaving a mark on server
1. c.f. cookie contains session id
8. c.f. http: brings header and body info on network
9. AJAX (asynchronous JavaScript and XML)
1. can do: text data, file upload (only in recent browsers)
1. XHR (XMLHttpRequest) 2: allowing file uploads, auto-save
2. cannot do: ?
3. AJAX usage: check status at XHR on Chrome browser
10. JSON (JavaScript Object Notation): A representation of structured data like XML; great for both server and client side developers
11. API (Application Programming Interface): point of useful chunk of libraries
12. XML (Extensible Markup Language): markup language that defines a set of rules for encoding documents in a format which is both human-readable and machine-readable.
13. SPA (Single-Page Application): a web application or web site that fits on a single web page with the goal of providing a more fluid user experience akin to a desktop application <source: Wikipedia>
14. DOM (Document Object Model): document is referring to HTML doc, used in JavaScript
1. DOM API: to make web page more dynamic

2. personal takeaway
1. understand rudimentary concepts to build web service