
Web Developer👩🏻💻 | Technical Writer | JavaScript | React | Figma | Content Writer @softaims_ | DMs open
Remote
Joined July 2021
- Tweets9.7K
- Following428
- Followers13.9K
- Likes35.5K
Pinned Tweet
The Box Model in CSS 🎨
✧ In HTML, all elements are considered as a box. A box comprises padding, border, and margin in addition to its actual content.
A thread 👇🏻
AI SEO tip:
Put a clear 2–3 sentence answer right under each heading. Then expand below it.
That short, self-contained chunk is exactly what ChatGPT and AI Overviews lift into their answers.
This is so clean @alicalimli_dev👏
Those little notebook files on the left >>>
Okayy deployed it today, come try it free! 🔥
I built this primarily for my bullet journaling, but can be used to write anything.
It's completely local, whatever you write stays with you.
Live site: alicalimli.com/shiruya
Ishrat retweeted
Okayy deployed it today, come try it free! 🔥
I built this primarily for my bullet journaling, but can be used to write anything.
It's completely local, whatever you write stays with you.
Live site: alicalimli.com/shiruya
This book will change how you think about work forever.
"It Doesn't Have to be Crazy at Work" by Jason Fried.
What it's actually about:
→ Why your "always-on" culture is killing productivity
→ How to build a calm company in a chaotic world
→ The real cost of constant interruptions and meetings
→ Why 40 hours of focused work beats 80 hours of chaos
Key insights:
- Long hours don't equal hard work
- Instant communication makes you LESS effective
- Most "urgent" work isn't actually urgent
- Protecting your team's attention is your job as a leader
This book basically tells the story of how Basecamp built a $100M company:
1/ 6-hour workdays in summer
2/ No chat during focus time
3/ Meetings are the last resort
4/ Calm is a competitive advantage
5/ and more
Jason shows you it's possible to succeed without losing your mind.
The ultimate guide to run a company.
Pretty refreshing.
Ishrat retweeted
The this keyword is one of those JavaScript concepts that looks simple but often causes confusion.
At its core, this refers to the context in which a function is called.
The important part is:
this is determined by how a function is called, not where it is defined.
Here are the common cases:
1. Inside an object method
const user = {
name: "Ishrat",
greet() {
console.log(this.name);
}
};
user.greet(); // Ishrat
Here, this refers to the user object.
2. Inside a regular function
In non-strict mode, this can refer to the global object.
In strict mode:
"use strict";
function greet() {
console.log(this);
}
greet(); // undefined
3. Inside an event handler
button.addEventListener("click", function () {
console.log(this);
});
Here, this refers to the element that triggered the event.
4. Arrow functions are different
Arrow functions don't have their own this.
They inherit this from their surrounding scope.
const user = {
name: "Ishrat",
greet: () => {
console.log(this.name);
}
};
user.greet(); // undefined
This is one reason you should be careful when using arrow functions as object methods.
The key takeaway
Don't memorize "this always means the current object."
Instead, ask:
"How was this function called?"
That usually tells you what this refers to.
Understanding this makes objects, event handlers, classes, callbacks, and frameworks like React much easier to reason about.
The this keyword is one of those JavaScript concepts that looks simple but often causes confusion.
At its core, this refers to the context in which a function is called.
The important part is:
this is determined by how a function is called, not where it is defined.
Here are the common cases:
1. Inside an object method
const user = {
name: "Ishrat",
greet() {
console.log(this.name);
}
};
user.greet(); // Ishrat
Here, this refers to the user object.
2. Inside a regular function
In non-strict mode, this can refer to the global object.
In strict mode:
"use strict";
function greet() {
console.log(this);
}
greet(); // undefined
3. Inside an event handler
button.addEventListener("click", function () {
console.log(this);
});
Here, this refers to the element that triggered the event.
4. Arrow functions are different
Arrow functions don't have their own this.
They inherit this from their surrounding scope.
const user = {
name: "Ishrat",
greet: () => {
console.log(this.name);
}
};
user.greet(); // undefined
This is one reason you should be careful when using arrow functions as object methods.
The key takeaway
Don't memorize "this always means the current object."
Instead, ask:
"How was this function called?"
That usually tells you what this refers to.
Understanding this makes objects, event handlers, classes, callbacks, and frameworks like React much easier to reason about.
Found this SEO tip on Reddit:
"Rule of thumb: 1 internal link per 50 words. 1 external link per 150 words."
What do you think?
Is this actually a useful rule of thumb or just another SEO myth?
JavaScript DOM APIs let you control HTML with JavaScript.
You can:
→ Find elements
→ Change content
→ Change attributes
→ Modify styles
→ Create elements
→ Remove elements
→ Handle events
Here are the DOM APIs every JavaScript developer should know 🧵
One important thing to remember:
DOM is not JavaScript.
JavaScript is the language.
The DOM is a Web API provided by the browser.
JavaScript uses DOM APIs to interact with web pages.
Learn these APIs well and manipulating the browser becomes much easier.
Want to see these DOM APIs working together?
I built a small Todo app using vanilla JavaScript.
You can add tasks, mark them complete, and delete them while seeing the DOM change in real time.
Try it → 🔗 codepen.io/editor/ishratumar…










