aliyev.dev
17 subscribers
53 photos
2 videos
1 file
41 links
JavaScript Tips and Tricks

Follow us:
YouTube: youtube.com/@developer_nijat
TikTok: tiktok.com/@developer.nijat
Facebook: fb.com/groups/1298499510834490
Website: aliyev.dev
Download Telegram
Don't use moment in JavaScript anymore! It's no longer actively maintained. It's considered a legacy library.

Recommended:

date-fns or dayjs

- Simplicity
- Strong support
- Smaller bundle size
- Better performance
- Actively maintained

If the complexity of your date-related operations requires
using an external date library.
📁 JavaScript Tip: Use 'destructuring' to extract values from arrays and objects with ease. It's a concise way to access specific elements, making your code cleaner.

Example:


// Destructuring an array
const numbers = [1, 2, 3];
const [first, second, third] = numbers;

// Destructuring an object
const person = { name: 'Alice', age: 30 };
const { name, age } = person;
#JavaScript #Destructuring #CodingTips
JavaScript Tip: Take advantage of 'modules' to organize and encapsulate your code. ES6 introduced native support for modules, allowing you to split your code into separate files for better maintainability. Example:

// Exporting a function from a module
// math.js
export function add(a, b) {
return a + b;
}

// Importing and using the function in another file
// app.js
import { add } from './math';
console.log(add(5, 3)); // 8


#JavaScript #Modules #CodingTips
🧩 JavaScript Tip: Embrace 'template literals' for more readable and dynamic strings. Template literals allow you to embed expressions and variables directly into strings.

Example:

const name = 'Alice';
const age = 30;
const message = `Hello, my name is ${name} and I am ${age} years old.`;
console.log(message);
#JavaScript #TemplateLiterals #CodingTips
8 React blogs you can’t miss if you want to become a talented Frontend Developer:

1. dev - https://dev.to/
2. overreacted - https://overreacted.io/
3. tylermcginnis - https://ui.dev/blog
4. reacttraining - https://lnkd.in/erD97FJw
5. freecodecamp - https://lnkd.in/eAhP7iAf
6. robinwieruch - https://lnkd.in/eRCsdQBs
7. daveceddia - https://lnkd.in/ewF4WvW2
8. react.js - https://react.dev/blog
🕒 JavaScript Tip: Simplify date and time manipulation with the 'Date' object. It provides a wide range of methods for working with dates and times.

Example:

const currentDate = new Date();
const year = currentDate.getFullYear();
const month = currentDate.getMonth();
const day = currentDate.getDate();
console.log(`Today is ${year}-${month + 1}-${day}`);

#JavaScript #DateObject #CodingTips
📋 JavaScript Tip: Take advantage of 'Object.keys()' to iterate through an object's properties. It returns an array of an object's keys, making it easy to work with object properties.

Example:

const person = {
name: 'Alice',
age: 30,
city: 'New York'
};

const keys = Object.keys(person);
console.log(keys); // ['name', 'age', 'city']
#JavaScript #ObjectKeys #CodingTips
There are several caching libraries available for Node.js that can help improve the performance of your applications. Some popular ones include:

1. node-cache: A simple in-memory caching library that allows you to store key-value pairs.

2. redis: Redis is a fast, open-source, in-memory key-value data store that can be used as a caching layer for Node.js applications. You can use libraries like "ioredis" or "node-redis" to interact with Redis.

3. memcached: Memcached is a high-performance, distributed memory object caching system. There are Node.js libraries like "memjs" and "node-memcached" that allow you to work with Memcached.

4. node-cache-manager: A flexible caching library that supports multiple storage backends, including memory, Redis, Memcached, and more.

5. cacheman: A high-performance caching library with support for multiple storage engines, including in-memory and Redis.

6. lru-cache: A simple, efficient Least Recently Used (LRU) cache for Node.js.

7. apicache: A middleware for Express.js that provides response caching for API routes.

The choice of a caching library depends on your specific use case and requirements, such as the size of the data you need to cache, the storage backend you prefer, and the level of customization you need.
Writing clean and maintainable code in React.js involves adhering to best practices and following established conventions. Here are some tips for writing clean code and following best practices in React.js:

1. Follow the Component-Based Architecture:
- Divide your application into reusable components, each responsible for a specific piece of functionality.
- Keep your components small and focused on a single task. This makes them easier to understand and maintain.

