Akram Narejo Profile picture
Aug 5, 2021 β€’ 12 tweets β€’ 5 min read β€’ Read on X
How to write ✍️ your notes πŸ—’, blog r even your github repositories with the markdown markup lang.
Let’s learn d following:
β€’ headings
β€’ text styling
β€’ links
β€’ syntax
β€’ paragraphs
β€’ lists
β€’ tables
Follow d thread 🧡 2 read them πŸ‘‡
#DEVCommunity #100DaysOfCode #markdown
1️⃣ Headings
For headings just insert the # before heading. And the numbers of # defines the heading number. Image
2️⃣ Text styling
To make bold use **text**
To make italic use * text * or _text_
For both use **_text_** Image
3️⃣ Links
β€’ Links are created with large brackets[] & small ()
[link name](href)
β€’ for images use ! Before large brackets
![dog](link)
β€’ also can show the reference by giving a more large brackets
![dog][dog-ref](link)
[dog]: link Image
4️⃣ Syntax
Also can write 1 line code or a block of code πŸ‘¨β€πŸ’»
β€’ wrap the code with back ticks ` return β€œhello”`
β€’ Or wrap with 3 ``` to write block.
β€’ With opening 3 back ticks mention the language & code will have that style.
like
```javascript

``` Image
5️⃣ Paragraphs
Write paragraphs consecutively and if you leave line in between then new paragraph will start.
β€’ for new line put the 3 spaces after the line.
6️⃣ Lists
Lists are unordered and ordered and they can be nested together.
β€’ for Unordered just put the * and space before.
β€’ for ordered put the 1. and space before. Image
7️⃣ Blockquotes >
For blockquotes just put the > greater than sign before text. You can also add for the blank lines to extend the quote. Image
8️⃣ Tables
Tables are also easy to write just follow the pattern.
| column name | column name |
| β€”β€”β€”β€”β€”β€”- | β€”β€”β€”β€”β€”β€”β€” |
| text | text |
To align the data in table just put the colon : to the dashes -
β€’ left :β€”β€”β€”β€”β€”β€”-
β€’ center :β€”β€”β€”β€”-:
β€’ right β€”β€”β€”β€”β€”-:
9️⃣ Tasks
for tasks use the following pattern
-[x] task1
-[ ] task2
β€’ x means task is done βœ…
β€’ blank means remaining task. Image
for practice use the online editors like
stackedit.io
dillinger.io
or you can download Typora typora.io for your desktop.

β€’ β€’ β€’

Missing some Tweet in this thread? You can try to force a refresh
γ€€

Keep Current with Akram Narejo

Akram Narejo Profile picture

Stay in touch and get notified when new unrolls are available from this author!

Read all threads

This Thread may be Removed Anytime!

PDF

Twitter may remove this content at anytime! Save it as PDF for later use!

Try unrolling a thread yourself!

how to unroll video
  1. Follow @ThreadReaderApp to mention us!

  2. From a Twitter thread mention us with a keyword "unroll"
@threadreaderapp unroll

Practice here first or read more on our help page!

More from @akramnarejo

Oct 26, 2021
πŸ’‘πŸ§΅ Props drilling❓
In react when you have a tree of a components and want to pass the data to the last component, you have to pass props through every component in tree and re-render all components on change. this is problem called as props drilling.

#reactjs #100DaysOfCode
this problem is like having a box within a box within a box. when you want to change things in the inner most box you have to open all the outer boxes to reach there every time. that's the case of props drilling, that you have to pass the props and re-render components.
To avoid this problem there's a solution. πŸ₯
Define the data globaly and then access it within the components you want and re-render the only components consuming data.
how to do that?
1. createContext
2. Provide context
3. Consume context
Read 7 tweets
Oct 3, 2021
2/100 days of learning React.
export default vs named components in react.
In react view is built with components. components are exported before importing them.
Two way we export them either as default or named.
know more πŸ‘‡πŸ§΅

#reactjs #javascript #100DaysOfCode
1. default
default is used when we export single component and considered default and while importing its name doesn't matter.

Compo = () => { return <p>hello, world</p> }
export default Compo

Import with other name won't mind.
import X from './Compo'
2. Named
we export named when we hav multiple.
& they require d same name while importing within {}.

export Comp1 = () => { return <p>Hello</p> }
export Comp2 = () => { return <p>World</p> }

Importing...
import {Comp1,Comp2} from './Compo'

while rendering wrap them with div.
Read 4 tweets
Jul 29, 2021
Explaining Loop πŸ”
1.
Loop is the fundamental building block of programming, used to repeat or iterate the fixed number of steps.
Loop saves the time and labour.

Thread 🧡

#100DaysOfCode #DEVCommunity #javascript #programming #loop
2. Real time example
Suppose you are donating $100 to each one of the 50 homeless.
For that you will keep count of people who are you done with.
So, 3 things we r doing:
β€’ setting condition to 50
β€’ counting ( increment )
β€’ donating
3.
There are many ways out there to implement loop in programming:
β€’ foor loop
β€’ while loop
β€’ forEach
β€’ do while
and many, you can also develop your own.
Read 8 tweets

Did Thread Reader help you today?

Support us! We are indie developers!


This site is made by just two indie developers on a laptop doing marketing, support and development! Read more about the story.

Become a Premium Member ($3/month or $30/year) and get exclusive features!

Become Premium

Don't want to be a Premium member but still want to support us?

Make a small donation by buying us coffee ($5) or help with server cost ($10)

Donate via Paypal

Or Donate anonymously using crypto!

Ethereum

0xfe58350B80634f60Fa6Dc149a72b4DFbc17D341E copy

Bitcoin

3ATGMxNzCUFzxpMCHL5sWSt4DVtS8UqXpi copy

Thank you for your support!

Follow Us!

:(