mirror of
https://github.com/Stone-Red-Code/website.git
synced 2026-09-04 09:15:58 +02:00
style: autoformat
This commit is contained in:
Jean-Philippe Sirois
@@ -6,10 +6,12 @@ title: Flutter-Development
|
||||
---
|
||||
|
||||
###### Get started
|
||||
|
||||
- [Flutter Website](https://flutter.dev)
|
||||
- [Write Your First Flutter App](https://flutter.dev/docs/get-started/codelab)
|
||||
|
||||
###### Tutorial Series
|
||||
|
||||
- [Fireship.io YouTube Tutorial Playlist](https://www.youtube.com/watch?v=hwBUU9CP4qI&list=PL0vfts4VzfNiQYtnn1TZ6U0Ec_vjCN9VY)
|
||||
- [Flutter Cookbook](https://flutter.dev/docs/cookbook)
|
||||
- [The Boring Flutter Development Series](https://www.youtube.com/watch?v=Yy4NgbqNNtY&list=PLjxrf2q8roU3ahJVrSgAnPjzkpGmL9Czl)
|
||||
- [The Boring Flutter Development Series](https://www.youtube.com/watch?v=Yy4NgbqNNtY&list=PLjxrf2q8roU3ahJVrSgAnPjzkpGmL9Czl)
|
||||
|
||||
@@ -3,4 +3,4 @@ authors:
|
||||
- "trolli#6086"
|
||||
created_at: 2021/10/31
|
||||
title: Mobile Development
|
||||
---
|
||||
---
|
||||
|
||||
@@ -82,7 +82,8 @@ Web scraping has many valid uses cases in programming. It also has many unethica
|
||||
|
||||
You can get an excemption by sending some project information to modmail. Tell us about your project, why you are scraping, send screenshots. Until then, the conversation is prohibited.
|
||||
|
||||
### Do not discuss crypto currencies, NFTs, and blockchain development.
|
||||
### Do not discuss crypto currencies, NFTs, and blockchain development.
|
||||
|
||||
All discussions of crypto currencies, including but not limited to investing advice, market state, environmental impact and technology changes are banned. Similarly all discussions of NFTs and blockchain are banned.
|
||||
|
||||
## 4. Don't obstruct moderation
|
||||
|
||||
@@ -12,24 +12,25 @@ You all have heard of it... or maybe not. Blender is an open source 3D modelling
|
||||
|
||||
## How do I install it?
|
||||
|
||||
Well that's pretty easy. Just head on over to the [Blender website](https://www.blender.org/). Click on Downloads, and then choose your version. After that, simply click the download link on your OS. It's available on all Windows, Linux and macOS operating systems (no OS shaming here). Hell, you can even use it on a VR headset. If you want automatic updates for Blender, you can also download it from Steam or Microsoft Store.
|
||||
Well that's pretty easy. Just head on over to the [Blender website](https://www.blender.org/). Click on Downloads, and then choose your version. After that, simply click the download link on your OS. It's available on all Windows, Linux and macOS operating systems (no OS shaming here). Hell, you can even use it on a VR headset. If you want automatic updates for Blender, you can also download it from Steam or Microsoft Store.
|
||||
|
||||
The latest version of Blender at the time of writing is 3.0 (which also marks the next major version change in 21 years) but anything above Blender 2.8 is fine, really, as that was the first version with their revamped UI that does not scare off new users at first sight. All tutorials of Blender 2.8+ will be valid to 3.0.
|
||||
|
||||
## Okay, I opened the program and I’m confused. What do I do now?
|
||||
|
||||
Blender as a software might seem confusing. If you feel like you need some helping hands, below I've listed some of the most popular beginner tutorials to get you into Blender. By the way, I'm totally not biased towards the donut tutorial because that's the tutorial I did. Absolutely not.
|
||||
Blender as a software might seem confusing. If you feel like you need some helping hands, below I've listed some of the most popular beginner tutorials to get you into Blender. By the way, I'm totally not biased towards the donut tutorial because that's the tutorial I did. Absolutely not.
|
||||
|
||||
Also, Blender has a whole host of keyboard shortcuts. The reason is that Blender was designed to be used by two hands. One on the mouse for navigation and movement while the other hand is meant to be for the various shortcuts so that you can do your work faster. Don't worry laptop users though, Blender is very touch-pad friendly these days.
|
||||
|
||||
* [Donut tutorial](https://www.youtube.com/watch?v=NyJWoyVx_XI&list=PLjEaoINr3zgEq0u2MzVgAaHEBt--xLB6U)
|
||||
* [Sword tutorial](https://www.youtube.com/watch?v=bpvh-9H8S1g)
|
||||
* [Free course](https://www.youtube.com/watch?v=7MRonzqYJgw)
|
||||
- [Donut tutorial](https://www.youtube.com/watch?v=NyJWoyVx_XI&list=PLjEaoINr3zgEq0u2MzVgAaHEBt--xLB6U)
|
||||
- [Sword tutorial](https://www.youtube.com/watch?v=bpvh-9H8S1g)
|
||||
- [Free course](https://www.youtube.com/watch?v=7MRonzqYJgw)
|
||||
|
||||
## Interface Cheatsheet
|
||||
Here is a short intro to the various components of Blender's UI interface.
|
||||
|
||||
On opening Blender, you'll most likely be greeted with a screen which looks like this:
|
||||
Here is a short intro to the various components of Blender's UI interface.
|
||||
|
||||
On opening Blender, you'll most likely be greeted with a screen which looks like this:
|
||||
|
||||
|
||||
The first thing you'll need to do is select a new type of file. To clarify, these are all BLEND files, just with different layout configurations for Blender users to quick-start on whatever type of project they want to start. The most commonly used one is General but feel free to experiment and try out other default layouts as well.
|
||||
@@ -53,13 +54,14 @@ On the right, you can see the Outliner and Property areas. The Outliner area is
|
||||
Well, now it's time to let your imagination loose. There is a ton of different tools and features that Blender provides that you wont be needing most of the time, but its still fun to mess around with. (P.S. I would suggest messing around with the different modifiers that come with it).
|
||||
|
||||
There is a variety of channels I'll link here for tutorials and inspiration for you to follow:
|
||||
* [Blender Guru](https://www.youtube.com/user/AndrewPPrice)
|
||||
* [Grant Abbitt](https://www.youtube.com/c/GrantAbbitt)
|
||||
* [CG Cookie](https://www.youtube.com/c/CGCookieBlender)
|
||||
* [CG Geek](https://www.youtube.com/c/CGGeek)
|
||||
* [Default Cube](https://www.youtube.com/c/DefaultCube)
|
||||
* [Daniel Krafft](https://www.youtube.com/c/DanielKrafft)
|
||||
* [Ian Hubert](https://youtube.com/c/mrdodobird)
|
||||
|
||||
- [Blender Guru](https://www.youtube.com/user/AndrewPPrice)
|
||||
- [Grant Abbitt](https://www.youtube.com/c/GrantAbbitt)
|
||||
- [CG Cookie](https://www.youtube.com/c/CGCookieBlender)
|
||||
- [CG Geek](https://www.youtube.com/c/CGGeek)
|
||||
- [Default Cube](https://www.youtube.com/c/DefaultCube)
|
||||
- [Daniel Krafft](https://www.youtube.com/c/DanielKrafft)
|
||||
- [Ian Hubert](https://youtube.com/c/mrdodobird)
|
||||
|
||||
If you already have an idea of what you want to do with Blender, search up some guides on how to make your scene come to life.
|
||||
|
||||
@@ -67,11 +69,11 @@ If you already have an idea of what you want to do with Blender, search up some
|
||||
|
||||
Blender has a very rich and diverse plugin ecosystem developed and maintained by the Blender organization as well as independent 3D artists and developers. There are quite a lot of useful plugins which Blender has preinstalled (although they may not be enabled). You can get to them from Edit → Preferences → Add-ons or by pressing the F4 key → Preferences → Add-ons. There's a huge list of pre-installed plugins here, most of which, I honestly have never used but it's great to know it's there. Some of the most common pre-installed plugins you will be using are the Node Wrangler plugin and the Extra Objects plugin, among others. [You can get a full list of pre-installed plug-ins here](https://docs.blender.org/manual/en/latest/addons/index.html).
|
||||
|
||||
3rd party plugins are also extremely helpful a lot of the times and if you're doing some repetitive task, there are good chances that there are plugins out there, free or paid, which will reduce your effort and save precious time. [Here's a list of general recommendations for plugins](https://conceptartempire.com/blender-addons-plugins/). You don't have to get these but depending on what you are doing, these can be extremely helpful for you.
|
||||
3rd party plugins are also extremely helpful a lot of the times and if you're doing some repetitive task, there are good chances that there are plugins out there, free or paid, which will reduce your effort and save precious time. [Here's a list of general recommendations for plugins](https://conceptartempire.com/blender-addons-plugins/). You don't have to get these but depending on what you are doing, these can be extremely helpful for you.
|
||||
|
||||
## Creating your own Blender plugin
|
||||
|
||||
Blender offers a rich API for developers to use and they have a Python library using which you can extend and create plugins for Blender.
|
||||
Blender offers a rich API for developers to use and they have a Python library using which you can extend and create plugins for Blender.
|
||||
[You can find more information about this here](https://docs.blender.org/manual/en/latest/advanced/scripting/index.html)
|
||||
You can use the blender API to create all sorts of awesome stuff like data visualisers, which is really cool!
|
||||
|
||||
@@ -86,4 +88,4 @@ Good luck on your blender journey....and delete the default cube
|
||||
- [Blender 3.0 Manual](https://docs.blender.org/manual/en/latest/index.html)
|
||||
- [Blender download page](https://www.blender.org/download/)
|
||||
- [Official documentation on Blender's Window System](https://docs.blender.org/manual/en/latest/interface/index.html#window-system)
|
||||
- [Blender pre-installed add-ons documentation](https://docs.blender.org/manual/en/latest/addons/index.html)
|
||||
- [Blender pre-installed add-ons documentation](https://docs.blender.org/manual/en/latest/addons/index.html)
|
||||
|
||||
@@ -7,7 +7,6 @@ created_at: "2022/06/08"
|
||||
title: What is Dot net?
|
||||
---
|
||||
|
||||
|
||||
## What is .NET?
|
||||
|
||||
> .NET is a platform for building stuff
|
||||
@@ -18,36 +17,44 @@ title: What is Dot net?
|
||||
|
||||
The current version of the framework is simply named .NET 6.
|
||||
.NET can be used to build apps for the following platforms:
|
||||
* Desktop
|
||||
* Web
|
||||
* Cloud
|
||||
* Mobile
|
||||
* Game Development
|
||||
* Internet of Things
|
||||
* Machine Learning
|
||||
* Microservices
|
||||
|
||||
- Desktop
|
||||
- Web
|
||||
- Cloud
|
||||
- Mobile
|
||||
- Game Development
|
||||
- Internet of Things
|
||||
- Machine Learning
|
||||
- Microservices
|
||||
|
||||
### One .NET vision
|
||||
|
||||
The confusing part for most people is that there were a lot of different ways to run .NET for a while.
|
||||
|
||||
### .NET Framework
|
||||
|
||||
The .NET Framework is the one that you probably have heard of before. It’s a Windows-only version of .NET.
|
||||
|
||||
### .NET Core
|
||||
|
||||
.NET Core is the successor of the .NET Framework. It’s the new cross-platform and open source platform of .NET.
|
||||
|
||||
### Mono
|
||||
|
||||
Mono is basically an open source reimplementation of .NET that ran originally on Linux.
|
||||
|
||||
### Xamarin
|
||||
|
||||
Xamarin is an open source platform from Microsoft for building native iOS and Andoid apps with C# and .NET.
|
||||
|
||||
### .NET 5+
|
||||
|
||||
These are all beeing combined into one single SDK (software development kit) with one BCL (base class library) and a unified toolchain now.
|
||||
|
||||
There will be all kinds of cool features with cross-platform UIs and native applications. Microsoft still continues on improving performance as well.
|
||||
|
||||
### Platforms
|
||||
|
||||
.NET can be used for various types of projects and all major Operating systems, ranging from making your own OS to simple console apps.
|
||||
|
||||
The most common uses are (with the method):
|
||||
@@ -60,107 +67,132 @@ The most common uses are (with the method):
|
||||
**Games:** Unity, MonoGame, Godot, CRYENGINE, Stride, XNA
|
||||
|
||||
## Projects
|
||||
|
||||
.NET is very organized when it comes to projects in C#, F# and VB.NET. It has .sln (solution) files which contain .csproj, .fsproj or .vbproj files. An example of its usage might be:
|
||||
|
||||
For a cli program that can convert files, the sln can be Converter.sln with 2 projects: ConverterCLI.csproj and Converter.csproj. Projects can reference other projects to use classes and namespaces from them.
|
||||
|
||||
### The CLR
|
||||
|
||||
The Common Language Runtime is the virtual machine component of the Common Language Infrastructure (CLI) and supports many languages, with the most common being C#, F#, PowerShell, and VB.NET :visualbasic:, although there are many others.
|
||||
[A complete list can be found here.](https://en.wikipedia.org/wiki/List_of_CLI_languages)
|
||||
The CLR works by using a Just-in-time (JIT) compiler to convert managed (compiled Common Intermediate Language (CIL)) code into machine code.
|
||||
The CLR has many other features like security, type safety, exception handling, garbage collection and thread management. All code in any CLR language is converted to CIL first which is then run by the CLR.
|
||||
|
||||
### The FCL
|
||||
|
||||
The .NET Framework Class Library is a bunch of built-in namespaces that can be used in all CLR languages without the need of extra DLLs or packages. It has many features including cryptography, LINQ, Regular Expressions, IO, networking, and many more.
|
||||
|
||||
### C#
|
||||
|
||||
C# is by far the most commonly used .NET language. It is a general purpose, multi-paradigm programming language encompassing static typing, strong typing, lexically scoped, imperative, declarative, functional, generic, object-oriented (class-based), and component-oriented programming disciplines.
|
||||
|
||||
TPH also has a dedicated language channel for c-sharp
|
||||
TPH also has a dedicated language channel for c-sharp
|
||||
|
||||
### F#
|
||||
|
||||
F# is the functional CLR language and the 2nd most commonly used CLR language.
|
||||
|
||||
### VB
|
||||
|
||||
Visual Basic is an easy language with a simple syntax for building type-safe, object-oriented apps.
|
||||
|
||||
### PowerShell
|
||||
|
||||
PowerShell is an object oriented shell and programming language. It can run anything C# and F# can. It is mostly used in automation and configuration. PSCore is the open source implementation of PowerShell
|
||||
|
||||
### LINQ
|
||||
|
||||
LINQ (Language Integrated Query) is a query language integrated into .NET, used for filtering, processing data or even database queries. Ordinary queries are simply represented as strings without any type safety, but LINQ is fully type safe and provides two ways to write queries.
|
||||
|
||||
### LINQ C# Examples:
|
||||
|
||||
Method syntax:
|
||||
|
||||
```cs
|
||||
var personsAbove18 = persons.Where(person => person.Age >= 18);
|
||||
```
|
||||
|
||||
Query syntax:
|
||||
|
||||
```cs
|
||||
var personsAbove18 = from person in persons where person.Age >= 18 select person;
|
||||
```
|
||||
```
|
||||
|
||||
### NuGet
|
||||
|
||||
NuGet is the .NET package manager. A NuGet package is a single zip file with the extension nupkg or nupack. Virtually every CLR language can be made into a NuGet package. It is also made very easy to publish.
|
||||
|
||||
## Command Line Tooling
|
||||
|
||||
.NET has a very comprehensive set of command line based tooling that is installed with the SDK. You can use these CLI tools to do everything you would ever need to do with a .NET project. Here are a few examples of things that are often done with the CLI tools.
|
||||
|
||||
* Template Generation
|
||||
* Hot Reload
|
||||
* Build and Run your projects
|
||||
* Publish your application
|
||||
* Run your test suite
|
||||
- Template Generation
|
||||
- Hot Reload
|
||||
- Build and Run your projects
|
||||
- Publish your application
|
||||
- Run your test suite
|
||||
|
||||
## Try it out
|
||||
|
||||
By far the simplest way to try out .NET is on the following websites.
|
||||
* [TryDotNet](https://try.dot.net/)
|
||||
* [SharpLab](https://sharplab.io/)
|
||||
* [.NET Fiddle](https://dotnetfiddle.net/)
|
||||
|
||||
- [TryDotNet](https://try.dot.net/)
|
||||
- [SharpLab](https://sharplab.io/)
|
||||
- [.NET Fiddle](https://dotnetfiddle.net/)
|
||||
|
||||
You can also try it on your own PC if you wish. First grab yourself an IDE, the best two are Visual Studio or VSCode, then grab the latest release of the .NET SDK https://dotnet.microsoft.com/download. Once you have both of those, you can either start a new console project in Visual Studio or use the Command Line Tools of .NET to make yourself a project to open in VSCode.
|
||||
https://dotnet.microsoft.com/en-us/learn/dotnet/hello-world-tutorial/intro
|
||||
|
||||
## Resource Dump
|
||||
|
||||
Awesome Libs, these are large collections of tools, libraries and services you can use with different aspects of .Net.
|
||||
|
||||
* https://github.com/quozd/awesome-dotnet
|
||||
* https://github.com/AdrienTorris/awesome-blazor
|
||||
* https://awesomeopensource.com/project/Carlos487/awesome-wpf
|
||||
* https://github.com/ironcev/awesome-roslyn
|
||||
* https://github.com/XamSome/awesome-xamarin
|
||||
- https://github.com/quozd/awesome-dotnet
|
||||
- https://github.com/AdrienTorris/awesome-blazor
|
||||
- https://awesomeopensource.com/project/Carlos487/awesome-wpf
|
||||
- https://github.com/ironcev/awesome-roslyn
|
||||
- https://github.com/XamSome/awesome-xamarin
|
||||
|
||||
**Getting Started Links**
|
||||
* https://visualstudio.microsoft.com/
|
||||
* https://dotnet.microsoft.com/en-us/download/dotnet/6.0
|
||||
* https://code.visualstudio.com/download
|
||||
* https://code.visualstudio.com/docs/languages/csharp
|
||||
|
||||
- https://visualstudio.microsoft.com/
|
||||
- https://dotnet.microsoft.com/en-us/download/dotnet/6.0
|
||||
- https://code.visualstudio.com/download
|
||||
- https://code.visualstudio.com/docs/languages/csharp
|
||||
|
||||
### Guides
|
||||
|
||||
**C#**
|
||||
* https://docs.microsoft.com/en-us/dotnet/csharp/tutorials/intro-to-csharp/
|
||||
* https://channel9.msdn.com/Series/CSharp-Fundamentals-for-Absolute-Beginners
|
||||
* https://youtu.be/BM4CHBmAPh4
|
||||
|
||||
- https://docs.microsoft.com/en-us/dotnet/csharp/tutorials/intro-to-csharp/
|
||||
- https://channel9.msdn.com/Series/CSharp-Fundamentals-for-Absolute-Beginners
|
||||
- https://youtu.be/BM4CHBmAPh4
|
||||
|
||||
**F#**
|
||||
* https://dotnet.microsoft.com/en-us/languages/fsharp
|
||||
* https://youtu.be/yGzu0iDuMNQ
|
||||
|
||||
- https://dotnet.microsoft.com/en-us/languages/fsharp
|
||||
- https://youtu.be/yGzu0iDuMNQ
|
||||
|
||||
**Xamarin**
|
||||
* https://dotnet.microsoft.com/en-us/learn/xamarin/hello-world-tutorial/intro
|
||||
* https://youtu.be/JH8ekYJrFHs
|
||||
|
||||
- https://dotnet.microsoft.com/en-us/learn/xamarin/hello-world-tutorial/intro
|
||||
- https://youtu.be/JH8ekYJrFHs
|
||||
|
||||
**ASP.NET**
|
||||
* https://docs.microsoft.com/en-us/aspnet/core/getting-started/?view=aspnetcore-6.0&tabs=windows
|
||||
* https://youtu.be/lE8NdaX97m0
|
||||
|
||||
- https://docs.microsoft.com/en-us/aspnet/core/getting-started/?view=aspnetcore-6.0&tabs=windows
|
||||
- https://youtu.be/lE8NdaX97m0
|
||||
|
||||
**Blazor**
|
||||
* https://dotnet.microsoft.com/en-us/learn/aspnet/blazor-tutorial/intro
|
||||
* https://youtu.be/9BhbGbTsyeE
|
||||
|
||||
- https://dotnet.microsoft.com/en-us/learn/aspnet/blazor-tutorial/intro
|
||||
- https://youtu.be/9BhbGbTsyeE
|
||||
|
||||
**LINQ**
|
||||
* https://docs.microsoft.com/en-us/dotnet/csharp/programming-guide/concepts/linq/
|
||||
|
||||
- https://docs.microsoft.com/en-us/dotnet/csharp/programming-guide/concepts/linq/
|
||||
|
||||
**Learn nearly everything**
|
||||
* https://youtu.be/pyN7JTQM7sU
|
||||
|
||||
- https://youtu.be/pyN7JTQM7sU
|
||||
|
||||
@@ -8,14 +8,17 @@ title: What is Go?
|
||||
---
|
||||
|
||||
## What is Go?
|
||||
|
||||
Go is a statically typed, compiled programming language designed at Google. Syntactically Go is very similar to C, with memory safety, garbage collection, structural typing and many other advantages. For many developers coming from other languages, Go can be very easy to learn, and to dive into.
|
||||
|
||||
## Why has Go been created?
|
||||
|
||||
Go is a language designed by engineers at Google, and has evolved to meet the needs for their products at massive scale. Today, you will find Go being used in cloud and network services, command line applications, web development, and DevOps and SRE.
|
||||
|
||||
There are numerous open source applications that can be found demonstrating the power of Go. Some of the more popular ones are Docker, Kubernetes, CockroachDB, InfluxDB, Hugo, or Terraform. Go is massively popular in backend development as well, powering the backends of companies like Google, Netflix, Twitter, Twitch, and Cloudflare.
|
||||
|
||||
## Why is Go so good?
|
||||
|
||||
Go has a strong ecosystem of tools and APIs. Furthermore, the concurrency model in Go is really easy to use (in fact, it takes adding just 2 characters to launch a function in a different goroutine). Applications that interact with networking and handle lots of data benefit greatly from concurrency, making Go an obvious choice.
|
||||
|
||||
Furthermore, Go’s simplicity makes it another great contender for large applications where many developers need to work together. Not only in the language specification of Go itself, (which is small enough to be read in a single afternoon!), but also with the tooling. The Go build tool is fast, has built-in dependency management, cross compiles to dozens of platforms, and formats your code consistently. Even when cross compiling Go code with a dozen or so dependencies, Go is miles ahead any other compiled language.
|
||||
@@ -27,11 +30,13 @@ Interfaces in Go are significantly more powerful compared to most other language
|
||||
The implicit nature of interfaces make it possible for the types and structs written by other libraries to also implement your own interfaces, which is a a very powerful that can be used for mocking, and splitting out your code cleanly.
|
||||
|
||||
## Is Go Difficult?
|
||||
|
||||
This is a question that is often asked by programmers deciding whether or not to learn a new language. Go is designed to be simple. It (intentionally) does not have many language features you may find in in X (where X is your favorite programming language), and strives to keep the language specification tiny. Go’s Language Specification can be read in a single afternoon.
|
||||
|
||||
Go does have a slightly unique design system and pattern, which may not be immediately obvious, especially when learning Go after programming in another languages first. Fortunately, it is not very difficult to learn, and you can get started with a taste for it in the Tour of Go.
|
||||
|
||||
## Go’s “Hello world!”
|
||||
|
||||
A hello world is often included when you explain what a language is, so here it is:
|
||||
|
||||
```go
|
||||
@@ -45,9 +50,11 @@ func main() {
|
||||
```
|
||||
|
||||
## Did I hear web server?
|
||||
|
||||
Correct! Go is widely used for web servers and/or APIs. This can go from a very basic REST API to using Websockets. In comparison to other languages, Go does not need some overcomplicated web framework, Go’s standard library already has this implemented and ready for us. Of course there are third party libraries that implements some additions.
|
||||
|
||||
To create a very basic web server we need to import only two standard libraries like the following:
|
||||
|
||||
```go
|
||||
import (
|
||||
"fmt"
|
||||
@@ -72,9 +79,10 @@ Starting the web server is as simple as running go run main.go.
|
||||
|
||||
You can visit http://localhost:1337/hello to see your wonderful HTTP server in action.
|
||||
|
||||
In less than 10 lines of code, we managed to create a basic web server that displays some text! Now it’s up to you to make your creative projects :).
|
||||
In less than 10 lines of code, we managed to create a basic web server that displays some text! Now it’s up to you to make your creative projects :).
|
||||
|
||||
## Concurrency in Go
|
||||
|
||||
Goroutines
|
||||
Python developers may know what Coroutines are, however to include them in your project you need an additional library called asyncio.
|
||||
|
||||
@@ -101,6 +109,7 @@ Here, echo("World") is dispatched off in a different goroutine (a green thread m
|
||||
> Hello world world world
|
||||
|
||||
## Channels
|
||||
|
||||
Another beautiful part of Go’s concurrency model is channels. .You can see channels as being pipes that transfer data. This is used to send values and data from one goroutine to another one, or just to get data back from a goroutine. Here’s an example:
|
||||
|
||||
```go
|
||||
@@ -129,6 +138,7 @@ func main() {
|
||||
Here, we concurrently sum up the items in both of our lists (slices) concurrently, and then send the result back into our channel, allowing us to have easy communication between concurrent routines. While we wait for the data to be sent from the sum function, the main function simply blocks till there is data to take. The arrows such as <- simply describe from where to where the data goes, so either from the channel to the variable or from the variable in the channel.
|
||||
|
||||
## Does Go have objects?
|
||||
|
||||
Yes! There’s just one slight difference here. Go doesn’t directly have a type object, but they have a type that matches the definition of a data structure that integrates both code and behavior. It’s called a struct. Here is an example:
|
||||
|
||||
### Structs
|
||||
@@ -154,6 +164,7 @@ func main() {
|
||||
```
|
||||
|
||||
### Implicit interfaces
|
||||
|
||||
```go
|
||||
type Shape interface {
|
||||
Area() float64
|
||||
@@ -177,12 +188,15 @@ func main() {
|
||||
As you can see from the example above, the struct Rectangle implements the interface Shape but nowhere in the code it’s clearly written. This works for types defined in different packages, and even in different projects!
|
||||
|
||||
## How do I get started?
|
||||
|
||||
I’m glad you’re interested in learning more about Go by yourself!
|
||||
|
||||
## Installation
|
||||
|
||||
The installation is really easy regardless of the operating system you have, simply go to the Go Installation Page and follow the instructions.
|
||||
|
||||
## Learning resources
|
||||
|
||||
Here’s a really good list of learning resources. The tour is a nice place to begin, however these are all great places to improve as a Go developer.
|
||||
|
||||
• [Tour of Go](https://go.dev/tour/welcome/1)
|
||||
@@ -197,4 +211,4 @@ Here’s a really good list of learning resources. The tour is a nice place to b
|
||||
|
||||
• [Go Proverbs](https://www.youtube.com/watch?v=PAAkCSZUG1c)
|
||||
|
||||
We hope to welcome you as a fellow Gopher!
|
||||
We hope to welcome you as a fellow Gopher!
|
||||
|
||||
@@ -8,6 +8,7 @@ title: What is Linux?
|
||||
---
|
||||
|
||||
## The History of Linux / What is Linux?
|
||||
|
||||
The story of Linux starts back in 1969 when Ken Thompson and Denis Richie were creating the Unix operating system which was loved by businesses and universities. But there was a problem, the code was owned by a company called AT&T, but was all fine and dandy until the fire nation attacked Berkeley University decided to make their own operating system called BSD. Which caused AT&T sue them, and that was the start of the Unix Wars which put limitations on Unix development. A couple years later Richard Stallman started the GNU project which was meant to be a Free and open alternative to Unix.
|
||||
|
||||
However Unix is large and complex with hundreds if not thousands of applications so replacing it was no easy task. So for the next few years the project created the tools which we know and love today (Emacs, Grep, Bash, Grub, etc). By the early 90’s GNU had tons of software but was missing something, something vital to software. What could it be?
|
||||
@@ -19,6 +20,7 @@ When it was first released it had limits on commercial use, but by 1993 it was r
|
||||
This led to some of the first Linux distributions like Slackware, Yggdrasil, and Soft Landing, to name a few. Many of these older distros are no longer maintained and are considered historical artifacts (except Slackware, which led to OpenSUSE).
|
||||
|
||||
## What are Linux distributions?
|
||||
|
||||
When people say Linux “distributions” or simply, “distros”, they usually mean operating systems which use the Linux kernel. There are various types of distros suited specifically for personal home use (PCs), workstation, embedded devices, etc. They’re basically different versions of Linux, they are all packaged differently with different pieces of software (out of the box, you can usually download other pieces of software).
|
||||
|
||||
These distros come with their own package managers, window managers and/or desktop environments which can also be further customized by the user. Certain Linux distros allow for a great degree of customization which is rare to see in other operating systems.
|
||||
@@ -31,6 +33,7 @@ Below you can find a link which might help you in your quest to have the Linux d
|
||||
https://distrochooser.de/en/
|
||||
|
||||
## How to install a Linux distribution?
|
||||
|
||||
Now that you have picked up your distribution of choice, it’s time to finally get going and install it!
|
||||
|
||||
The first step is the choice of whether to only have Linux or dual boot with another operating system such as Windows. Both ways require certain steps to be made before the Linux distribution installation can be initiated.
|
||||
@@ -46,6 +49,7 @@ The first step is the choice of whether to only have Linux or dual boot with ano
|
||||
• Continue following the instructions from the distribution’s website, as most have a very good guide on how to install the distribution of choice.
|
||||
|
||||
## Installation Resources
|
||||
|
||||
• [Dual booting Linux & Windows](https://opensource.com/article/18/5/dual-boot-linux)
|
||||
|
||||
• [Rufus](https://rufus.ie/en/)
|
||||
@@ -56,7 +60,7 @@ The first step is the choice of whether to only have Linux or dual boot with ano
|
||||
|
||||
## Installation of packages
|
||||
|
||||
There are a few ways to go about installing software on your newly installed operating system. One of those ways is to use the included software store applications which many distributions include for you. Examples of this is GNOME Software, Discover and Pop!_Shop.
|
||||
There are a few ways to go about installing software on your newly installed operating system. One of those ways is to use the included software store applications which many distributions include for you. Examples of this is GNOME Software, Discover and Pop!\_Shop.
|
||||
|
||||
If the software you are looking for does not exist on the store application, it might mean that it can be downloaded as a package from the application’s website (example: Minecraft for Ubuntu or Fedora), or it could be located in your distribution’s package manager (some packages can only be downloaded via commands). As a last resort, you might have to build the application yourself.
|
||||
|
||||
@@ -69,20 +73,25 @@ Many Linux distributions come with something called a “Package Manager” (lik
|
||||
Now you’re probably wondering, “Why are there so many?” Back in the ye old days, there was no standard. So several were made. Back then a package manager only got a package from a repository and would attempt to install it; it wouldn’t install any dependencies. A little while later the maintainers decided to expand the functionality of package managers to also configure, and install dependencies.
|
||||
|
||||
On Windows or MacOS if you want to download a application (example: Google Chrome), there are several steps involved. First, you have to go to their website to download the installation package for the application, give it permission to install the application and then finally install the application. Whilst on most Linux distros (which use apt in this case), you can open up a terminal session, type the following and hit run:
|
||||
|
||||
```
|
||||
$ sudo apt install chromium-browser
|
||||
```
|
||||
|
||||
Using sudo before the package manager name will give elevated permissions to the package manager to install the latest version available in the repository.
|
||||
|
||||
To learn more about the package manager type and run:
|
||||
|
||||
```
|
||||
$ man apt
|
||||
```
|
||||
|
||||
This directs you to the manual page of APT. You are encouraged to look up the manuals of all commands your encounter if you need to know more about them.
|
||||
|
||||
Note: Neither macOS or Windows come with a package manager pre-installed. However, Homebrew is available for macOS, while Chocolatey is available for Windows to name a few.
|
||||
|
||||
## Introduction to the Linux Command Line
|
||||
|
||||
One of the superpowers of Linux is the fact that almost everything you do using a GUI (graphical user interface) can be done using a CLI (command line interface)/CUI (character user interface).
|
||||
|
||||
This may not be something a lot of users like to use, however - there are quite a few people who want to avoid command line interfaces because it’s intimidating - and that’s perfectly fine but as programmers on Linux, it’s only a matter of time that you finally have to use it.
|
||||
@@ -92,6 +101,7 @@ To learn about them, open up the terminal app on your distro - different distros
|
||||
If you are on bash you should be welcomed with a rather plain and simple screen with your username and PC name separated by a -, your current working directory and a prompt sign ($). You should by default be in the user home directory which is denoted by the tilde sign ~. That is not the real name of the directory, though. Type pwd (print working directory) to see what the actual folder is. The tilde symbol merely points to the $HOME variable.
|
||||
|
||||
## The basics of the Linux Command Line
|
||||
|
||||
Firstly, what is a command? Well the definition of “command” is “To give orders”. When you give your computer a command you’re telling it to do something, whether it be to move a file or draw something on your screen. Now what’s a command line? A command line is a way to tell your computer commands to execute, and a way for it to tell you about things. In most if not all operating systems there is a way to issue direct commands to your computer, on mac you use “Terminal”, on windows it’s “cmd” or “PowerShell”.
|
||||
|
||||
@sudonym best explained the Linux command line, shell and terminal as:
|
||||
@@ -101,15 +111,18 @@ The terminology here can be somewhat confusing but the program that asks for you
|
||||
Now, a shell need not be textual, so modern day OS have a graphical shell. But they provide a text shell inside this graphical shell, which is why it is said to be an “emulator”.
|
||||
|
||||
## Linux command-line resources
|
||||
|
||||
https://ubuntu.com/tutorials/command-line-for-beginners
|
||||
|
||||
https://www.freecodecamp.org/news/the-linux-commands-handbook/
|
||||
https://www.freecodecamp.org/news/the-linux-commands-handbook/
|
||||
|
||||
## What is bash
|
||||
|
||||
Now that we have all that stuff figured out, let’s move onto the interesting stuff. What are the different parts of a command? What are some keywords, and phrases I should know? What shortcuts can I use?
|
||||
There are 3 (technically 4) parts to every command, it’s name, token, and parameters/arguments. The command name tells it what program to run, and where to go to find it. In bash you’re able to set an “alias” for any command. When you run let’s say git commit -m “Minor Changes” it will see git and replace “git” with /usr/bin/git (location of the git program on my computer), so it can run git. Then you have the token, which is like a keyword for whatever program you’re running. In this case it’s commit . Then you have the arguments this time it would be -m “Minor Changes”. -m is an flag which tells it to commit with the message, and my credentials, then the “Minor Changes” is an argument which tells the program what the message is. While we are talking about this we should talk about the difference between -- and -. One is used for words, another is used for one letter arguments, which varies from program to program (for example -h and --help or -v and --version/--verbose).
|
||||
|
||||
## Bash learning resources
|
||||
|
||||
https://linuxconfig.org/bash-scripting-tutorial-for-beginners
|
||||
|
||||
https://tldp.org/LDP/Bash-Beginners-Guide/Bash-Beginners-Guide.pdf
|
||||
@@ -119,4 +132,5 @@ https://docs.microsoft.com/en-us/learn/modules/bash-introduction/
|
||||
https://learnxinyminutes.com/docs/bash/
|
||||
|
||||
## Why use commands?
|
||||
Well for one typing in a command and seeing the computer doing its thing is way more satisfying than just pressing update. Also using commands often frees up valuable system resources. Finally, you can make a script to automate something. A few months ago I was working on a project where we had to recompile the program every hour or so for testing, and compiling it required me to type in 10~ish commands every time. Instead of doing that I decided to make a script to do it for me.
|
||||
|
||||
Well for one typing in a command and seeing the computer doing its thing is way more satisfying than just pressing update. Also using commands often frees up valuable system resources. Finally, you can make a script to automate something. A few months ago I was working on a project where we had to recompile the program every hour or so for testing, and compiling it required me to type in 10~ish commands every time. Instead of doing that I decided to make a script to do it for me.
|
||||
|
||||
@@ -10,16 +10,16 @@ title: What is Modern Java?
|
||||
|
||||
## What is Modern Java?
|
||||
|
||||
Java 17 is upon us! Java 17?! Wait... What happened? Did 7 ate 9, 10, 11, 12, 13, 14, 15, *and* 16!?
|
||||
No! As of Java 9, Oracle have taken Java into a fixed 6 month release schedule. Meaning every six months a new version of Java is released, and every 2 years (so 4 version) a new Long term support build will be marked by Oracle. Java 17 is the latest LTS.
|
||||
Java 17 is upon us! Java 17?! Wait... What happened? Did 7 ate 9, 10, 11, 12, 13, 14, 15, _and_ 16!?
|
||||
No! As of Java 9, Oracle have taken Java into a fixed 6 month release schedule. Meaning every six months a new version of Java is released, and every 2 years (so 4 version) a new Long term support build will be marked by Oracle. Java 17 is the latest LTS.
|
||||
|
||||
Along with this, Oracle have heavily invested in the development of the Java language. This spotlight is going to take you through some of the biggest changes to Java across the last 9 versions. Unlike most of our previous spotlights, we are going to assume that you have some base knowledge of Java already. If you don't, check out the awesome resources in our java channel!
|
||||
|
||||
## Local Type Inference (Java 10)
|
||||
|
||||
One common complaint of Java is that it can often be very verbose. Local Type Inference brings a new reserved word `var` to the Java language. There are some important points you need to know about var.
|
||||
One common complaint of Java is that it can often be very verbose. Local Type Inference brings a new reserved word `var` to the Java language. There are some important points you need to know about var.
|
||||
|
||||
1. `var` is **not** a keyword. In the name of backwards compatibility `var` is simply a reserved type name. You *can* still use it as a variable name but please please please do not do that.
|
||||
1. `var` is **not** a keyword. In the name of backwards compatibility `var` is simply a reserved type name. You _can_ still use it as a variable name but please please please do not do that.
|
||||
2. `var` in java is **not** like `var` in javascript. Java is still statically typed. When you use `var` in Java you are simply letting the compiler infer the type at compile time and this type is used as a static type for the variable.
|
||||
3. `var` is **not** `final` by default. If you want a `final` local variable, you still need to use the `final` keyword.
|
||||
4. `var` **can only** be used for declaring local variables. This includes indexes for for-loops and resource variables for try-with-resource statements.
|
||||
@@ -82,7 +82,7 @@ Local Type Inference is a great new addition to Java. If you want to read more a
|
||||
The OpenJDK FAQ: <https://openjdk.java.net/projects/amber/guides/lvti-faq>
|
||||
The OpenJDK var Style Guide: <https://openjdk.java.net/projects/amber/guides/lvti-style-guide>
|
||||
|
||||
_ _
|
||||
\_ \_
|
||||
**HttpClient (Java 11)**
|
||||
|
||||
The new HttpClient implements HTTP/2 and WebSocket natively to Java. This HTTP API supports both a synchronous and asynchronous approach. If you need a quick and easy to use HttpClient, you no longer need to bring in a new dependency to your project. Below is an example of making a POST request to an api.
|
||||
@@ -102,7 +102,7 @@ public CompletableFuture<String> makeRequest(MyPayload payload) {
|
||||
.POST(BodyPublishers.ofString(payload.toJsonString()))
|
||||
.setHeader("User-Agent", "TPH is awesome!")
|
||||
.build();
|
||||
|
||||
|
||||
return client.sendAsync(request, BodyHandlers.ofString())
|
||||
.thenApply(HttpResponse::body)
|
||||
.exceptionally(e -> e.getMessage());
|
||||
@@ -118,7 +118,7 @@ To read more about new Java HTTP Client check out this primer from the developer
|
||||
|
||||
## Switch Expressions (Java 14)
|
||||
|
||||
You might be sat there thinking switch expressions have been in Java forever, but that is where you're wrong! Java has had switch ***statements*** but only in Java 14 did it get switch expressions. As the name might suggest, it extends the switch keyword so that it can be used as an expression.
|
||||
You might be sat there thinking switch expressions have been in Java forever, but that is where you're wrong! Java has had switch **_statements_** but only in Java 14 did it get switch expressions. As the name might suggest, it extends the switch keyword so that it can be used as an expression.
|
||||
|
||||
Switch expressions differ from switch statements in a number of ways.
|
||||
|
||||
@@ -185,6 +185,7 @@ public void printLettersInDay(Day day) {
|
||||
```
|
||||
|
||||
Much like our old switch statement, we use the colon style and yield our value to the println method. This is a nice step forward but we can do better! Let's modify this design to use the new arrow label and see what it looks like.
|
||||
|
||||
```java
|
||||
public void printLettersInDay(Day day) {
|
||||
System.out.println(
|
||||
@@ -201,7 +202,7 @@ public void printLettersInDay(Day day) {
|
||||
|
||||
Note that in both of these last examples, the default statement is not required since this example exhaustively covers the `Day` enum. If you remove it your code will work just fine!
|
||||
|
||||
_ _
|
||||
\_ \_
|
||||
**Text Blocks (Java 15)**
|
||||
|
||||
Text blocks bring multiline strings to Java! Two common cases where you would want multiline strings are if you are embedding SQL queries into your code, or making use of some HTML. Below are two very simple examples of how text blocks change how we use multi line strings.
|
||||
@@ -359,9 +360,9 @@ public abstract sealed class Shape permits Square, Triangle, Circle {
|
||||
|
||||
Okay, so what benefit does this give us?
|
||||
|
||||
There are sometimes cases where instead of needing a fixed number of values (using an enum), we want a fixed number of *types* of values. This is where sealed classes start to provide us some benefit. Now that we've declared `Animal` has a limited set of subtypes, we can start to do some interesting things with the new (and upcoming) pattern matching features of java.
|
||||
There are sometimes cases where instead of needing a fixed number of values (using an enum), we want a fixed number of _types_ of values. This is where sealed classes start to provide us some benefit. Now that we've declared `Animal` has a limited set of subtypes, we can start to do some interesting things with the new (and upcoming) pattern matching features of java.
|
||||
|
||||
The pattern matching we previously talked about with `instanceof` is coming to switch cases and expressions. This is a preview feature of Java 17 right now but here's an example what you can do.
|
||||
The pattern matching we previously talked about with `instanceof` is coming to switch cases and expressions. This is a preview feature of Java 17 right now but here's an example what you can do.
|
||||
|
||||
```java
|
||||
public static Shape rotate(Shape shape, double angle) {
|
||||
@@ -372,16 +373,16 @@ public static Shape rotate(Shape shape, double angle) {
|
||||
}
|
||||
}
|
||||
```
|
||||
Because we've used a sealed class to define an exhaustive list of classes that can extend our `Shape` class, the compile can verify that our switch expression is also exhaustive. We have no need for a default case here, and we can return different things depending on the class provided. In this example, a Circle doesn't need to rotate. Previously this kind of thing would have been achieved with an if-else block, but it isn't nearly as safe. A developer could easily forget a class.
|
||||
|
||||
Because we've used a sealed class to define an exhaustive list of classes that can extend our `Shape` class, the compile can verify that our switch expression is also exhaustive. We have no need for a default case here, and we can return different things depending on the class provided. In this example, a Circle doesn't need to rotate. Previously this kind of thing would have been achieved with an if-else block, but it isn't nearly as safe. A developer could easily forget a class.
|
||||
|
||||
## Jigsaw (Java 9)
|
||||
|
||||
Project Jigsaw has the primary goal of making the JDK more modular and bring in the ability to generate custom JRE's to distribute alongside your application.
|
||||
Project Jigsaw has the primary goal of making the JDK more modular and bring in the ability to generate custom JRE's to distribute alongside your application.
|
||||
|
||||
Imagine that you make a command-line calculator. It uses a `Scanner` for reading and parsing input. It uses `System.out.println` to pass information back to the user. And it uses the `Math` class for some of the more complex maths operations. We're not really using much more from the java language, yet our users would need the entire JRE in order to run our application. That's around 150MB.
|
||||
|
||||
Project Jigsaw resolves this problem by allowing us to define the modules of the Java language that we use in our program. We can then use tools like `jlink` and `jpackage` to build a custom Java Runtime that only includes the necessary code to run our application. Now, perhaps our application distribution is only 20MB.
|
||||
Project Jigsaw resolves this problem by allowing us to define the modules of the Java language that we use in our program. We can then use tools like `jlink` and `jpackage` to build a custom Java Runtime that only includes the necessary code to run our application. Now, perhaps our application distribution is only 20MB.
|
||||
|
||||
So how do we make use of Project Jigsaws modules?
|
||||
|
||||
@@ -397,6 +398,7 @@ JavaFX is the modern way to deal with GUI development in Java. As of Java 11 it
|
||||
It is still free to use, and Gluon produce a great visual GUI builder called Scene Builder. <https://gluonhq.com/products/scene-builder/>
|
||||
|
||||
## More resources
|
||||
|
||||
OpenJDK has several projects that aim to bring improvements to the Java language, some of which are mentioned in this spotlight. If you'd like to read more about the projects and follow the progress checkout the links below!
|
||||
Project Amber: <https://openjdk.java.net/projects/amber/>
|
||||
Project Panama: <https://openjdk.java.net/projects/panama/>
|
||||
|
||||
@@ -7,31 +7,38 @@ title: What is React?
|
||||
---
|
||||
|
||||
## What is React.js?
|
||||
- From the official definition - "React is a declarative, efficient, and flexible JavaScript library used for building User Interfaces."
|
||||
- It is an open-source project by Facebook.
|
||||
- It is an extensive library that's not exclusive to the web. There are many possibilities like React Native to build mobile apps, React 360 to make virtual reality apps, etc.
|
||||
|
||||
- From the official definition - "React is a declarative, efficient, and flexible JavaScript library used for building User Interfaces."
|
||||
- It is an open-source project by Facebook.
|
||||
- It is an extensive library that's not exclusive to the web. There are many possibilities like React Native to build mobile apps, React 360 to make virtual reality apps, etc.
|
||||
|
||||
## why should I use React.js?
|
||||
|
||||
The primary goals of React are to reduce the bugs that occur when we develop UIs, improve the developer experience, and provide flexibility. It does all this by using:
|
||||
- Declarative views
|
||||
- Component-Based Architecture
|
||||
- JSX Syntax
|
||||
- Developer Flexibility
|
||||
- Native Typescript Support (or prop-types for Javascript users)
|
||||
- Virtual DOM
|
||||
|
||||
|
||||
- Declarative views
|
||||
- Component-Based Architecture
|
||||
- JSX Syntax
|
||||
- Developer Flexibility
|
||||
- Native Typescript Support (or prop-types for Javascript users)
|
||||
- Virtual DOM
|
||||
|
||||
### Declarative Views
|
||||
|
||||
React makes it effortless to create interactive UIs. It is the view layer of the MVC - Model View Controller. You write simple views for each state in your application. React will automatically update and render just the right components whenever your data changes. Declarative views make your code more predictable, simpler to understand, and easier to debug.
|
||||
|
||||
### Component-Based Architecture
|
||||
|
||||
Components are one of the most important aspects of React. They are small, reusable pieces of HTML / JSX (more on this) code that make a part of the user interface. Components are distinct pieces of code that provide some functionality or are logical sections. You can have many components within a component.
|
||||
|
||||
[More about components here](https://reactjs.org/docs/components-and-props.html)
|
||||
|
||||
### JSX Syntax:
|
||||
|
||||
JSX is a syntax extension of JavaScript. It is similar to a template language, but it has the full power of JavaScript. It is HTML/XML-based with embedded JavaScript. JSX isn't compulsory, but it makes things easier for the developer. Here's an example:
|
||||
|
||||
**JSX Syntax**
|
||||
|
||||
```js
|
||||
...
|
||||
function formatName({ firstName, lastName }) {
|
||||
@@ -46,6 +53,7 @@ const Component = () => <h1>Hello {formatName(user)}</h1>;
|
||||
```
|
||||
|
||||
**Non-JSX Syntax**
|
||||
|
||||
```js
|
||||
...
|
||||
function formatName({ firstName, lastName }) {
|
||||
@@ -72,14 +80,16 @@ As you can see above, JSX makes your life so much easier.
|
||||
[JSX in-depth](https://reactjs.org/docs/jsx-in-depth.html)
|
||||
|
||||
### Developer Flexibility
|
||||
|
||||
React follows the motto of "Learn once, write anywhere." It means that React does not make assumptions about the technologies you use. You can easily mix and match it with different technologies.
|
||||
|
||||
While developing, React gives you the flexibility of using either ES6-based classes or the new functional components (that use something called hooks to interact with the React API).
|
||||
|
||||
### Functional components
|
||||
|
||||
```js
|
||||
function Component() {
|
||||
return <h1>Hello React!</h1>;
|
||||
return <h1>Hello React!</h1>;
|
||||
}
|
||||
```
|
||||
|
||||
@@ -93,41 +103,42 @@ const Component = () => <h1>Hello React!</h1>;
|
||||
|
||||
```js
|
||||
class Component extends React.Component {
|
||||
render() {
|
||||
return <h1>Hello React!</h1>;
|
||||
}
|
||||
render() {
|
||||
return <h1>Hello React!</h1>;
|
||||
}
|
||||
}
|
||||
```
|
||||
|
||||
### Type-checking with PropTypes
|
||||
As the size of your app grows, you can save a lot of time by catching bugs with the help of prop-types. You can always use Javascript extensions like Flow or Typescript, but even if you don't use those, React has built-in support for type-checking using prop-types. Here's an example:
|
||||
|
||||
As the size of your app grows, you can save a lot of time by catching bugs with the help of prop-types. You can always use Javascript extensions like Flow or Typescript, but even if you don't use those, React has built-in support for type-checking using prop-types. Here's an example:
|
||||
|
||||
```js
|
||||
import PropTypes from 'prop-types';
|
||||
import PropTypes from "prop-types";
|
||||
|
||||
class Greeting extends React.Component {
|
||||
render() {
|
||||
return (
|
||||
<h1>Hello, {this.props.name}</h1>
|
||||
);
|
||||
return <h1>Hello, {this.props.name}</h1>;
|
||||
}
|
||||
}
|
||||
|
||||
Greeting.propTypes = {
|
||||
name: PropTypes.string
|
||||
name: PropTypes.string,
|
||||
};
|
||||
```
|
||||
|
||||
[For more information, you can refer to the docs](https://reactjs.org/docs/typechecking-with-proptypes.html)
|
||||
|
||||
### Native Typescript Support
|
||||
|
||||
The Typescript compiler has native support for JSX, which provides a better way to assign types than compared to prop-types. You just need to enable JSX in your tsconfig.json.
|
||||
|
||||
### Virtual DOM
|
||||
|
||||
React uses something called a "Virtual DOM". Virtual DOM is a programming concept where an ideal, or "virtual", representation of a UI is kept in memory and synced with the "real" DOM by a library such as react-dom. This process is called reconciliation. This approach enables the declarative API of React - you tell React what state you want the UI to be in, and it makes sure the DOM matches that state. This abstracts out the attribute manipulation, event handling, and manual DOM updating that you would otherwise have to use to build your app.
|
||||
|
||||
* [More on Virtual DOM](https://reactjs.org/docs/faq-internals.html)
|
||||
* [More on Reconciliation](https://reactjs.org/docs/reconciliation.html)
|
||||
- [More on Virtual DOM](https://reactjs.org/docs/faq-internals.html)
|
||||
- [More on Reconciliation](https://reactjs.org/docs/reconciliation.html)
|
||||
|
||||
## Okay, this sounds great! So, how do I get started with React?
|
||||
|
||||
@@ -146,14 +157,17 @@ It will automatically create a new folder called my-app and will process a few t
|
||||
For more customization options, visit the [create react app website](https://create-react-app.dev/).
|
||||
|
||||
Although CRA is a good choice for beginners, there may be a better choice for you depending on the type of your project:
|
||||
- For single-page apps (SPA) or basic React projects, use CRA.
|
||||
- For a static, content-oriented website, use [Gatsby](https://www.gatsbyjs.org/).
|
||||
- For a server-rendered website with Node.js, use [Next.js](https://nextjs.org/). Next.js supports Server-Side Rendering (SSR), Static Site Generation (SSG), or hybrid static and server-side rendering.
|
||||
|
||||
|
||||
- For single-page apps (SPA) or basic React projects, use CRA.
|
||||
- For a static, content-oriented website, use [Gatsby](https://www.gatsbyjs.org/).
|
||||
- For a server-rendered website with Node.js, use [Next.js](https://nextjs.org/). Next.js supports Server-Side Rendering (SSR), Static Site Generation (SSG), or hybrid static and server-side rendering.
|
||||
|
||||
### Props
|
||||
|
||||
Data in React is handled and managed by the state and props of a component. Every react component accepts arbitrary inputs called "props" (short for properties). React props are comparable to HTML attributes. While HTML elements have attributes, React components have props. You can pass data from a parent component to a child component using properties.
|
||||
|
||||
### Functional components
|
||||
|
||||
```js
|
||||
...
|
||||
function Child(props) {
|
||||
@@ -193,6 +207,7 @@ React has a special prop called children, for JSX elements that contain both an
|
||||
For more on children, refer to [the react docs](https://reactjs.org/docs/jsx-in-depth.html#children-in-jsx)
|
||||
|
||||
### State
|
||||
|
||||
All React components have their states. The state of a component is like its props, but it is private and fully controlled by the component. For functional components, you need to use the useState hook to manage the state. Whenever the state of the component changes, the entire component re-renders. For example:
|
||||
|
||||
**Class components**
|
||||
@@ -257,9 +272,9 @@ class MyComponent extends React.Component {
|
||||
|
||||
This method is only available for class components. If you are using functional components, then multiple lifecycle methods are compressed into one hook. I will get back to this later.
|
||||
|
||||
|
||||
**componentWillUnmount**
|
||||
This method is invoked immediately before a component is unmounted and destroyed. If you had set up subscriptions or timers, this would be a great place to cancel those.
|
||||
|
||||
```js
|
||||
class MyComponent extends React.Component {
|
||||
...
|
||||
@@ -286,6 +301,7 @@ class MyComponent extends React.Component {
|
||||
[Learn more about lifecycle methods](https://reactjs.org/docs/react-component.html#the-component-lifecycle)
|
||||
|
||||
### Alternative for Functional Components
|
||||
|
||||
React provides a useEffect hook to implement the above lifecycle methods in functional components. Here's how to use it:
|
||||
|
||||
```js
|
||||
@@ -319,29 +335,28 @@ There are many different ways to add styling to React apps. Below are some of th
|
||||
• CSS Frameworks
|
||||
|
||||
### CSS Files
|
||||
|
||||
Assuming that you have basic HTML, CSS, and JavaScript knowledge, this is the easiest and the most intuitive way to add styling to a React app. If you're using CRA, import the CSS file at the top of your React component and add the classes to your elements.
|
||||
|
||||
```js
|
||||
import './styles.css';
|
||||
import "./styles.css";
|
||||
|
||||
const MyReactComponent = () => (
|
||||
<main className='my-styled-class'>
|
||||
Hello World!
|
||||
</main>
|
||||
<main className="my-styled-class">Hello World!</main>
|
||||
);
|
||||
```
|
||||
|
||||
|
||||
If you are using a custom setup, you may have to change some settings before using CSS files, as shown above.
|
||||
|
||||
### CSS-in-JS
|
||||
|
||||
React uses a different inline CSS format called CSS-in-JS, where you add your styles in JavaScript. Here's is an example of CSS-in-JS.
|
||||
|
||||
```js
|
||||
const Button = () => (
|
||||
<button style={{ backgroundColor: 'blue', padding: '10px 5px' }}>
|
||||
Click Me!
|
||||
</button>
|
||||
<button style={{ backgroundColor: "blue", padding: "10px 5px" }}>
|
||||
Click Me!
|
||||
</button>
|
||||
);
|
||||
```
|
||||
|
||||
@@ -354,62 +369,68 @@ There are tons of CSS-in-JS libraries. Two of the most common ones are:
|
||||
• emotion
|
||||
|
||||
### Styled Components
|
||||
|
||||
A CSS-in-JS library where you make components for every element. You can add it to your project using npm. Example:
|
||||
|
||||
```js
|
||||
import styled from 'styled-components';
|
||||
import styled from "styled-components";
|
||||
|
||||
const Button = styled.button`
|
||||
background-color: blue;
|
||||
padding: 10px 5px;
|
||||
background-color: blue;
|
||||
padding: 10px 5px;
|
||||
`;
|
||||
|
||||
const MyComponent = () => (
|
||||
<div>
|
||||
<Button>Click Me!</Button>
|
||||
</div>
|
||||
<div>
|
||||
<Button>Click Me!</Button>
|
||||
</div>
|
||||
);
|
||||
```
|
||||
|
||||
|
||||
The Button component above will have all the properties and attributes of a standard button element along with all the styles you applied to it. There are a lot more possibilities. Learn more about styled-components on their [official website](https://styled-components.com/).
|
||||
|
||||
### Emotion
|
||||
|
||||
Emotion is another CSS-in-JS library. What sets it apart is that it comes in many different "flavors" or packages. @emotion/css is the standard one. Example:
|
||||
|
||||
```js
|
||||
import { css } from '@emotion/css';
|
||||
import { css } from "@emotion/css";
|
||||
|
||||
const MyComponent = () => (
|
||||
<button className={css`
|
||||
padding: 10px;
|
||||
background-color: blue;
|
||||
color: white;
|
||||
&:hover {
|
||||
color: black;
|
||||
}
|
||||
`}>
|
||||
Click Me!
|
||||
</button>
|
||||
<button
|
||||
className={css`
|
||||
padding: 10px;
|
||||
background-color: blue;
|
||||
color: white;
|
||||
&:hover {
|
||||
color: black;
|
||||
}
|
||||
`}
|
||||
>
|
||||
Click Me!
|
||||
</button>
|
||||
);
|
||||
```
|
||||
|
||||
|
||||
Here, you apply all the CSS styles within the className attribute of the element. This example is just one bit of all the gigabytes of possibilities with this library. Learn more about emotion on their [official website](https://emotion.sh/)
|
||||
|
||||
## UI Libraries
|
||||
|
||||
There are hundreds of different UI libraries available on the internet. UI libraries are usually a part of the company's or the project's design system. They provide ready-made components that you can use in your project. Most UI libraries allow you to tweak their offerings according to your project needs. Here are a few popular UI libraries:
|
||||
- [Material Design](https://material-ui.com/)
|
||||
- [Ant Design](https://ant.design/)
|
||||
- [Semantic UI](https://semantic-ui.com/)
|
||||
- [Fluent UI](https://developer.microsoft.com/en-us/fluentui#/get-started/web)
|
||||
- [Chakra UI](https://chakra-ui.com/)
|
||||
And the list of UI libraries goes on and on.
|
||||
|
||||
- [Material Design](https://material-ui.com/)
|
||||
- [Ant Design](https://ant.design/)
|
||||
- [Semantic UI](https://semantic-ui.com/)
|
||||
- [Fluent UI](https://developer.microsoft.com/en-us/fluentui#/get-started/web)
|
||||
- [Chakra UI](https://chakra-ui.com/)
|
||||
And the list of UI libraries goes on and on.
|
||||
|
||||
## CSS Frameworks
|
||||
|
||||
CSS Frameworks provide you with ready-made classes. Depending on the framework you use, these classes contain different utility functions, UI components, etc. You can easily apply classes from the selected framework to your elements. Here are a few popular CSS frameworks:
|
||||
- [TailwindCSS](https://tailwindcss.com/)
|
||||
- [Bootstrap](https://getbootstrap.com/)
|
||||
- [Foundation](https://get.foundation/)
|
||||
- [Bulma](https://bulma.io/)
|
||||
Some CSS frameworks like Bootstrap or TailwindCSS also have their UI libraries that you can use in your project.
|
||||
|
||||
- [TailwindCSS](https://tailwindcss.com/)
|
||||
- [Bootstrap](https://getbootstrap.com/)
|
||||
- [Foundation](https://get.foundation/)
|
||||
- [Bulma](https://bulma.io/)
|
||||
Some CSS frameworks like Bootstrap or TailwindCSS also have their UI libraries that you can use in your project.
|
||||
|
||||
@@ -25,28 +25,28 @@ Let's see static typing in action. Assume a third party library provides us with
|
||||
|
||||
```ts
|
||||
type Stock = {
|
||||
fruits: Fruit[]
|
||||
leftovers?: Leftover[]
|
||||
}
|
||||
fruits: Fruit[];
|
||||
leftovers?: Leftover[];
|
||||
};
|
||||
|
||||
declare function getStock(): Stock
|
||||
declare function getStock(): Stock;
|
||||
```
|
||||
|
||||
When we run this code in JavaScript:
|
||||
|
||||
```ts
|
||||
const stock = getStock()
|
||||
stock.leftovers.forEach(leftover => console.log(leftover))
|
||||
const stock = getStock();
|
||||
stock.leftovers.forEach((leftover) => console.log(leftover));
|
||||
// Cannot read property 'leftovers' of undefined
|
||||
```
|
||||
|
||||
We lost millions because of this bug :(. You might be wondering how TypeScript could have saved us here:
|
||||
|
||||
```ts
|
||||
const stock = getStock()
|
||||
const stock = getStock();
|
||||
// leftovers?: Leftover[] | undefined
|
||||
// Object is possibly 'undefined'.(2532)
|
||||
stock.leftovers.forEach(leftover => console.log(leftover))
|
||||
stock.leftovers.forEach((leftover) => console.log(leftover));
|
||||
```
|
||||
|
||||
Our editor warns us as we code! We would also not be able to transpile this code to JavaScript before we fix it by either using optional chaining `stock.leftovers?.forEach(...` , or by writing an if statement which checks for the existence of `leftovers` before using it.
|
||||
@@ -110,7 +110,7 @@ TypeScript provides an additional layer of documentation. Type annotations make
|
||||
|
||||
```ts
|
||||
function add(a: number, b: number) {
|
||||
return a + b
|
||||
return a + b;
|
||||
}
|
||||
```
|
||||
|
||||
@@ -118,20 +118,20 @@ function add(a: number, b: number) {
|
||||
|
||||
```ts
|
||||
class Person {
|
||||
protected name: string
|
||||
private age: number
|
||||
readonly numberOfLives = 1
|
||||
public favouriteLanguage: string
|
||||
protected name: string;
|
||||
private age: number;
|
||||
readonly numberOfLives = 1;
|
||||
public favouriteLanguage: string;
|
||||
|
||||
constructor(name: string, age: number, favouriteLanguage = "TypeScript") {
|
||||
this.name = name
|
||||
this.age = age
|
||||
this.favouriteLanguage = favouriteLanguage
|
||||
this.name = name;
|
||||
this.age = age;
|
||||
this.favouriteLanguage = favouriteLanguage;
|
||||
}
|
||||
|
||||
@CatchErrorAndLog // Did you know that TypeScript also supports decorators?
|
||||
public someMethod() {
|
||||
throw new Error("method not implemented")
|
||||
throw new Error("method not implemented");
|
||||
}
|
||||
}
|
||||
```
|
||||
@@ -146,17 +146,17 @@ Let's say we want to create a function which accepts an object and a key of that
|
||||
const member = {
|
||||
username: "moe",
|
||||
isShid: true,
|
||||
}
|
||||
};
|
||||
|
||||
function getValueByKey<T, K extends keyof T>(obj: T, key: K): T[K] {
|
||||
return obj[key]
|
||||
return obj[key];
|
||||
}
|
||||
|
||||
getValueByKey(member, "username") // string
|
||||
getValueByKey(member, "isShid") // boolean
|
||||
getValueByKey(member, "username"); // string
|
||||
getValueByKey(member, "isShid"); // boolean
|
||||
```
|
||||
|
||||
This function accepts 2 generic parameters (you could think of them as placeholders): `T` and `K`, we assign the first parameter of this function to generic type T, you might be wondering about the `extends` keyword, basically this adds a constraint to generic parameter `K`, you could read it as "Type `K` must be a key of type `T`".
|
||||
This function accepts 2 generic parameters (you could think of them as placeholders): `T` and `K`, we assign the first parameter of this function to generic type T, you might be wondering about the `extends` keyword, basically this adds a constraint to generic parameter `K`, you could read it as "Type `K` must be a key of type `T`".
|
||||
|
||||
Finally we declare the return type by indexing type `T` using our second parameter which is the key, this is referred to as a "indexed access type". TypeScript will now warn us whenever we provide a key that does not exist in the object. We achieved type safety without knowing what object the user would pass in to our function.
|
||||
|
||||
@@ -168,20 +168,20 @@ What if we want to create a function or compose other types based on certain cri
|
||||
|
||||
```ts
|
||||
// Conditional types uses the same syntax you know of ternaries
|
||||
type IsNumber<T> = T extends number ? true : false
|
||||
type Result = IsNumber<7> // true
|
||||
type IsNumber<T> = T extends number ? true : false;
|
||||
type Result = IsNumber<7>; // true
|
||||
|
||||
// Inferring typed within conditional types using the "infer" keyword.
|
||||
// This example uses variadic tuple types
|
||||
type LastElementType<T> = T extends [...infer _Head, infer Tail] ? Tail : never
|
||||
type Last = LastElementType<[string, boolean, number]> // number
|
||||
type LastElementType<T> = T extends [...infer _Head, infer Tail] ? Tail : never;
|
||||
type Last = LastElementType<[string, boolean, number]>; // number
|
||||
```
|
||||
|
||||
## Other examples
|
||||
|
||||
```ts
|
||||
// Template literal types
|
||||
type Border = `border-${"top" | "bottom" | "left" | "right"}`
|
||||
type Border = `border-${"top" | "bottom" | "left" | "right"}`;
|
||||
|
||||
// Narrowing down union types
|
||||
type APIResponseSuccess = {
|
||||
@@ -243,10 +243,12 @@ TypeScript Handbook: https://www.typescriptlang.org/docs/handbook/intro.html: St
|
||||
Playground: https://www.typescriptlang.org/play: Try TypeScript in your browser!
|
||||
|
||||
## Books
|
||||
|
||||
typescript-book: https://github.com/basarat/typescript-book: Free online guide to TypeScript.
|
||||
Programming TypeScript: https://www.oreilly.com/library/view/programming-typescript/9781492037644/: Solid book for beginners.
|
||||
Effective TypeScript: https://effectivetypescript.com/: Improve your use of TypeScript (best for experienced programmers).
|
||||
Tackling TypeScript: https://exploringjs.com/tackling-ts/index.html: Adopt TypeScript as a JavaScript programmer.
|
||||
|
||||
## Videos
|
||||
Courses on egghead.io: https://egghead.io/q/typescript
|
||||
|
||||
Courses on egghead.io: https://egghead.io/q/typescript
|
||||
|
||||
@@ -7,13 +7,13 @@ title: What is Visual Studio Code?
|
||||
|
||||
## What is Visual Studio Code?
|
||||
|
||||
VSCode is an open-source text editor supported by Microsoft, available for Windows, macOS, and every distro of Linux. Like all the other text editors, you can write whatever you want.
|
||||
Install an extension for the language of your choice, start writing code and run it. There, that's all you need to get started with VSCode.
|
||||
VSCode is an open-source text editor supported by Microsoft, available for Windows, macOS, and every distro of Linux. Like all the other text editors, you can write whatever you want.
|
||||
Install an extension for the language of your choice, start writing code and run it. There, that's all you need to get started with VSCode.
|
||||
But, VSCode is much more than that. The biggest superpower of VSCode is its wide array of plugins. Plugins allow you to get different themes, functionality, language support (syntax highlighting, code snippets), etc.
|
||||
|
||||
## Why VSCode?
|
||||
|
||||
Now I hear you, you're already familiar with the software you use and are wondering why should you even bother. Well, you should.
|
||||
Now I hear you, you're already familiar with the software you use and are wondering why should you even bother. Well, you should.
|
||||
|
||||
Not only is it one of the most popular text editors according to the stack overflow developer survey 2019, but it's also very lightweight and easy to use. Even though it's built with electron, which is notorious for high ram usage, vscode is snappy and fast. It has a simple and straightforward design, everything is where it's supposed to be and lets you just code. I personally think of it as a more beginner-friendly version of vim or emacs.
|
||||
|
||||
@@ -39,7 +39,7 @@ There's actually a lot of features that vscode offers in terms of cli outside of
|
||||
|
||||
|
||||
|
||||
`--diff <file1> <file2>` - This will take in two files as input and then show the differences in split view
|
||||
`--diff <file1> <file2>` - This will take in two files as input and then show the differences in split view
|
||||
|
||||
#### `—goto`
|
||||
|
||||
@@ -51,7 +51,7 @@ You can even specify the line and character to open at. For example,
|
||||
|
||||
`code --goto <path-to-file>:<line>:<character>`
|
||||
|
||||
For more commands and advanced usage, you can check it out at https://code.visualstudio.com/docs/editor/command-line
|
||||
For more commands and advanced usage, you can check it out at https://code.visualstudio.com/docs/editor/command-line
|
||||
|
||||
### Useful keyboard shortcuts
|
||||
|
||||
@@ -88,7 +88,7 @@ Want to try out VSCode but don't want to learn Keybindings? Fret not, for it has
|
||||
- [Atom](https://marketplace.visualstudio.com/items?itemName=ms-vscode.atom-keybindings)
|
||||
- [Sublime text](https://marketplace.visualstudio.com/items?itemName=ms-vscode.sublime-keybindings)
|
||||
|
||||
VSC has it all.
|
||||
VSC has it all.
|
||||
|
||||
### File Editing
|
||||
|
||||
@@ -103,29 +103,29 @@ VSC has it all.
|
||||
|
||||
There's a lot of web-dev plugins so i am giving it its own special section
|
||||
|
||||
- [Auto Rename Tag](https://marketplace.visualstudio.com/items?itemName=formulahendry.auto-rename-tag): You rename the beginning of a tag and it will edit the closing tag as well.
|
||||
- [Auto Rename Tag](https://marketplace.visualstudio.com/items?itemName=formulahendry.auto-rename-tag): You rename the beginning of a tag and it will edit the closing tag as well.
|
||||
- [Live Server](https://marketplace.visualstudio.com/items?itemName=ritwickdey.LiveServer): Launches a local development server that live reloads.
|
||||
|
||||
|
||||
### Database
|
||||
|
||||
Theres extensions for you folks too with database problems
|
||||
|
||||
- [vscode-database](https://marketplace.visualstudio.com/items?itemName=bajdzis.vscode-database): Lets you connect to MySQl Server
|
||||
- [SQLTools](https://marketplace.visualstudio.com/items?itemName=mtxr.sqltools): Allows you to connect to basicly any SQL in the world
|
||||
- [vscode-database](https://marketplace.visualstudio.com/items?itemName=bajdzis.vscode-database): Lets you connect to MySQl Server
|
||||
- [SQLTools](https://marketplace.visualstudio.com/items?itemName=mtxr.sqltools): Allows you to connect to basicly any SQL in the world
|
||||
|
||||
### Git
|
||||
|
||||
Who can forget Git. Here's some for git usage
|
||||
|
||||
- [Git Lens](https://marketplace.visualstudio.com/items?itemName=eamodio.gitlens): It does a ton of things to supercharge your git workflow including seeing who wrote what via git blame so you can blame then when you notice bad code that shouldve been refactored.
|
||||
- [Git History](https://marketplace.visualstudio.com/items?itemName=donjayamanne.githistory): Look at the git log and the timeline of commits so you can be proud of how many commits you make to your own code.
|
||||
- [Git Lens](https://marketplace.visualstudio.com/items?itemName=eamodio.gitlens): It does a ton of things to supercharge your git workflow including seeing who wrote what via git blame so you can blame then when you notice bad code that shouldve been refactored.
|
||||
- [Git History](https://marketplace.visualstudio.com/items?itemName=donjayamanne.githistory): Look at the git log and the timeline of commits so you can be proud of how many commits you make to your own code.
|
||||
|
||||
### Language Specific Alternatives
|
||||
|
||||
Sometimes wonder whether there are better alternatives for language support than the official one? Well yeah there are
|
||||
|
||||
- [Rust-Analyser](https://marketplace.visualstudio.com/items?itemName=matklad.rust-analyzer): Its not fully stable so its not official, but the speed and features make it worth it
|
||||
- [Pylance](https://marketplace.visualstudio.com/items?itemName=ms-python.vscode-pylance): Its from Microsoft, and non open source. Now wait wait wait, its good. it works with the python plugin and enhances it
|
||||
- [Rust-Analyser](https://marketplace.visualstudio.com/items?itemName=matklad.rust-analyzer): Its not fully stable so its not official, but the speed and features make it worth it
|
||||
- [Pylance](https://marketplace.visualstudio.com/items?itemName=ms-python.vscode-pylance): Its from Microsoft, and non open source. Now wait wait wait, its good. it works with the python plugin and enhances it
|
||||
|
||||
### How do I install these?
|
||||
|
||||
@@ -136,13 +136,14 @@ Well There are three ways.
|
||||
3. Open the command palette using `ctrl + shift + p` https://i.imgur.com/qm8yI0n.png And then copy paste the code found on the extension page.
|
||||
|
||||
## VSC Web
|
||||
|
||||
Wait what? Vscode on the web? You mean I can run vscode in my browser to make quick code changes wherever I am?
|
||||
|
||||
Well that was awfully specific, but yes!
|
||||
You can go to https://vscode.dev/ in your browser for it!
|
||||
|
||||
Its got pretty much everything vscode has, even extensions.
|
||||
There are some limitations, which you can read more about here: https://code.visualstudio.com/docs/editor/vscode-web#_current-limitations
|
||||
Its got pretty much everything vscode has, even extensions.
|
||||
There are some limitations, which you can read more about here: https://code.visualstudio.com/docs/editor/vscode-web#_current-limitations
|
||||
|
||||
Read more about the entire thing right here:
|
||||
https://code.visualstudio.com/docs/editor/vscode-web
|
||||
https://code.visualstudio.com/docs/editor/vscode-web
|
||||
|
||||
Reference in New Issue
Block a user