2. Component Naming:
- Use meaningful and descriptive names for your components. Use PascalCase for component names (e.g., App, Header, ProductList).

3. Props and State:
- Clearly define and document the props that your components expect.
- Avoid mutating state directly; use the setState function or hooks (e.g., useState, useReducer) to update state.

4. Destructuring:
- Use object destructuring to extract props and state variables. This makes your code more concise and readable.

5. Functional Components:
- Use functional components with hooks whenever possible. They are easier to understand and test.

6. Component Organization:
- Group related components into folders or directories for better project structure.
- Maintain a consistent folder structure (e.g., separate folders for components, containers, styles, and tests).

7. Consistent Formatting:
- Follow a consistent coding style and formatting guide. Tools like Prettier can help automate code formatting.

8. Commenting:
- Add comments to explain complex logic or non-obvious code. Make your code self-documenting whenever possible.

9. Avoid Unnecessary Re-renders:
- Use React.memo or PureComponent to prevent unnecessary re-renders when props or state haven't changed.

10. Use PropTypes or TypeScript:
- Use PropTypes to specify the types of props your components expect. If possible, consider using TypeScript for type checking.

11. Avoid Direct DOM Manipulation:
- React handles DOM manipulation for you. Avoid direct DOM manipulation using vanilla JavaScript.

12. Avoid Uncontrolled Components:
- In forms, prefer controlled components with value and onChange handlers over uncontrolled components.

13. State Management:
- For complex state management, consider using a state management library like Redux or React Context API.

14. Error Handling:
- Implement error boundaries to gracefully handle errors in your components.

15. Testing:
- Write unit tests for your components using testing libraries like Jest and React Testing Library.

16. Performance Optimization:
- Optimize your application's performance by using tools like React DevTools and following performance best practices.

17. Accessibility:
- Ensure your components are accessible by using semantic HTML, ARIA roles, and testing with accessibility tools.

18. Code Reviews:
- Conduct code reviews to get feedback from peers and improve code quality.

19. Linting and Static Analysis:
- Use linters (e.g., ESLint) and static code analysis tools to catch common coding mistakes and enforce coding standards.

20. Keep Learning:
- Stay up to date with React updates and best practices by following the official documentation and community resources.

By following these best practices and guidelines, you can write clean, maintainable, and scalable React.js code, which will benefit both you and your team in the long run.
JavaScript ilə kartların tipini müəyyən etmək Method 2

function getCardType(cardNumber) {
// Define regular expressions for various card types
var cardPatterns = {
visa: /^4[0-9]{12}(?:[0-9]{3})?$/,
mastercard: /^5[1-5][0-9]{14}$/,
amex: /^3[47][0-9]{13}$/,
discover: /^6(?:011|5[0-9]{2})[0-9]{12}$/,
dinersclub: /^3(?:0[0-5]|[68][0-9])[0-9]{11}$/,
jcb: /^(?:2131|1800|35\d{3})\d{11}$/
};

for (var card in cardPatterns) {
if (cardPatterns[card].test(cardNumber)) {
return card;
}
}

return "Unknown";
}

// Example usage
var cardNumber = "4111111111111111"; // Replace with the actual card number
var cardType = getCardType(cardNumber);
console.log("Card Type: " + cardType);
Channel name was changed to «Aliyev's DevTales»
🔄 JavaScript Tip: Embrace the power of 'Array.from()' to convert array-like objects or iterable into an array. It's a handy utility method for working with various data structures. Example:

// Convert string to array
const string = 'hello';
const charArray = Array.from(string);

// Convert NodeList to array (e.g., from querySelectorAll)
const elements = document.querySelectorAll('.myClass');
const elementArray = Array.from(elements);
#JavaScript #ArrayFrom #CodingTips
JavaScript tip: Map arrays with more shorthand way
📌 Consider using the useReducer hook instead of having more than 5 useState calls to manage complex state logic in a more organized manner.

In the refactored version, useReducer consolidates state management, making the component code cleaner and more maintainable. Actions are dispatched with specific types, and the reducer handles state updates accordingly.

#javascript #ReactJS #React #reacthooks #useReducer #refactoring #cleancode #statemanagement #developernijat #aliyevsdevtales
1