Saturday, 16 May 2020

Nest Js Serve Static File , Image and Download Pdf File



import { ControllerGetPostResParamReqHeader } from '@nestjs/common';
import { fsRoot } from './server-config';
import { createReadStream } from 'fs';
import { join } from 'path';
import url = require('url');

@Controller()
export class AppController {

    @Get('/upload/:fileId')
    async serveAvatar(@Param('fileId'fileId, @Res() res): Promise<any> {
        return res.sendFile(fileId, { root: 'upload' });
    }

// serve all nested folder
// @Get('/upload/*')
     // async serveAvatar(@Req() req, @Res() res): Promise<any> {
// const urlObject = url.parse(req.urltrue);
     //    const filePath = decodeURI(urlObject.path).replace('/api/upload/''');
     //    return res.sendFile(filePath , { root: 'upload' });
     // }


    @Get('/test')
    //@Header('Content-Type', 'application/pdf')
    getTest(@Res() response) {
        const url = join(fsRoot(), '/upload/test.pdf');
        const data = createReadStream(url);
        response.setHeader('Content-Type''application/pdf');
        response.setHeader('Content-Disposition''attachment; filename=another.pdf');
        data.pipe(response);
    }
}

// Create upload folder on your project root dir
// If you set app.setGlobalPrefix("api");
// image is serve on http://localhost:3000/api/upload/a.png
// pdf file is serve on http://localhost:3000/api/upload/test.pdf

// **************** server-config.ts Code ****************************

import path = require('path');

export const fsRoot = () => {
     return path.resolve(__dirname'../');
};


Thursday, 14 May 2020

React Js and Backbone Js Compare , Read React Internal Code


React Js Link



Backbone Js Link




React Js 
  
  Line Code  :  3318
  Empty catch Block : 2 ( catch (e) {} )
Todo: 12
 setTimeout  use in  8 to 10 Place

I found This Four eslint-disable

/* eslint-disable no-unused-vars */
// eslint-disable-line no-new-wrappers
// eslint-disable-next-line react-internal/no-production-logging
/* eslint-disable no-var */


Despite all these additions, React 16 is actually smaller compared to 15.6.1!

  • react is 5.3 kb (2.2 kb gzipped), down from 20.7 kb (6.9 kb gzipped).
  • react-dom is 103.7 kb (32.6 kb gzipped), down from 141 kb (42.9 kb gzipped).
  • react + react-dom is 109 kb (34.8 kb gzipped), down from 161.7 kb (49.8 kb gzipped).



Backbone Js 

 Backbone.js    Size  7.9kb, Packed and gzipped
 
6.78kb, Minified and Gzipped

   Underscore provides over 100 functions that support both your favorite workaday functional       helpers: mapfilterinvoke — as well as more specialized goodies: function binding, javascript templating,   creating quick indexes, deep equality testing, and so on.

jquery-3.5.1.min.js    Size  31.4 kb 

Backbone + Underscore + jquery-3.5.1 = 46.08  kb



React is Only a view layer . React Provide View Related Function 
React not include Router,Model and Collection or Function like Underscore or Jquery. 

in Any Application You Need a Router , jquery Like Plugin Pattern , Underscore 
like functional programming .

Backbone Provide You a View , Model , Collection and Router 

You Can add a Epoxy.js : Data Binding for Backbone 2k-gzip size
  • Computed Model & View Attributes
  • Declarative View Bindings
  • Automated Dependency Mapping
  • Automatic View Updates

Read This ( i think this website name should be youneedjquery )
99% case jquery code is small, readable and support a chaining and advance extra
feature and error handling in case of  Element is empty , null or undefined .
http://youmightnotneedjquery.com/

all new javascript framework or lib is like a virus in the programming community, is that not only is it completely brain death , but the people who use it go on to infect other people who can't think for themselves.






Friday, 21 February 2020

Check Object Equal in JavaScript . How Object reference work in JavaScript

  1. let banana = {};
    • Declare a banana variable.
    • Create a new object value {}.
    • Point banana variable’s wire to it.
  2. let cherry = banana;
    • Declare a cherry variable.
    • Point cherry’s wire to where banana is pointing.
  3. let chocolate = cherry;
    • Then, we declare a chocolate variable.
    • Point chocolate’s wire to where cherry is pointing.
  4. cherry = {};
    • Create a new object value {}.
    • Point cherry’s wire to it.
Now let’s check your answers:
  1. Object.is(banana, cherry) is false because banana and cherry point at different values.
  2. Object.is(cherry, chocolate) is false because cherry and chocolate point at different values.
  3. Object.is(chocolate, banana) is true because chocolate and banana point at the same value.

Thursday, 13 February 2020

How to Read,Reading Style Development , Reading Skill. Deep knowledge in Reading Style

