From 016abdf8756efd90e1cb760e81a0587518f23ad2 Mon Sep 17 00:00:00 2001 From: Can Sirin <8138047+cansirin@users.noreply.github.com> Date: Sat, 9 Mar 2024 01:04:34 -0800 Subject: [PATCH 1/2] Update factory_functions_and_module_pattern.md --- .../factory_functions_and_module_pattern.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/content/odin/javascript/organizing_your_javascript_code/factory_functions_and_module_pattern.md b/content/odin/javascript/organizing_your_javascript_code/factory_functions_and_module_pattern.md index 009d0be1..d602f5c4 100644 --- a/content/odin/javascript/organizing_your_javascript_code/factory_functions_and_module_pattern.md +++ b/content/odin/javascript/organizing_your_javascript_code/factory_functions_and_module_pattern.md @@ -267,7 +267,7 @@ Take the calculator example into consideration. It's very easy to imagine a scen - [The article on closures](https://wesbos.com/javascript/03-the-tricky-bits/closures) 1. [Tarek Sherif's article discussing the problems with constructors](https://tsherif.wordpress.com/2013/08/04/constructors-are-bad-for-javascript/) goes into depth while suggesting factories as a solution. 1. Read this article on [module pattern in JavaScript](https://dev.to/tomekbuszewski/module-pattern-in-javascript-56jm) by Tomek Buszewski. -1. In case you prefer video lessons, [this YouTube series on module pattern](https://www.youtube.com/playlist?list=PLoYCgNOIyGABs-wDaaxChu82q_xQgUb4f) covers most of the content that we have discussed. +1. As an optional alternative, in case you prefer video lessons, [this YouTube series on module pattern](https://www.youtube.com/playlist?list=PLoYCgNOIyGABs-wDaaxChu82q_xQgUb4f) covers most of the content that we have discussed. Note that the videos include jQuery, but you don't need to understand the jQuery syntax since the focus is on the module pattern concept. From 42424acc1356df169a83af21efd78b6fbee94fda Mon Sep 17 00:00:00 2001 From: Can Sirin <8138047+cansirin@users.noreply.github.com> Date: Sat, 9 Mar 2024 01:32:09 -0800 Subject: [PATCH 2/2] update odin content --- .../introduction_to_web_development.md | 16 ++++--- .../introduction/motivation_and_mindset.md | 28 ++++++----- .../javascript_basics/project_calculator.md | 2 +- .../computer_science/project_recursion.md | 6 +-- .../es6_modules.md | 2 +- .../objects_and_object_constructors.md | 8 ++-- .../project_library.md | 6 ++- .../webpack.md | 36 +++++++++----- .../testing_javascript/more_testing.md | 9 ++-- .../testing_javascript/project_battleship.md | 48 +++++++++++-------- 10 files changed, 96 insertions(+), 65 deletions(-) diff --git a/content/odin/foundations/introduction/introduction_to_web_development.md b/content/odin/foundations/introduction/introduction_to_web_development.md index 8357f523..17a92f93 100644 --- a/content/odin/foundations/introduction/introduction_to_web_development.md +++ b/content/odin/foundations/introduction/introduction_to_web_development.md @@ -12,8 +12,6 @@ Web geliştiriciler, genelde ürünlerini veya hizmetlerini internet ağına ta Eğer mantıksal problemleri çözmeyi, yararlı şeyler inşa etmeyi ve yeni teknolojiler deneyimlemeyi seviyorsanız; web geliştirme sizin için iyi bir meslek olabilir. Web geliştiriciler genelde iyi bir iş-yaşam dengesine sahiptir, dolgun maaş alırlar ve yüksek talep görürler. Yaşadığınız yerdeki web geliştirme işi fırsatları hakkında daha iyi fikir sahibi olmak için Google'da arama yapın. -Daha fazla bilgi için [bu blog yazısını](https://tr.wix.com/blog/makale/web-tasarim-nedir) okuyabilirsiniz. - ### Web geliştirici türleri Biraz önce web geliştirme işinin önyüz, arkayüz veya full stack olabileceğinden bahsettik. Bu terimler tam olarak ne anlama geliyor? @@ -26,8 +24,6 @@ Arkayüz geliştiricileri verilerle çalışmak için Java, Python, Ruby ve Java **Full stack** geliştiricileri hem önyüz hem de arkayüz ile çalışmaya alışıktır. Odin Projesi'nde, web geliştirmenin tüm yönlerini ele alan full stack geliştirmeyi öğretmeye odaklanıyoruz . -Daha fazla detay için, Udacity'nin bu konu hakkında İngilizce yazılmış harika bir blog yazısı var: [3 Web Dev Careers Decoded: Front-End vs Back-End vs Full Stack](https://www.udacity.com/blog/2020/12/front-end-vs-back-end-vs-full-stack-web-developers.html) - ### Kariyer türleri Farklı web geliştirme türlerini öğrenmiş olduğunuza göre önceden bahsettiğimiz üzere çalışabileceğiniz müşteri ve işveren türlerine bir bakalım @@ -83,8 +79,6 @@ Bu "Temel Bilgiler" kursunda, eninde sonuna bilmeniz gereken konulara doğru bir Sonraki kurslar da bu konulara derinlemesine dalacak. İşe alınmanızı sağlayacak becerileri sağlamlaştırmak için onlarca satır kod yazacak, proje geliştirecek ve web sitesi oluşturacaksınız. -Tüm bunları bitirmek zorlu olacak. Aslında önünüzdeki maceranın nasıl olacağını anlamanız için bu ingilizce blog yazısını ["Why Learning to Code is So Damn Hard"](https://web.archive.org/web/20230630111131/https://www.thinkful.com/blog/why-learning-to-code-is-so-damn-hard/) okusanız iyi olur. Sonuçta öğrenmeye değer olup da kolay olan şey var mı hiç? - Evet, zorlu olacak. Ama aynı zamanda eğlenceli olacak. @@ -93,6 +87,16 @@ Ve belki de hayatınızı bile değiştirebilir . _Neyi bekliyorsun?_ +### Ödev + +
+ +1. Daha fazla bilgi için [bu blog yazısını](https://tr.wix.com/blog/makale/web-tasarim-nedir) okuyabilirsiniz. + +1. Daha fazla detay için, Udacity'nin bu konu hakkında İngilizce yazılmış harika bir blog yazısı var: [3 Web Dev Careers Decoded: Front-End vs Back-End vs Full Stack](https://www.udacity.com/blog/2020/12/front-end-vs-back-end-vs-full-stack-web-developers.html) + +1. Önünüzdeki maceranın nasıl olacağını anlamanız için bu ingilizce blog yazısını ["Why Learning to Code is So Damn Hard"](https://web.archive.org/web/20230630111131/https://www.thinkful.com/blog/why-learning-to-code-is-so-damn-hard/) okusanız iyi olur. + ### Ek kaynaklar Bu alanda içerikle alakalı faydalı linkler bulunmaktadır. Zorunlu değildir, ek olarak düşünülmelidir. diff --git a/content/odin/foundations/introduction/motivation_and_mindset.md b/content/odin/foundations/introduction/motivation_and_mindset.md index ac27d9fb..e67d3545 100644 --- a/content/odin/foundations/introduction/motivation_and_mindset.md +++ b/content/odin/foundations/introduction/motivation_and_mindset.md @@ -19,8 +19,6 @@ Neden programlama öğrenmeye karar verdiğinizi düşünmek için bir dakikanı Programlamayı öğrenme motivasyonunuz bu nedenlerin bir kombinasyonu veya tamamen başka bir şey olabilir. O şey her ne olursa olsun, motivasyonunuza sıkıca sarılın - size ulaşmanız gereken kesin bir hedef verip bu yolculuğun sonuna kadar götürecek olan şey olacak. -Motivasyonunuzu güçlendirmek istiyorsanız Discord kanalımızdaki [odin-success-stories](https://discord.com/channels/505093832157691914/705776663497277490) başarı hikayelerini (İngilizce) okuyabilirsiniz. - ### Gelişim zihniyeti @@ -39,12 +37,6 @@ Müfredat üzerinde çalışırken, zor kavramlar ve karmaşık projelerle karş Kendinizi yeteneklerinizi sorgularken bulduğunuzda, programlamayı öğrenirken elde ettiğiniz başarıları düşünüp; tamamladığınız projeler ve bir zamanlar anlamadığınız ama şimdi anlamaya başladığınız kavramlar size bunu başarabiliyor olduğunuza dair ihtiyacınız olan kanıttır. -Gelişim zihniyeti hakkında daha fazla bilgi edinmek için bu kaynaklara göz atabilirsiniz: - -- [Believe you can get better adlı ingilizce video](https://www.ted.com/talks/carol_dweck_the_power_of_believing_that_you_can_improve) -- [Grit adlı ingilizce video](https://ted.com/talks/angela_lee_duckworth_grit_the_power_of_passion_and_perseverance) -- [You can learn anything adlı ingilizce video](https://www.khanacademy.org/college-careers-more/talks-and-interviews/talks-and-interviews-unit/conversations-with-sal/a/the-learning-myth-why-ill-never-tell-my-son-hes-smart) - ### Öğrenme süreci Kavramları öğrenmek ve ardından bunları uygulamak, işlerin nasıl yürüdüğünü ve birbirine nasıl uyduğunu daha iyi anlamanıza yardımcı olacaktır. Projeler, teorik anlayışınızın programlama kavramları ve tekniklerinin gerçekte nasıl işlediğiyle uyumlu olmasını sağlamak için en iyi yöntemdir. @@ -59,10 +51,6 @@ Bildiklerinizi başkalarına öğretmek, öğrendiklerinizi sağlamlaştırmak i Bu öğrenme yöntemini topluluğumuzdaki diğer kişilere yardım ederek uygulayabilirsiniz. -- Öğrenmenin en iyi yolları hakkında bilgi edinmek için önemle tavsiye edilir: [öğrenmeyi öğrenmek](https://www.coursera.org/learn/learning-how-to-learn). - -- Ruby Rogues'un bir podcast'i [Öğrenmek üzerine ingilizce podcast](https://topenddevs.com/podcasts/ruby-rogues/episodes/131-rr-how-to-learn) bulunmakta, bu podcast sizin için motive edici ve yararlı olabilir, bu nedenle öğrenmeyle ilgili bazı yararlı düşünceler için göz atabilirsiniz. -- 100 Days of Code, yeni geliştiricilerin kodlama yolculuklarını takip etmek ve çalışmalarını sergilemek için sıklıkla kullandıkları bir meydan okumadır. Motivasyonunuzu korumak ve diğer geliştiricilere ilham vermek için bir yol arıyorsanız [web sitelerine](https://www.100daysofcode.com/) göz atarak katılmayı düşünebilirsiniz. ### Sıkıştığınızda ne yapmalısınız? @@ -171,6 +159,19 @@ Odin Projesi, web geliştirme eğitim yolculuğunuz boyunca çok fazla not alman Sonuç olarak herhangi bir yeni beceriyi öğrenmek, aşılması gereken engellerle dolu bir yolculuktur. Burada ortaya konulan ilkelerin sizi başarılı olmak ve Odin Projesi'nden en iyi şekilde yararlanmak için çok daha iyi bir konuma getireceğini umuyoruz. +### Ödev + +
+ +1. Motivasyonunuzu güçlendirmek istiyorsanız Discord kanalımızdaki [odin-success-stories](https://discord.com/channels/505093832157691914/705776663497277490) başarı hikayelerini (İngilizce) okuyabilirsiniz. +1. Gelişim zihniyeti hakkında daha fazla bilgi edinmek için bu kaynaklara göz atabilirsiniz: + - [Believe you can get better adlı ingilizce video](https://www.ted.com/talks/carol_dweck_the_power_of_believing_that_you_can_improve) + - [Grit adlı ingilizce video](https://ted.com/talks/angela_lee_duckworth_grit_the_power_of_passion_and_perseverance) + - [You can learn anything adlı ingilizce video](https://www.khanacademy.org/college-careers-more/talks-and-interviews/talks-and-interviews-unit/conversations-with-sal/a/the-learning-myth-why-ill-never-tell-my-son-hes-smart) + + +
+ ### Ek kaynaklar Bu alanda içerikle alakalı faydalı linkler bulunmaktadır. Zorunlu değildir, ek olarak düşünülmelidir. @@ -184,3 +185,6 @@ Bu alanda içerikle alakalı faydalı linkler bulunmaktadır. Zorunlu değildir, - [TypingClub.com](https://www.typingclub.com) - [Monkeytype](https://monkeytype.com/) - [Why Procrastinators Procrastinate? adlı ingilizce makale](https://waitbutwhy.com/2013/10/why-procrastinators-procrastinate.html). Anında Tatmin Maymunu, Mantıklı Karar Alan, Panik Canavarı kişiliklerini ve Karanlık Oyun Alanı'nda yolunuzu bulmayı öğrenin. [Aynı yazardan kısa bir ingilizce giriş videosu](https://youtu.be/arj7oStGLkU) +- 100 Days of Code, yeni geliştiricilerin kodlama yolculuklarını takip etmek ve çalışmalarını sergilemek için sıklıkla kullandıkları bir meydan okumadır. Motivasyonunuzu korumak ve diğer geliştiricilere ilham vermek için bir yol arıyorsanız [web sitelerine](https://www.100daysofcode.com/) göz atarak katılmayı düşünebilirsiniz. +- Öğrenmenin en iyi yolları hakkında bilgi edinmek için önemle tavsiye edilir: [öğrenmeyi öğrenmek](https://www.coursera.org/learn/learning-how-to-learn). +- Ruby Rogues'un [Öğrenmek üzerine ingilizce podcast](https://topenddevs.com/podcasts/ruby-rogues/episodes/131-rr-how-to-learn)'i bulunmakta, bu podcast sizin için motive edici ve yararlı olabilir, bu nedenle öğrenmeyle ilgili bazı yararlı düşünceler için göz atabilirsiniz. \ No newline at end of file diff --git a/content/odin/foundations/javascript_basics/project_calculator.md b/content/odin/foundations/javascript_basics/project_calculator.md index 9a9b9a93..438c1c7f 100644 --- a/content/odin/foundations/javascript_basics/project_calculator.md +++ b/content/odin/foundations/javascript_basics/project_calculator.md @@ -51,5 +51,5 @@ Erken ve sık sık commit yapmayı unutmayın! "Commit Message" dersine [buradan - Kullanıcılar gerekli matematiği yaparlarsa ondalıklı sayılar alabilirler ancak henüz ondalıklı sayıları yazamazlar. Bir `.` butonu ekleyin ve kullanıcıların ondalıklı sayı girmesine izin verin! Ancak birden fazla yazmalarına izin vermediğinizden emin olun: `12.3.56.5.` Bu sayılar üzerinde matematik işlemleri yapmak zordur. \(ekranda zaten bir tane varsa ondalık butonunu devre dışı bırakın\) - Güzel görünsün! Bu, CSS becerilerinizi pratik yapmak için harika bir projedir. En azından işlemleri tuş takımı butonlarından farklı bir renk yapın. - “Geri al” tuşu ekleyin, böylece kullanıcı yanlış sayıya tıklarsa geri alabilir. -- Klavye desteği ekleyin! (`/`) gibi tuşlar size sorun çıkartabilir. Bu sorunu çözmek için [bu dökümantasyonu](https://developer.mozilla.org/en-US/docs/Web/API/Event/preventDefault) okuyun. +- Klavye desteği ekleyin!
diff --git a/content/odin/javascript/computer_science/project_recursion.md b/content/odin/javascript/computer_science/project_recursion.md index 42675c81..89c46a24 100644 --- a/content/odin/javascript/computer_science/project_recursion.md +++ b/content/odin/javascript/computer_science/project_recursion.md @@ -13,7 +13,7 @@ In order to run these functions you'll need to run it from somewhere. You can ru #### Understanding recursive Fibonacci -Did you figure it out? Congratulations! But do you really understand what is taking place? If you need some help understanding what's going on with this function, give [Khan Academy's Stepping Through Recursive Fibonacci Function video](https://www.youtube.com/watch?v=zg-ddPbzcKM) a watch. If you prefer to read, [Recursive Fibonacci Explained](https://www.scaler.com/topics/fibonacci-series-in-javascript/) is also very helpful! +Did you figure it out? Congratulations! But do you really understand what is taking place? If you need some help understanding what's going on with this function, give [Khan Academy's Stepping Through Recursive Fibonacci Function video](https://www.youtube.com/watch?v=zg-ddPbzcKM) a watch. If you prefer to read, this [GeeksForGeeks article](https://www.geeksforgeeks.org/javascript-program-to-display-fibonacci-sequence-using-recursion/) is also very helpful! ### Project: merge sort @@ -47,5 +47,5 @@ The first step is to actually understand what the merge sort algorithm is doing: This section contains helpful links to other content. It isn't required, so consider it supplemental. - Another look at [merge sort](http://www.sorting-algorithms.com/merge-sort) -- Visualize and [understand](https://www.educative.io/courses/recursion-for-coding-interviews-in-javascript/NEZ7kKgMJKK) the memory allocation for recursive functions -- For more attempts at recursion try the first 5 problems in [Project Euler](https://projecteuler.net/problems) +- Visualize and [understand](https://www.educative.io/courses/recursion-for-coding-interviews-in-javascript/NEZ7kKgMJKK) the memory allocation for recursive functions. +- For more practice using recursion, try the first 5 problems in [Project Euler](https://projecteuler.net/problems). diff --git a/content/odin/javascript/organizing_your_javascript_code/es6_modules.md b/content/odin/javascript/organizing_your_javascript_code/es6_modules.md index b9e551af..a51b0131 100644 --- a/content/odin/javascript/organizing_your_javascript_code/es6_modules.md +++ b/content/odin/javascript/organizing_your_javascript_code/es6_modules.md @@ -35,7 +35,7 @@ Read through the npm links below but don't worry about running any of the comman 1. Take a couple minutes to read the [About npm](https://docs.npmjs.com/getting-started/what-is-npm) page - a great introduction to npm. 1. [This tutorial](https://docs.npmjs.com/downloading-and-installing-packages-locally) teaches you how to install packages with npm. 1. [This tutorial](https://docs.npmjs.com/creating-a-package-json-file) covers the `package.json` file, which you can use to manage your project's dependencies. -1. Read [this article on development dependencies](https://dev.to/moimikey/demystifying-devdependencies-and-dependencies-5ege) to learn what they are and how to use them. **NOTE:** The author of the article clarifies something potentially confusing in the first comment. After reading about and practicing with Webpack in this lesson, you should come back to [this comment](https://dev.to/moimikey/demystifying-devdependencies-and-dependencies-5ege#comment-5ea4) and understand what they meant. +1. Read [this article on development dependencies](https://dev.to/moimikey/demystifying-devdependencies-and-dependencies-5ege) to learn what they are and how to use them. **NOTE:** The author of the article clarifies something potentially confusing in [this comment](https://dev.to/moimikey/demystifying-devdependencies-and-dependencies-5ege#comment-5ea4). After reading about and practicing with Webpack in this lesson, you should come back to the aforementioned comment and understand what they meant. 1. If you run into trouble at any point you can check out [the official docs page](https://docs.npmjs.com/) for more tutorials and documentation. ### Yarn? diff --git a/content/odin/javascript/organizing_your_javascript_code/objects_and_object_constructors.md b/content/odin/javascript/organizing_your_javascript_code/objects_and_object_constructors.md index f5bc8a65..009fb2dd 100644 --- a/content/odin/javascript/organizing_your_javascript_code/objects_and_object_constructors.md +++ b/content/odin/javascript/organizing_your_javascript_code/objects_and_object_constructors.md @@ -34,7 +34,7 @@ myObject.variable; // this gives us 'undefined' because it's looking for a prope myObject[variable]; // this is equivalent to myObject['property'] and returns 'Value!' ``` -If you are feeling rusty on using objects, now might be a good time to go back and review the content in [__Fundamentals 5__](https://www.theodinproject.com/lessons/foundations-fundamentals-part-5) from our JavaScript Basics course. +If you are feeling rusty on using objects, now might be a good time to go back and review the content in our [object basics lesson](https://www.theodinproject.com/lessons/foundations-object-basics) from our JavaScript Basics course. ### Lesson overview @@ -381,11 +381,11 @@ This section contains questions for you to check your understanding of this less This section contains helpful links to other content. It isn't required, so consider it supplemental. -- [This article](https://dev.to/lydiahallie/javascript-visualized-prototypal-inheritance-47co) from Lydia Hallie and [This video](https://www.youtube.com/watch?v=sOrtAjyk4lQ) from Avelx explains the Prototype concept with graphics and beginner friendly language. Try using these resources if you want another perspective to understand the concept. -- [This video](https://www.youtube.com/watch?v=CDFN1VatiJA) from mpj explains `Object.create` method with great details about it, he walks through what it is, why `Object.create` exists in JavaScript, and how to use `Object.create`. Also you can check [This video](https://www.youtube.com/watch?v=MACDGu96wrA) from techsith to understand another point of view of extending objects from others by `Object.create`. +- Lydia Hallie has a [visual article on prototypal inheritance](https://dev.to/lydiahallie/javascript-visualized-prototypal-inheritance-47co) and [prototype inheritance by Programming With Avelx](https://www.youtube.com/watch?v=sOrtAjyk4lQ) explains the Prototype concept with graphics and beginner friendly language. Try using these resources if you want another perspective to understand the concept. +- This [`Object.create` video by FunFunFunction](https://www.youtube.com/watch?v=CDFN1VatiJA) explains the method with great details about it, he walks through what it is, why `Object.create` exists in JavaScript, and how to use `Object.create`. Also you can check this [`Object.create` method video by techsith](https://www.youtube.com/watch?v=MACDGu96wrA) for another point of view on extending objects. - [The Principles of Object-Oriented JavaScript](https://www.amazon.com/Principles-Object-Oriented-JavaScript-Nicholas-Zakas/dp/1593275404) book by Nicholas C. Zakas is really great to understand OOP in javascript, which explains concepts in-depth, which explores JavaScript's object-oriented nature, revealing the language's unique implementation of inheritance and other key characteristics, it's not free but it's very valuable. -- [This stack overflow question](https://stackoverflow.com/questions/9772307/declaring-javascript-object-method-in-constructor-function-vs-in-prototype/9772864#9772864) explains the difference between defining methods via the prototype vs defining them in the constructor. +- The first answer on this StackOverflow question regarding [defining methods via the prototype vs in the constructor](https://stackoverflow.com/questions/9772307/declaring-javascript-object-method-in-constructor-function-vs-in-prototype/9772864#9772864) helps explain when you might want to use one over the other. - [A Beginner’s Guide to JavaScript’s Prototype](https://medium.com/free-code-camp/a-beginners-guide-to-javascript-s-prototype-9c049fe7b34) and [JavaScript Inheritance and the Prototype Chain](https://medium.com/free-code-camp/javascript-inheritance-and-the-prototype-chain-d4298619bdae) from Tyler Mcginnis has great examples to help you understand Prototype and Prototype Chain better from the beginner's perspective. - [This video ](https://www.youtube.com/watch?v=wstwjQ1yqWQ) from Akshay Saini is an easy way to understand the concept of Prototype, Prototype Chain and prototypal inheritance. - [Interactive Scrim on objects and object constructors.](https://scrimba.com/scrim/co2624f87981575448091d5a2) diff --git a/content/odin/javascript/organizing_your_javascript_code/project_library.md b/content/odin/javascript/organizing_your_javascript_code/project_library.md index 69d15173..55240448 100644 --- a/content/odin/javascript/organizing_your_javascript_code/project_library.md +++ b/content/odin/javascript/organizing_your_javascript_code/project_library.md @@ -22,12 +22,14 @@ Let's extend the 'Book' example from the previous lesson and turn it into a smal ``` 3. Write a function that loops through the array and displays each book on the page. You can display them in some sort of table, or each on their own "card". It might help for now to manually add a few books to your array so you can see the display. -4. Add a "NEW BOOK" button that brings up a form allowing users to input the details for the new book: author, title, number of pages, whether it's been read and anything else you might want. How you decide to display this form is up to you. For example, you may wish to have a form show in a sidebar or you may wish to explore [dialogs and modals](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/dialog) using the `` tag. However you do this, you will most likely encounter an issue where submitting your form will not do what you expect it to do. That's because the `submit` input tries to send the data to a server by default. If you've done the bonus section for the calculator assignment, you might be familiar with `event.preventDefault();`. Read up on the [event.preventDefault documentation](https://developer.mozilla.org/en-US/docs/Web/API/Event/preventDefault) again and see how you can solve this issue! +4. Add a "NEW BOOK" button that brings up a form allowing users to input the details for the new book: author, title, number of pages, whether it's been read and anything else you might want. How you decide to display this form is up to you. For example, you may wish to have a form show in a sidebar or you may wish to explore [dialogs and modals](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/dialog) using the `` tag. However you do this, you will most likely encounter an issue where submitting your form will not do what you expect it to do. That's because the `submit` input tries to send the data to a server by default. This is where `event.preventDefault();` will come in handy. Check out the [documentation for event.preventDefault](https://developer.mozilla.org/en-US/docs/Web/API/Event/preventDefault) and see how you can solve this issue! 5. Add a button on each book's display to remove the book from the library. 1. You will need to associate your DOM elements with the actual book objects in some way. One easy solution is giving them a data-attribute that corresponds to the index of the library array. 6. Add a button on each book's display to change its `read` status. 1. To facilitate this you will want to create the function that toggles a book's `read` status on your `Book` prototype instance. -NOTE: You're not required to add any type of storage right now. You will have the option to come back to this project later on in the course. +
+You're not required to add any type of storage right now to save the information between page reloads. You will have the option to come back to this project later on in the course. +
diff --git a/content/odin/javascript/organizing_your_javascript_code/webpack.md b/content/odin/javascript/organizing_your_javascript_code/webpack.md index 046781c7..a7ef7846 100644 --- a/content/odin/javascript/organizing_your_javascript_code/webpack.md +++ b/content/odin/javascript/organizing_your_javascript_code/webpack.md @@ -1,4 +1,5 @@ ### Introduction + We've already introduced webpack in a previous lesson. It is the go-to tool across the web for bundling and compiling JavaScript code. There _are_ other options out there, but at this time none of them are as popular or widely used as webpack. In our last lesson, we covered the first half of what webpack can do for you: bundling your modules. Another amazing feature is webpack's ability to process and manipulate your code as it bundles this. So, for example, if you would like to use [Sass](http://sass-lang.com/) or [PostCSS](https://postcss.org/) to write your CSS, webpack can allow you to do that. Webpack can manage your images and compress and optimize them for use on the web. Webpack can [minify and uglify](https://stackoverflow.com/questions/33708197/does-it-make-sense-to-do-both-minify-and-uglify/33708348) your code. There are tons of things webpack can do, but to access these functions we need to learn more about loaders and plugins. @@ -7,20 +8,20 @@ In our last lesson, we covered the first half of what webpack can do for you: bu This section contains a general overview of topics that you will learn in this lesson. - - Use webpack by following its documentation. - - Load assets with webpack. - - Manage output with webpack and HtmlWebpackPlugin. - - Configure webpack with useful features for development. +- Use webpack by following its documentation. +- Load assets with webpack. +- Manage output with webpack and HtmlWebpackPlugin. +- Configure webpack with useful features for development. ### Bundling -As briefly introduced in the previous lesson, if you give webpack a file as an entry point, it will build a dependency graph based on all the imports/exports starting there, before bundling everything into a single `.js` file in `dist`. If for whatever reason you needed it to output multiple bundles (e.g. you have multiple html pages that each need their own), then each entry point you give Webpack will produce its own output bundle. +As briefly introduced in the previous lesson, if you give webpack a file as an entry point, it will build a dependency graph based on all the imports/exports starting there, before bundling everything into a single `.js` file in `dist`. If for whatever reason you needed it to output multiple bundles (e.g. you have multiple HTML pages that each need their own), then each entry point you give Webpack will produce its own output bundle. If you are only dealing with bundling JavaScript then this is fairly straightforward. But what if your project also includes CSS or assets like images or fonts? For CSS, you can import your `.css` file directly into your JavaScript and for assets like images, they might be used inside your CSS or imported directly into your JavaScript. When you tell Webpack to bundle your files, it will come across these files and try to bundle them together or process any assets like images and copy them into `dist`. Since these sorts of files are not JavaScript, however, Webpack will not know how to process them unless you tell it how to by including the correct loaders and rules. If you really wanted to, with the right loaders/plugins/rules, you could even do things such as image optimization when you build your project into `dist`. In the assignment links below, you will get to see how you can install and configure these loaders and rules for CSS and assets. -### Html-webpack-plugin +### HTML-webpack-plugin Since we would like to keep all of our development work within `src` and leave `dist` for the production build (the code that you will actually deploy), what about handling HTML files? @@ -42,25 +43,34 @@ const HtmlWebpackPlugin = require('html-webpack-plugin'); // ... ``` +
+ +#### A note if your fonts are not loading + + If you have any issues loading fonts with Webpack, the issue is not with Webpack, but how you declare the CSS rule. + + Check out the answer on this question from Stack Overflow if you get stuck: [Webpack can't load fonts (ttf)](https://stackoverflow.com/questions/49877149/webpack-cant-load-fonts-ttf/68838464#68838464) +
+ ### Assignment
1. Code along with [this tutorial](https://webpack.js.org/guides/asset-management/) to learn how to use webpack to manage your website's assets. -2. [This short article and video](https://rapidevelop.org/webpack/setup-html-webpack-plugin) demonstrate how to install `html-webpack-plugin` and set different options on it (note that you do not need to include some of the options mentioned as they are already the [default settings](https://github.com/jantimon/html-webpack-plugin#options) if you leave them out). Whilst the written instructions do not show any code unlike the video, any options would be set just like the `template` option example shown above. +1. [This short article and video](https://rapidevelop.org/webpack/setup-html-webpack-plugin) demonstrate how to install `html-webpack-plugin` and set different options on it (note that you do not need to include some of the options mentioned as they are already the [default settings](https://github.com/jantimon/html-webpack-plugin#options) if you leave them out). Whilst the written instructions do not show any code unlike the video, any options would be set just like the `template` option example shown above. 1. This [tutorial](https://webpack.js.org/guides/output-management/) on output management also gives an example of using `html-webpack-plugin` but does not demonstrate using the template option. It also starts by demonstrating how to configure multiple entry points - you are unlikely to need this feature for the projects in this part of the course. -3. The first part of [this tutorial](https://webpack.js.org/guides/development/) (up until "Choosing a Development Tool") talks about source maps, a handy way to track down which source file (index.js, a.js, b.js) an error is coming from when you use webpack to bundle them together. This is essential to debugging bundled code in your browser's DevTools. If the error comes from b.js the error will reference that file instead of the bundle. It also walks through an example of the `--watch` feature and `webpack-dev-server` package, either of which will prove invaluable when working with webpack. - 1. Note that if you decide to use `webpack-dev-server`, the tutorial example sets it to serve from `dist`. If you are using `html-webpack-plugin`, you will want to change this to serve from `src` instead. This will make development much easier as all of your work and any file paths you use can be kept within `src` (Webpack will adjust all of these file paths when bundling if you set the correct loaders and asset rules). - 2. You can ignore the last option on `webpack-dev-middleware` as we will not be working with our own Express server for this part of the course. -4. Setting our webpack configuration to development mode is naturally most suitable for our development work, but when we come to build our projects for deployment (production), the dedicated production mode optimises this for us. Instead of manually switching between modes in the configuration file as needed, [this tutorial](https://webpack.js.org/guides/production/) introduces `webpack-merge`. This can be quite useful as a quick setup can allow us to have a dedicated npm script for development builds/dev server, and another specifically for our production build. +1. The first part of [this tutorial](https://webpack.js.org/guides/development/) (up until "Choosing a Development Tool") talks about source maps, a handy way to track down which source file (index.js, a.js, b.js) an error is coming from when you use webpack to bundle them together. This is essential to debugging bundled code in your browser's DevTools. If the error comes from b.js the error will reference that file instead of the bundle. It also walks through an example of the `--watch` feature and `webpack-dev-server` package, either of which will prove invaluable when working with webpack. + 1. If you use both `webpack-dev-server` and `html-webpack-plugin`, you will want to add your template HTML file to the [list of files watched for changes](https://webpack.js.org/configuration/dev-server/#devserverwatchfiles). This ensures that the server and page automatically reloads whenever you modify your template HTML file. + 1. You can ignore the last option on `webpack-dev-middleware` as we will not be working with our own Express server for this part of the course. +1. Setting our webpack configuration to development mode is naturally most suitable for our development work, but when we come to build our projects for deployment (production), the dedicated production mode optimises this for us. Instead of manually switching between modes in the configuration file as needed, this [tutorial](https://webpack.js.org/guides/production/) introduces `webpack-merge`. This can be quite useful as a quick setup can allow us to have a dedicated npm script for development builds/dev server, and another specifically for our production build. 1. You'll notice the above tutorial does not have a `webpack.config.js` file. If you do use `webpack-merge`, make sure that any webpack commands you run (including in an npm script) follow the tutorial and use the `--config` option to specify which webpack configuration file to use. If you do not specify one, webpack will try to look for `webpack.config.js` and if it does not find one, it will not be able to bundle correctly! -5. You don't need to do the rest of the webpack tutorials at this time, but take a look at what's offered on the sidebar of their [guides page](https://webpack.js.org/guides/). There are several sweet features that you may want to use in future projects such as code-splitting, lazy-loading, and tree-shaking, so being aware of some of these features can come in handy. Now that you have a handle on webpack's configuration system adding these features is as easy as using the right plugins and loaders! +1. You don't need to do the rest of the webpack tutorials at this time, but take a look at what's offered on the sidebar of their [guides page](https://webpack.js.org/guides/). There are several sweet features that you may want to use in future projects such as code-splitting, lazy-loading, and tree-shaking, so being aware of some of these features can come in handy. Now that you have a handle on webpack's configuration system adding these features is as easy as using the right plugins and loaders!
### Knowledge check -This section contains questions for you to check your understanding of this lesson. If you’re having trouble answering the questions below on your own, review the material above to find the answer. +The following questions are an opportunity to reflect on key topics in this lesson. If you can't answer a question, click on it to review the material, but keep in mind you are not expected to memorize or master this knowledge. - [How do you load CSS using webpack?](https://webpack.js.org/guides/asset-management/#loading-css) - [How do you load images using webpack?](https://webpack.js.org/guides/asset-management/#loading-images) diff --git a/content/odin/javascript/testing_javascript/more_testing.md b/content/odin/javascript/testing_javascript/more_testing.md index 737c8773..975f9ba9 100644 --- a/content/odin/javascript/testing_javascript/more_testing.md +++ b/content/odin/javascript/testing_javascript/more_testing.md @@ -28,7 +28,7 @@ function guessingGame() { } ``` -Making this testable requires us to split up all the different things that are happening. First, we do not need to test the functions `prompt` and `alert` because they are built in to the browser. They are external to our program and whoever wrote them has already tested them. What we _do_ need to test is the number logic, which is much easier if we untangle it from the other functions: +Making this testable requires us to split up all the different things that are happening. First, we do not need to test the functions `prompt` and `alert` because they are built in to the browser. They are external to our program and whoever wrote them has already tested them. What we _do_ need to test is the number logic, which is much easier if we untangle it from the other functions: ```javascript function evaluateGuess(magicNumber, guess) { @@ -59,7 +59,7 @@ If we had written this program with TDD it is very likely that it would have loo ### Mocking -There are two solutions to the 'tightly coupled code' problem. The first, and best option is to remove those dependencies from your code as we did above, but that is not always possible. The second option is __mocking__ - writing "fake" versions of a function that always behaves _exactly_ how you want. For example, if you're testing a function that gets information from a DOM input, you really don't want to have to set up a webpage and dynamically insert something into the input just to run your tests. With a mock function, you could just create a fake version of the input-grabbing function that always returns a specific value and use THAT in your test. +There are two solutions to the 'tightly coupled code' problem. The first, and best option is to remove those dependencies from your code as we did above, but that is not always possible. The second option is __mocking__ - writing "fake" versions of a function that always behaves _exactly_ how you want. For example, if you're testing a function that gets information from a DOM input, you really don't want to have to set up a webpage and dynamically insert something into the input just to run your tests. With a mock function, you could just create a fake version of the input-grabbing function that always returns a specific value and use THAT in your test. ### Assignment @@ -77,8 +77,9 @@ This section contains questions for you to check your understanding of this less - [What is tightly coupled code?](#tightly-coupled-code) - [What are the two requirements for a function to be pure?](https://medium.com/@jamesjefferyuk/javascript-what-are-pure-functions-4d4d5392d49c) - [What are side effects and why is it important to identify them when testing a function?](https://medium.com/@jamesjefferyuk/javascript-what-are-pure-functions-4d4d5392d49c) -- [What are two solutions to the tightly coupled code problem?](#two-solutions) -- [What is mocking?](#two-solutions) +- [What should you try before testing tightly coupled code?](#try-before) +- [How can you test code that can't be decoupled?](#mocking) +- [What is mocking?](#mocking) - [When would you use a mock function?](#mock-function-example) - [How should you test incoming query messages?](https://youtu.be/URSWYvyc42M?t=699) - [Why should you not test implementation?](https://youtu.be/URSWYvyc42M?t=792) diff --git a/content/odin/javascript/testing_javascript/project_battleship.md b/content/odin/javascript/testing_javascript/project_battleship.md index 8a88c80f..b6ffbcc7 100644 --- a/content/odin/javascript/testing_javascript/project_battleship.md +++ b/content/odin/javascript/testing_javascript/project_battleship.md @@ -1,4 +1,5 @@ ### Introduction + It's time to really flex your muscles. Test Driven Development can certainly feel uncomfortable at first, but becomes more natural with practice. We're going to implement the classic game 'Battleship'. If you've never played it, or need a refresher you can read about it [here](https://en.wikipedia.org/wiki/Battleship_(game)) and you can play an online version [here](http://en.battleship-game.org/). Since we're doing TDD, it's important that you don't get overwhelmed. Take it one step at a time. Write a test, then make it pass. @@ -10,27 +11,36 @@ We have not yet discussed testing the appearance of a webpage, which requires a
1. Begin your app by creating the `Ship` class/factory (your choice). 1. Your 'ships' will be objects that include their length, the number of times they've been hit and whether or not they've been sunk. - 2. __REMEMBER__ you only have to test your object's public interface. Only methods or properties that are used outside of your 'ship' object need unit tests. - 3. Ships should have a `hit()` function that increases the number of 'hits' in your ship. - 4. `isSunk()` should be a function that calculates whether a ship is considered sunk based on its length and the number of hits it has received. -2. Create `Gameboard` class/factory. + 1. __REMEMBER__ you only have to test your object's public interface. Only methods or properties that are used outside of your 'ship' object need unit tests. + 1. Ships should have a `hit()` function that increases the number of 'hits' in your ship. + 1. `isSunk()` should be a function that calculates whether a ship is considered sunk based on its length and the number of hits it has received. +1. Create `Gameboard` class/factory. 1. Note that we have not yet created any User Interface. We should know our code is coming together by running the tests. You shouldn't be relying on `console.log` or DOM methods to make sure your code is doing what you expect it to. - 2. Gameboards should be able to place ships at specific coordinates by calling the ship factory function. - 3. Gameboards should have a `receiveAttack` function that takes a pair of coordinates, determines whether or not the attack hit a ship and then sends the 'hit' function to the correct ship, or records the coordinates of the missed shot. - 4. Gameboards should keep track of missed attacks so they can display them properly. - 5. Gameboards should be able to report whether or not all of their ships have been sunk. -3. Create `Player`. + 1. Gameboards should be able to place ships at specific coordinates by calling the ship factory function. + 1. Gameboards should have a `receiveAttack` function that takes a pair of coordinates, determines whether or not the attack hit a ship and then sends the 'hit' function to the correct ship, or records the coordinates of the missed shot. + 1. Gameboards should keep track of missed attacks so they can display them properly. + 1. Gameboards should be able to report whether or not all of their ships have been sunk. +1. Create `Player`. 1. Players can take turns playing the game by attacking the enemy Gameboard. - 2. The game is played against the computer, so make the 'computer' capable of making random plays. The AI does not have to be smart, but it should know whether or not a given move is legal (i.e. it shouldn't shoot the same coordinate twice). -4. Create the main game loop and a module for DOM interaction. + 1. The game is played against the computer, so make the 'computer' capable of making random plays. The AI does not have to be smart, but it should know whether or not a given move is legal (i.e. it shouldn't shoot the same coordinate twice). +1. Create the main game loop and a module for DOM interaction. 1. At _this_ point it is appropriate to begin crafting your User Interface. - 2. The game loop should set up a new game by creating Players and Gameboards. For now just populate each Gameboard with predetermined coordinates. You are going to implement a system for allowing players to place their ships later. - 3. We'll leave the HTML implementation up to you for now, but you should display both the player's boards and render them using information from the Gameboard class/factory. + 1. The game loop should set up a new game by creating Players and Gameboards. For now just populate each Gameboard with predetermined coordinates. You are going to implement a system for allowing players to place their ships later. + 1. We'll leave the HTML implementation up to you for now, but you should display both the player's boards and render them using information from the Gameboard class/factory. 1. You need methods to render the gameboards and to take user input for attacking. For attacks, let the user click on a coordinate in the enemy Gameboard. - 4. The game loop should step through the game turn by turn using only methods from other objects. If at any point you are tempted to write a new function inside the game loop, step back and figure out which class or module that function should belong to. - 5. Create conditions so that the game ends once one player's ships have all been sunk. This function is appropriate for the Game module. -5. Finish it up - 1. Implement the system that allows players to place their ships. There are several options available for letting users place their ships. You can let them type coordinates for each ship, have a button to cycle through random placements, or investigate implementing drag and drop. - 2. You can polish the intelligence of the computer player by having it try adjacent slots after getting a 'hit'. - 3. Optionally, create a 2 player option that lets users take turns by passing the device back and forth. If you're going to go this route, make sure the game is playable on a mobile screen and implement a 'pass device' screen so that players don't see each others boards! + 1. The game loop should step through the game turn by turn using only methods from other objects. If at any point you are tempted to write a new function inside the game loop, step back and figure out which class or module that function should belong to. + 1. Create conditions so that the game ends once one player's ships have all been sunk. This function is appropriate for the Game module. +1. Finish it up + 1. Implement the system that allows players to place their ships. There are several options available for letting users place their ships. You can let them type coordinates for each ship, have a button to cycle through random placements. + + #### Extra credit + + Make your battleship project more impressive by introducing a series of modifications. + +1. Implement drag and drop to allow players to place their ships. +1. Create a 2-player option that lets users take turns by passing the device back and forth. + 1. Make sure the game is playable on a mobile screen and implement a 'pass device' screen so that players don't see each others boards! +1. Polish the intelligence of the computer player by having it try adjacent slots after getting a 'hit'. + +You can choose to do either one, two or all of these challenges, it's up to you.