vuex-class' documentation doesn't come with clear steps on how one could call a getter with one or more arguments.
Here's how you do it:
@workspaces.Getter
protected workspace: WorkspaceType | null = null;
public byId!: (id: WorkspaceId) => WorkspaceType;
mounted(): void {
this.workspace = this.byId({ id: this.activeWorkspaceId });
}
Sometimes you need to follow an url trough multiple redirects. I've created a simple script you can alias into your .bashrc or .zshrc file and then just use it as a regular shell command:
Add this line to .zshrc or .bashrc
# Follow URL
alias checkurl='_checkurl() { curl -v -L $1 2>&1 | egrep "^(> Host:|> GET|> Code|< HTTP|\* SSL)"}; _checkurl'
Then you can use it like so:
checkurl google.com
it will output this:
> GET / HTTP/1.1
> Host: google.com
< HTTP/1.1 301 Moved Permanently
> GET / HTTP/1.1
> Host: www.google.com
< HTTP/1.1 200 OK
Really useful when debugging URLs.
Let's say you have a simple component in NuxtJS and VueJS, a static image for a blog post.
<template>
<article class="post__image">
<img class="image" src="~/assets/images/imageName.jpg" alt="post picture">
</article>
</template>
Simple enough, right? But you don't want to have the same image for every blog post, so maybe you're trying to add it dynamically, getting the image name through a prop and using Vue's v-bind directive, like so:
<template>
<article class="post__image">
<img class="image" :src="`~/assets/images/${imageName}.jpg`" :alt="`${imageName} picture`">
</article>
</template>
<script>
export default {
name: 'PostImage',
props: {
imageName: String
},
}
</script>
And then you notice that that doesn't work. But why? The vue syntax is correct, so what's the problem? Well, there's something else at play here.
Behind the scenes, webpack replaces the image path with a module request at build time. That's fine for static images, because their paths are known at build time, but for dynamic images it's a different story, as webpack can't know what their paths will evaluate to at run time, so that won't work.
The solution is to make a module request for the images, so that webpack can work its magic on them before loading them on the page. That's done by using require(...), with the correct image path.
So your images will have to be loaded like this:
<img
class="image"
:src="require(`~/assets/images/${this.imageName}.jpg`)"
:alt="`${imageName} picture`"
>
You could also clean that up a bit, and extract the require part into a computed property, for better readability:
<template>
<article class="post__image">
<img class="image" :src="imageSource" :alt="`${imageName} picture`">
</article>
</template>
<script>
export default {
name: 'PostWithImage',
props: {
imageName: String
},
computed: {
imageSource() {
return require(`~/assets/images/${this.imageName}.jpg`)
},
}
}
</script>
When you have to delete 100+ databases created by a botched deployment script you have a few options available:
You'll have to run this query and then copy paste the result into a second query.
SELECT
GROUP_CONCAT( CONCAT( 'DROP DATABASE `', SCHEMA_NAME, '`;' ) SEPARATOR ' ' ) AS DELETE_QUERY
FROM
information_schema.SCHEMATA
WHERE
SCHEMA_NAME LIKE '{DBNAME}%'
This allows you to create a stored procedure that will run your query in one go.
CREATE PROCEDURE clean () BEGIN
SET @QUERY := (
SELECT
CONCAT( 'DROP DATABASE `', SCHEMA_NAME, '`;' )
FROM
`information_schema`.`SCHEMATA`
WHERE
SCHEMA_NAME LIKE '{DBNAME}%'
LIMIT 1
);
PREPARE stmt
FROM
@QUERY;
EXECUTE stmt;
DEALLOCATE PREPARE stmt;
END;
CALL clean ();
DROP PROCEDURE clean;
While you can find detailed information in the official docs, I dare to spoil the fun for you:
VUE_APP_.Example: VUE_APP_API_URL.
You can now access the variables in your application like this: process.env.APP_URL.
CYPRESS_.Example: CYPRESS_APP_URL.
You can now access the variables in your tests like this: Cypress.env('APP_URL').
Ever wondered how you can loop through a list of VueJS components?
Let's say you have an array of components and you want to render them dynamically:
data() {
return {
components: ['ComponentOne', 'ComponentTwo', 'ComponentThree']
}
}
It's simple. We just need to use vue's dynamic component.
###Let's see how:
<ul>
<li v-for="component, index in components" :key="index">
<component :is="component"></component>
</li>
</ul>
Just make sure to register all the used components where you need them.
For a long time I've been afraid of using the shell command chmod. That because I didn't understand how it works and I feared breaking things. Today though, I learned how easy it is actually. No, not to break things, but to use the chmod command.
A Unix system allows for multiple users with different access rights, which can be changed in the shell by using this command.
The permissions are for reading, writing and executing (rwx) and are expressed for all three types of users a file or folder has. It will come in the form of rwxrwxrwx where the first batch of three characters (rwx), belong to the owner, the second to the group, and the third to all the other users (owner/group/other).
Sure, (rwx rwx rwx) would mean that everybody has all the access rights to that particular file or folder. And we all know that's not a good idea. So, most often you'll see something like rw-r--r-- which means that only the owner has the right to read and write, while everybody else can only read that particular file.
Now onto chmod, which can be used with either a symbolic or a numeric notation for the access settings. You've probably seen somebody else type chmod 644 file_name on your computer, leaving you wondering about what that means.
That's the numeric notation.
If you think about the access rights as a series of bits, the whole thing would look like this:
rwx rwx rwx = 111 111 111
rw- r-- r-- = 110 100 100
rw- r-x --- = 110 101 000
That translates into
rwx rwx rwx = chmod 777
rw- r-- r-- = chmod 644
rw- r-x --- = chmod 650
because in binary notation:
100 = 4
101 = 5
110 = 6
111 = 7
And now you've got a simple rule on how to construct your chmod command depending on what permissions you need to set.
The rwxr--r-- access rights means chmod 744, rw-r----- is chmod 640, and so on.
Simple enough, right?
A very naive yet effective approach on metaprogramming that helps you dynamically call the right method in a very concise manner.
$method = $user instance of User ? 'save' : 'saveMany';
$this->members()->$method($user);
The example is an excerpt from a dummy Laravel app.
By making use of Sets and the spread operator, we can quickly strip the duplicates with a Set then turn it back into an array in no time.
[…new Set([1, 'Graffino', 1, 'Graffino', "Wha!"])];
Will return: [1, "Graffino", "Wha!"]
Phoenix schema: ArgumentError - invalid or unknown type :text for field
:text can be used in migrations, but not when describing the schema in the model. Use :string instead.