  1. BEFORE you start reading ask yourself questions like:
  2. –   before you start reading, consider elements like the title, a sub-title or any picture/s to have a clear idea of what you are going to read
  3. –   do you find the topic interesting? Have you ever read anything about this topic, maybe in Gujarati,Hindi,Marathi ? did you like it?
  4. –    what type of text is it? Is it a formal or informal piece of writing? What do you think the style will be?
  5. –    what kind of vocabulary do you expect to find? Are you familiar with it or not?
  6. These questions (and their answers) will help you focus on what you are reading, for example a story or an article.
  7. Much, much more important, WHILE you are reading be sure to
  8. Read for the topic, or the story
  9. Think when author write this book ( Year )
  10. Think author age when he or she write a book
  11. Think Book Content Country 
  12. Think author country
  13. Keep your mind on the topic and try to identify the main ideas presented in the text
  14. Think this Year Country Economic situation
  15. Check  book time frame any war time,pandemic time  ?
  16. Read Extra Blog any Website
  17. Find best person on this sub topic of book area (sector)
  18. Find this best person Blog,Facebook,Twitter,Instagram ,website ,you-tube, book and audio podcast 
  19. Follow this best person on all all platform
  20. –    make a pause when you get to the end of a chapter, and see if you can retell the main events of the story: could you give a short summary of what has happened?
  21. –    look up in the dictionary, after you have finished reading a chapter, only the unknown words that you feel are really necessary to understand a key point in the story. 
  22. –   start making predictions about how the story will develop. What do you expect will happen next ? This will help you keep your attention on the story and not on single unknown words
  23. --   When you have finished, reconsider the steps you have followed while reading. Which reading strategy has proved successful, which hasn’t ?
  24. - What is Knowledge  ?
  25. - What is a Pramana  (Pratyaksh PramanaAnuman Pramana,Upamana Pramana etc...)  ?
  26.  what is inference ?
  27. - Author mindset  Philosophy (स्वतंत्रतावाद, वैदिकवाद , Capitalism etc...)
  28. what is Author inference (inference -a conclusion reached on the basis of evidence and reasoning)  (TRIVIAL REASON FALLACY, IRRELEVANT CONCLUSION FALLACY,WRONG ASSERTION FALLACY,CONTRADICTORY FALLACY , HETVABHASA) 
  29. what is your inference  (Read Book -  Dignāga was an Indian Buddhist scholar - Book  The theory of inference )
  30. what is best philosopher inference about this topic
  31. identify book text type (like realistic,fiction,motivation, etc)  find a advantage and disadvantage of this category
  32. find  disadvantage of Author inference
  33. find  advantage of Author inference
  34.  identify book different character mindset and Philosophy
  35.  after identify book different character mindset and Philosophy read this two Philosophy criticism
  36. find best criticism philosopher on this topic and read best book on this topic 
  37. apply all above topic on all book and add 
  38. find book subtopic  and search on this subtopic movies 
  39. watch you-tube documentary on all subtopics.
  40. if you think any animation video, 3d model or gif animated image is more help full in this topic then search in  google and bing or youtube for animation videos ,image or model.
  41. create a mind map for your reading area . (use https://www.edrawsoft.com/ or xmind software) 
  42.  use online https://www.mindmeister.com/    mind map software . share your mind map on your blog or social network . collect comment and discuss on all topic with dialectical method   (   Dialectic or dialectics, also known as the dialectical method, is at base a discourse between two or more people holding different points of view about a subject but wishing to establish the truth through reasoned arguments.  ).
  43. search existing mind map on internet  and think how different people categorizes a different topic.
  44.   check all book and person statement as per (https://thebestschools.org/magazine/15-logical-fallacies-know/)  and  (https://blog.hubspot.com/marketing/common-logical-fallacies
  45. http://www.itsnotyouitsyourdata.com/the-early-years/top-10-hints-for-understanding-your-ontology-epistemology-and-methodology/
  46.  If you found any branch like epistemology . ontology or any think like this search a PhD course in world best collage and field area and country's best education collage website and read study materials and open library  
  47. https://www.academia.edu/         Read a Research paper on your topic  
  48. https://answerthepublic.com/      Search All this Questions on your Topic
 





i continually think and adding topic  in this blog so please check this blog every 3-4 month.

Please comment your view on this blog .or suggest any new topic .



Friday, 29 November 2019

Questions to ask when planning UI Module or components

components

  • How many UI states does this component have?
  • Can I easily can I validate the current UI state?
  • How ergonomic are my styles? (i.e. how quickly can someone else read them)
  • Am I creating sensible UI abstractions? Or am I drawing boxes around the visual design?
  • Am I separating layout form visual design where possible?
  • Am I separating application logic from UI components?
  • Am I communicating my intentions to other developers and giving semantic meaning to components.
  • Event In Bind in A component it self on parent component
  • Component have mechanism for inter-component communication
  • total events in a component 
  • total option in a component
  • default value of component 
  • component option is extendable 
  • load its dependency  js and css files .
A container component:
      contains no presentation or layout styles
      should not render mark-up (except children)
      can wrap layout and presentation components may fetch data,        setup events, refs etc...
      

 Characteristics of Components

  • Reusability − Components are usually designed to be reused in different situations in different applications. However, some components may be designed for a specific task.
  • Replaceable − Components may be freely substituted with other similar components.
  • Not context specific − Components are designed to operate in different environments and contexts.
  • Extensible − A component can be extended from existing components to provide new behavior.
  • Encapsulated − A A component depicts the interfaces, which allow the caller to use its functionality, and do not expose details of the internal processes or any internal variables or state.
  • Independent − Components are designed to have minimal dependencies on other components.

Make your components implement one task, be isolated, self-contained and encapsulated. This will make your components orthogonal, and any change you make is going to be isolated and focused on just one component. That’s the recipe for predictable and easy to develop systems.

 Study in detail the domain problem that your application solves, ask the client for a list of potential features. If you think that a certain place is going to change, then apply the orthogonal principle.


A key principle of a good design is the isolation of the logic that most likely will change: making it orthogonal. This makes your whole system flexible and adaptable to change or new features requirements.


If the orthogonal principle is overlooked, you risk creating components that are tightly coupled and dependent. A slight change in one place might unexpectedly echo in another place, increasing the cost of change, maintenance and creating new features.


Are your UI components accessible?

Summary (tl;dr)

When auditing your page's UI components for accessibility, ask yourself:
  • Can you use your UI component with the keyboard only? Does it manage to focus and avoid focus traps? Can it respond to the appropriate keyboard events?
  • Can you use your UI component with a screen reader? Have you provided text alternatives for any information which is presented visually? Have you added semantic information using ARIA?
  • Can your UI component work without sound? Turn off your speakers and go through your use cases.
  • Can it work without color? Ensure your UI component can be used by someone who cannot see colors. A helpful tool for simulating color blindness is a Chrome extension called SEE, (try all four forms of color blindness simulation available). You may also be interested in the Daltonize extension which is similarly useful.
  • Can your UI component work with high-contrast mode enabled? All modern operating systems support a high contrast mode. High Contrast is a Chrome extension available that can help here.

Think All Above Topic When You Create New Component in any language or framework or library 

Tuesday, 26 November 2019

Angular Template Syntax and NgClass & NgStyle Directives

<!-- Native Class and Style Attributes -->
<input class="is-danger my-button" style="border: none; color: blue">
<!-- Angular class and style Bindings -->
<input [class.is-danger]="booleanProp" [style.border]="borderProp">
<!-- ngClass -->
<input [ngClass]="{'is-danger': booleanProp, 'myButton': true}">
<input [ngClass]="isDangerButton">
<!-- ngStyle -->
<input [ngStyle]="{'border': borderProp, 'color': colorProp}">
<input [ngStyle]="hasColorBorder">
<!--
booleanProp, borderProp, etc...
would be properties from our
Typescript class
-->

NgClass



NgClass can receive input via inline declarations, or a property/method from our TypeScript class. This can make the syntax feel more convoluted than it really is. Ultimately, NgClass can take the following as input:
  • A space-delimited String [ngClass]="is-info is-item has-border"
  • An Array of Strings [ngClass]="['is-info', 'is-item', 'has-border'"]
  • An Object [ngClass]="{'is-info': true, 'is-item': true}
All of the above examples are inline and could be replaced with a Typescript property/method as long as the expression returns valid input:
export class MyComponentClass {
myStringProperty = "is-info is-item has-border";
myArrayProperty = ['is-info', 'is-item', 'has-border'];
myObjectProperty = {'is-info': true, 'is-item': true};
}
  • [ngClass]="myStringProperty"
  • [ngClass]="myArrayProperty"
  • [ngClass]="myObjectProperty"


Key Points

  • We can pass a Typescript property/method or write an expression inline to our NgClass Directive
  • NgClass can take a String, Array of Strings, or Object Expression as input.
  • Under the hood, NgClass is adding/removing classes via Renderer2 addClass() and removeClass()
  • NgClass appends, it does not overwrite.



NgStyle

NgClass and NgStyle share a significant amount of functionality and behavior. The key difference is:
  • NgStyle takes a key-value pair object as input.
  • NgStyle applies styles and not classes.
  • NgStyle will overwrite styles defined by the native style attribute.

Syntax

NgStyle takes a key-value pair object, where the key is a CSS style. An optional suffix can be added to the key, making keys such as this viable:
[ngStyle]="{font-size.px: 16}" Instead of [ngStyle]="{font-size: 16px}"
Similar to NgClass, NgStyle can be passed input inline or use a Typescript property/method[ngStyle]="myObjectExpressionProperty"

Key Takeaways

  • NgStyle can accept a key-value pair as input, where the key is a valid CSS Style
  • NgStyle can be passed input via inline or a Typescript property or method
  • NgStyle under the hood utilizes Angular’s Renderer2 to invoke setStyle() and removeStyle()
  • NgStyle will overwrite existing styles on the element.

Friday, 20 September 2019

new Html A Tag Types Link rel Types For SEO

rel="sponsored": Use the sponsored attribute to identify links on your site that were created as part of advertisements, sponsorships or other compensation agreements.

rel="ugc": UGC stands for User Generated Content, and the ugc attribute value is recommended for links within user generated content, such as comments and forum posts.

rel="nofollow": Use this attribute for cases where you want to link to a page but don’t want to imply any type of endorsement, including passing along ranking credit to another page.