| title | date |
|---|---|
Articles - 2020/11 |
2020-11-01 22:44:15 UTC |
<div>
Hi, my name is Maria.
<script>
alert(JSON.stringify(localstorage));
</script>
</div>This code would just alert the local storage content, but could as well send it to the attacker.
This HTML and its embedded script are on Maria’s profile in Mr. Smith’s browser.
And so can access Mr. Smith’s data in Mr. Smith’s local storage.
- Primitive values and references
- Size is known at compile time
- Allocates a fixed amount of memory
- Objects and functions
- Size is known at run time
- No limit per object
Objects inherit properties from objects — what could be simpler?
The Next.js React application framework provides developers with the SWR hook. The following code provides an example of usage:
// Custom React hook using the useSWR hook to fetch remote data about a user
function useUser (id) {
const { data, error } = useSWR(`/api/user/${id}`, fetcher)
return {
user: data,
isLoading: !error && !data,
isError: error
}
}
// page component
function Page() {
return <div>
<Navbar />
<Content />
</div>
}
// child components
function Navbar () {
return <div>
...
<Avatar />
</div>
}
function Content () {
const { user, isLoading } = useUser()
if (isLoading) return <Spinner />
return <h1>Welcome back, {user.name}</h1>
}
function Avatar () {
const { user, isLoading } = useUser()
if (isLoading) return <Spinner />
return <img src={user.avatar} alt={user.name} />
}IE, safari doesn't support it.
^[a-zA-Z[:punct:]]{8}$.container {
display: grid;
grid-template-columns: repeat(4, 1fr);
grid-template-rows: masonry;
}@supports (grid-template-rows: masonry) {
/* masonry code here */
}And here's some evidence to support these calculations:
- 96px
- 101.6q
- 25.4mm
- 2.54cm
- 1in
Keep in mind that while such measurements are possible, it's not recommended to use them (unless you're making a virtual ruler or something like that 😅)
To start we need to locate the top-level element of the component using the Chrome devtools elements panel. In this case, the element is the h1.
Once you have the element selected you can then move to the console panel in devtools and type $0.
$0 will be a reference to the most recently selected element in the element panel.
If you highlight another element you can still reference the last one by typing $1, this will work for the last 5 elements highlighted.
To see the Vue instance details you can type $0.__vue__.
You can also select the element using any of the DOM lookup methods such as querySelector or getElementById etc. In this case, we’ll use document.querySelector to see the Vue instance:
document.querySelector('[data-v-763db97b]').__vue__
Metaprogrammingis a programming technique in which computer programs have the ability to treat other programs as their data. This means that a program can be designed to read, generate, analyze, or transform other programs, and even modify itself while running.
Simply put, Metaprogramming involves writing code that can
- Generate code
- Manipulate language constructs at the run time. This phenomenon is known as
Reflective MetaprogrammingorReflection.
Reflection is a branch of Metaprogramming. Reflection has three sub-branches:
- Introspection: Code is able to inspect itself. It is used to discover very low-level information about the code. (Reflect API)
- Self-Modification: As the name suggests, code is able to modify itself.
- Intercession: Acting on behalf of somebody else. This can be achieved by wrapping, trapping, intercepting. (Proxy Object)
To summarize,
- Reflect and Proxy are great inclusions in JavaScript to help with Metaprogramming.
- Lots of complex situations can be handled with their help.
- Be aware of the downsides as well.
- ES6 Symbols also can be used with your existing classes and objects to change their behavior.
By default, when clicking the form’s Submit button, the browser performs a full-page POST request to the URL specified in the action attribute of the <form>. But having the form controlled by React, you can prevent browser’s default behavior by attaching an event handler to onSubmit event and calling event.preventDefault().
Also, inside the same onSubmit event handler you can access the form data from the corresponding state variable, and save it manually using your preferred way: by making an async fetch POST request.
We store the timer in an instance variable. We could also have stored the timer in the state but it would cause an extra render. We don’t want that.
Consider a scenario where you need to execute some side effects on a component, but not after the initial render.
useEffect(() => {
// do something
})which will execute on every render, won’t work (because the effect will be executed even after the initial render). So, once again, useRef to the rescue! We could do something like this,
const hasMounted= useRef(false)
useEffect(() => {
if (hasMounted.current) {
// do something
} else hasMounted.current = true
}fetch('/data.json')
.then(
// The promise is fulfilled with the response object.
function(response) {
// If the response was not successful,
// stop the chain by throwing an error.
if (!response.ok) {
throw new Error(
`${response.status} ${response.statusText}`
);
}
// Otherwise parse the response body as JSON.
// This returns a new Promise.
return response.json();
}
)
// Continue with the Promise returned by response.json().
.then(
function(data) {
// data is now a JavaScript object.
// Do something with it.
console.log('Success!', data);
}
)
// Handle all potential errors that happened above.
// Only pass an error handler, no success handler.
// This is equivalent to .catch(function(…) {…}).
.then(
null,
function(error) {
console.error('Error!', error);
// Report the error to a logging service,
// activate a fallback or send the request again.
}
);- Eloquent JavaScript — Marijn Haverbeke
- JavaScript Enlightenment — Cody Linley
- DOM Enlightenment — Cody Linley
- Learning JavaScript Design Patterns — Addy Osmani
- The Modern JavaScript Tutorial — JavaScript.info
- Human JavaScript — Henrik Joreteg
- The JavaScript Beginner’s Handbook — Flavio Copes
- JavaScript Notes for Professionals — GoalKicker.com
- You Don’t Know JavaScript — Kyle Simpson
Use the “hamburger method” Try beginning with a positive, constructive comment on something that works well in the design that is being critiqued. Next, get to the meat, which is, of course, the constructive criticism—what could be improved. Finally, end with another positive acknowledgement.
Many “old-school” faculty members dismiss this method as superficial candy-coating—known more colloquially as the “shit sandwich.” But candy-coating isn’t such a bad idea. It makes it possible for students to absorb negative feedback. As long as the hamburger’s “buns” are comprised of genuine, accurate observations, students benefit from receiving feedback that addresses both what is and isn’t working in their designs.
For a given element, you can only have one event handler per event type, but you can have multiple event listeners.
.child {
flex: 0 1 auto; /* Default flex value */
}.child {
flex-grow: 0;
flex-shrink: 1;
flex-basis: auto;
}/* This is just how I think about the rule above in my head */
.child {
flex: [flex-grow] [flex-shrink] [flex-basis];
}
/* or... */
.child {
flex: [max] [min] [ideal size];
}Create a file called vue.config.js (if you do not already have one) Add the following lines:
module.exports = {
css: {
loaderOptions: {
sass: {
additionalData: `@import "@/assets/_shared.scss";`,
},
},
},
};Create a file called vue.config.js (if you do not already have one) Add the following lines:
module.exports = {
css: {
loaderOptions: {
sass: {
data: `@import "@/assets/_shared.scss";`,
},
},
},
};Open the file called /build/utils.js Find the line containing scss: generateLoaders('sass') Replace it with the following:
scss: generateLoaders("sass").concat({
loader: "sass-resources-loader",
options: {
resources: path.resolve(__dirname, "./src/_shared.scss")
}
})The End-of-Year Checklist
It doesn't work in vercel, netlify yet.
I do believe that if you try to just copy the build folder as it outputted locally to an S3 bucket or something similar, it should probably work.
The book The Effective Manager says you only need 5 to 15 seconds to deliver effective feedback. Here are the 4 steps:
- Ask (“Can I give you some feedback?”)
- State the behavior (“When you X…”)
- State the impact (“…the result is Y.”)
- Encourage effective future behavior (“Keep it up!” for positive feedback or “Can you change that?” for negative feedback)
One caveat: the book has a 3 question test you have to ask yourself before you can deliver the feedback:
- Are you angry? If so, don’t give the feedback.
- Are you focused on the past instead of the future (i.e., reminding them about something they did wrong or punishing them)? If so, don’t give the feedback.
- Are you able to let it go? If not, don’t give the feedback. In other words, if you can’t let it go in terms of how you feel, you should let it go by not giving negative feedback. If you feel an urge to deliver feedback, you’re probably doing it for the wrong reasons.
- 이미 지나간 일 붙잡고 스트레스 받지 말고
- 건설적인 피드백을 해라.
- 피드백 할 때 감정 싣지 말고
정도로 이해. 글쓴이 의도랑 조금 거리가 있는 해석 같지만..
- Preconnect to the font file origin.
- Preload the font stylesheet asynchronously with low priority.
- Asynchronously load the font stylesheet and font file after the content has been rendered with JavaScript.
- Provide a fallback font for users with JavaScript turned off.