Stone_Red/website
1
0
Fork 0
mirror of https://github.com/Stone-Red-Code/website.git synced 2026-09-04 01:05:58 +02:00
Code Issues Packages Projects Releases Wiki Activity

Fix spotlight formatting

Browse Source
This commit is contained in:
Mark
2022-03-08 13:59:59 +00:00
parent 21d322bdf4
commit 13a21d0b41
2 changed files with 41 additions and 42 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/content/spotlights/what-is-blender.md
+19 -20
View File
@@ -12,7 +12,7 @@ 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.
@@ -22,9 +22,9 @@ Blender as a software might seem confusing. If you feel like you need some helpi
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.
@@ -53,38 +53,37 @@ 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.
## Blender's Plugin Ecosystem
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.
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.
You can find more information about this at https://docs.blender.org/manual/en/latest/advanced/scripting/index.html
[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!
## Blender OpenData
You might not have known this, but you have seen this. You see those BMW tests or the classroom tests everyone does for their GPU benchmarking videos? Well that's from Blender OpenData, their benchmarking platform
- Website: https://opendata.blender.org/
You might not have known this, but you have seen this. You see those BMW tests or the classroom tests everyone does for their GPU benchmarking videos? Well that's from [Blender OpenData](https://opendata.blender.org/), their benchmarking platform
Good luck on your blender journey....and delete the default cube
## Resources
- 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 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)
src/content/spotlights/what-is-react.md
+22 -22
View File
@@ -126,8 +126,8 @@ The Typescript compiler has native support for JSX, which provides a better way
### 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?
@@ -143,12 +143,12 @@ It will automatically create a new folder called my-app and will process a few t
`npx create-react-app my-app --template typescript`
For more customization options, visit - https://create-react-app.dev/.
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 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.
@@ -186,11 +186,11 @@ class Parent extends React.Component {
From the examples above, you may have guessed it, but the data flow is unidirectional. You can only pass props data from the parent to child, not the other way around. Props of a component are read-only and should not be changed. React has a strict rule — "All React components must act like pure functions with respect to their props."
React also offers a special Context API that allows you to pass data through the component tree without having to pass props down manually at every level.
For more information about this context API, refer - https://reactjs.org/docs/context.html
This is a nice guide on this context API - https://tania.dev/react-context-api-hooks/
For more information about this context API [check out the docs](https://reactjs.org/docs/context.html)
[This is a nice guide on this context API](https://tania.dev/react-context-api-hooks/)
React has a special prop called children, for JSX elements that contain both an opening and a closing tag. This prop is used to pass the content between those tags.
For more on children, refer - https://reactjs.org/docs/jsx-in-depth.html#children-in-jsx
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:
@@ -283,7 +283,7 @@ class MyComponent extends React.Component {
}
```
Learn more about lifecycle methods - https://reactjs.org/docs/react-component.html#the-component-lifecycle
[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:
@@ -306,8 +306,8 @@ function MyComponent() {
As you can see above, this new hook is not an exact migration — there are some changes. Firstly, there are no individual sections that separate componentDidMount and componentDidUpdate (unless you make them). Next, you see that there is a callback function to the callback function inside the hook. The function returned by the main callback function contains the logic for componentWillUnmount.
Learn more about the useEffect hook - https://reactjs.org/docs/hooks-reference.html#useeffect
Learn more about how classes convert to hooks - https://reactjs.org/docs/hooks-faq.html#from-classes-to-hooks
[Learn more about the useEffect hook](https://reactjs.org/docs/hooks-reference.html#useeffect)
[Learn more about how classes convert to hooks](https://reactjs.org/docs/hooks-faq.html#from-classes-to-hooks)
## Styling in React
@@ -372,7 +372,7 @@ const MyComponent = () => (
```
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/.
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:
@@ -395,21 +395,21 @@ const MyComponent = () => (
```
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/
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/)
- [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/)
- [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.