DEV Community: Chloe

How to add Vue to a Laravel app?

Chloe — Fri, 18 Mar 2022 15:04:51 +0000

I know some Vue and I'm attempting to learn about Laravel how do I add Vue to a Laravel app? I've tried a couple of things on Stack Overflow and here yet regardless of what I try I can't get it to work.

I've tried this:

npm install vue

which install vue and I try create a component but I can't seem to get it to render I've tried adding <script src="{{ mix('js/app.js) }}"></script> to my blade file

and this:

php artisan ui vue

which creates the scaffold correctly it says to run npm install && npm run dev yet every time I do this it fails. I've added .vue to mix file so this is currently:

mix.js('resources/js/app.js', 'public/js')
    .vue()
    .sass('resources/sass/app.scss', 'public/css');

It says additional dependencies are needed:

Running: npm install vue-loader@^15.9.7 --save-dev --legacy-peer-deps. Finished. Please run Mix again.

Then it just fails:

npm ERR! code ELIFECYCLE npm ERR! errno 1 npm ERR! @ dev:npm run developmentnpm ERR! Exit status 1 npm ERR! npm ERR! Failed at the @ dev script. npm ERR! This is probably not a problem with npm. There is likely additional logging output above.

How do I run Mix again? npm run dev, npm run hot both fail what am I doing wrong?

TIL CSS conic gradient

Chloe — Sun, 23 Jan 2022 17:18:25 +0000

I'm currently working my way through a udemy course building out some small projects with CSS and vanilla javascript and I learnt about conic gradients.

CSS gradients despite learning about them a long time ago are something I rarely use and have to look up every time, but I'd never heard of conic gradients until it appeared in this project.

Info on MDN

Example:

.gradient {
  background: conic-gradient(red, orange, yellow, green, blue);
}

They create a cool effect and definitely something I will try and find a use for in future projects. Does anyone have use case for this type of gradient?

CSS Selectors

Chloe — Sat, 15 Jan 2022 14:53:30 +0000

Universal selector

* - targets all elements on the page

Element/tags

Target all p elements

p { 
  color: red; 
}

IDs

IDs must be unique on a page and are targeted using a # (hash) e.g.

#my-page { 
  background-color: yellow; 
  color: red;
}

Classes

Classes are reusable and can be added to multiple elements to target them use . (dot) notation e.g.

.some-nav { 
  display: flex; 
}

Sibling and adjacent selectors

Descendant combinator This is represented by a space between selectors e.g.

main p { 
  padding: 1rem 0; 
}

Child combinator > - this is placed between two selectors and will match only elements that are direct children of the first element e.g.

div > span { 
  background-color: #333; color: #fff; 
}

General Sibling combinator ~ - this will match all iterations of the second element following the first and are children of the same parent

// Targets any paragraphs that are siblings of and follow h2 
h2 ~ p { 
  color: blue; 
}

Adjacent sibling combinator + - this will match the second element only if it directly follows the first element and both have the same parent e.g.

// Any paragraphs that follows a h2 element 
h2 + p { 
  color: red; 
}

Pseudo Classes

I have used several of these, but there are a couple I use for every project these are:

:root - this targets the root element usually this is html
:hover - can use this to change styling of an element when hovering over it with a pointing device e.g.

a { color: #CC0000; } 
a:hover { color: #000000; font-weight: bold; }

Pseudo Elements

These are added to a selector to target styling on a specific part of the selected element(s).

There are few that are available some of which I've never used but probably the most common are:

::first-line - style the first line of a paragraph
::first-letter - targets the first letter e.g.in a newspaper style
::before - the first child of the selected element often used with content for UI improvements one example may be to add quote marks or change the look of list elements
::after - as above but the last child of the selected element

*Note the double colon is used to distinguish between pseudo elements and pseudo classes e.g.

.intro::first-letter { 
  font-size: 3rem; 
  padding-right: 1rem; 
} 

.intro::first-line { 
  font-weight: bold; 
} 

a::before { 
  content: '◆'; 
}

Attribute Selectors

These are surrounded by []

[attr=value] - exact match value
[attr^=value] - starts with
[attr*=value] - contains
[attr$=value] - ends with
[attr~=value] - elements with an attribute name of attr whose value is a whitespace-separated list of words one of which is exactly value and a new one I learnt researching these:
[attr operator value i] - adding i causes a case insensitive comparison for those in ASCII range having never used does anyone have a use case for this?

a[title]{ 
  color: green; 
} 

a[href^="https://"]{ 
  color: red; 
}

a[href$=".com"]{ 
  color: blue; 
}

There are a few examples of some common and some useful selectors let me know if you think there are others I should have mentioned I'm sure there are!

How to add blog posts to github readme?

Chloe — Fri, 14 Jan 2022 23:16:12 +0000

Hey so I have setup a Github Readme file however I would like to be able if possible to add my latest blog posts it seems asa though it is possibly could someone point me in the right directionm on how to do this?

My site is built with Nuxt if that makes a difference but I do have feed setup I assume I need to reference that?

Any help much appreciated. Thanks!

2022 Goals

Chloe — Tue, 11 Jan 2022 19:43:57 +0000

My goals for 2021 were the following:

Work my way through the FCC curriculum particularly the JS section.
Work on Mastering Nuxt course - videos are being regularly released and need to keep up with these.
Write more CSS in most of my projects I tend to reach for Bootstrap or Tailwind and learn some more sass (I know some basics).
Get back into regular blogging I stopped towards the end of the year and need to start posting regularly again even if I don't finish them write a starting post which I can then review and add to as I feel necessary.

Having reviewed these goals:

I have done some of the FCC curriculum including finishing RWD section, working on some of the JS section and starting the front end libraries section - goal partially completed
This I haven't achieved I got about halfway through so I am going to back to the start and make my way through this course in the next couple of months
This I have achieved working my way through some challenges on frontend mentor and some other small projects I have written plain ol' CSS including some SCSS avoiding the likes of bootstrap and tailwind - goal complete!
I was in a routine with this for a while had a few ideas wrote some posts but then I stopped so a goal for this year will be to write at least a blog post every month about something I have learnt or refreshed on

Ongoing Goals to complete this year:

Finish udemy course of vanilla JS projects - I started this last week I've setup a github repo and have completed first two projects
Review some jQuery perhaps rewrite a couple of small vanilla JS projects
Take another look at FCC although I've struggled to stick to this in the past going to give it another go
Complete Mastering Nuxt course and write a blog post reviewing it and what I have learnt
Blog more regularly again including posting on dev

What is everyone planning to learn this year?

CSS @supports rule

Chloe — Sun, 26 Sep 2021 17:56:00 +0000

A quick post on @supports rule which although I know about I rarely use. This is described by MDN as allowing you to "specify declarations that depend on a browsers support for specific CSS features".

A couple of simple examples to check if a single feature is supported or not:

@supports (display:grid){ 
  main { display: grid; } 
} 
@supports not (display:grid){ 
  main { display: block; } 
}

These simple examples can be made more complex through the use of not, and and or operators. Firstly the not operator is used to check if a property/value is not supported e.g. display grid in the example above will be matched in Internet Explorer but ignored in modern browsers. The and operator will only be matched when all expressions evaluate to true - multiple options can be chained together e.g.

@supports (display:grid) and (display:inline-grid) { 
  // do something 
}

The or operator will match if any of the given expressions are matched e.g.

@supports (display:grid) or (display: flex){ 
  // do something 
}

I also learnt it is possible to check for support of custom properties e.g.

@supports (--bgcolor: red){ 
  body { 
    background-color: var(--bgcolor); 
  } 
}

VSCode Plugins

Chloe — Wed, 04 Aug 2021 20:20:33 +0000

Like many developers, VSCode is my text editor of choice I thought I would share some of my favourite and most useful plugins:

bracket pair colorizer 2 - as the name suggests shows matching brackets in colours
Color Highlight - highlights colours in your code
HTMLHint - highlights any stray or missing tags I've found this super useful for work when building emails
Live Server - quickly enable a local server
markdownlint - I write in markdown a lot this helps to keep everything consistent and points out common errors e.g. going from # (h1) to ### (h3)
Markdown Preview Enhanced - this pairs well with linter enabling you to see as you are writing in vscode
Material Icon Theme - adds material design icons to vscode
Settings Sync - sync your settings between different devices
Vetur - vue tooling for vscode
Tailwind CSS Intellisense - I've used tailwindcss in a few projects and have found this super useful
JavaScript (ES6) code snippets - a series of ES6 snippets which I should use more

If anyone has any further suggestions for must-have plugins I'll be interested to here about them

Working with Git

Chloe — Sat, 17 Apr 2021 19:17:30 +0000

Git is a version control system for everything from small sites to large scale apps and sites. The first step is to download and install it on your machine whether your OS of choice is (Windows, macOS, Linux). Although there are GUIs available e.g. Github Desktop it is easy to get started on the CLI (Command Line Interface) which could be the terminal like or git bash or the built-in terminal in your editor.

You can get started by creating an empty repository (or repo) on your host of choice mine is Github you then clone that empty repo into your files which creates a copy of this locally and then add your files to this folder. If you already have a folder with files you wish to add to git you can do this with the following commands (which will be shown to you):

git remote add origin git@github.com:'YOUR_USERNAME'/'REPO_NAME'.git 
git push -u origin master

Key Commands

git add: this command add files to git and makes sure any changes are 'tracked' which are added to the 'staging area' - this is the middle man where you can check any updates/changes before committing
git commit: this commits or finalised your changes when using this you need to add -m which is a relevant message explaining your changes e.g.

git commit -m 'updated footer'

git push: this 'pushes' any changes to the remote repo on Github so it is accessible to everyone - git pull: this opposite to push this will 'pull' any updates into your local repo so you have the most recent changes available to you
git status: this will give you information about your files e.g. whether or not changes have been made and whether they have been tracked
git rm: remove a file from the 'staging area' if updated by accident - git log: this will give a list of the most recent commits e.g. date and who committed the updates

-git diff: this will show differences between original files and the most recent updates

Branching and Merging

git branch: this is most useful for larger software/app projects where you can complete updates without modifying the original content e.g.

git branch footerfix 
// creates a new branch called footerfix 
git branch 
- master 
- footerfix

The default branch will be the master, but you can create several updates for different things you may be working on. Switching branches use the git checkout BRANCH_NAME e.g.

git branch 
* master // this will be the default branch footerfix 
// switches from the master to the new footerfix branch

To delete a branch, use the -d flag:

git branch -d footerfix

JavaScript Objects

Chloe — Sat, 17 Apr 2021 17:59:31 +0000

Objects are a key part of JavaScript. In their most simple form, they are key-value pairs made up of properties/keys and values e.g.

let myTeam = { 
  name: 'Liverpool', 
  stadium: 'Anfield', 
  city: 'Liverpool' 
} 
// The properties/keys are name, stadium, and city 
// The values are with Liverpool, Anfield, and Liverpool

Adding and Accessing Properties

As with arrays properties can be added to an object using either dot (.) or bracket [] notation. Note: if the property name has a space in it or you want to use a variable you will need to use bracket notation e.g.

myTeam.manager = 'Jurgen Klopp' 
myTeam[founded] = 1892 
myTeam['trophies won'] = { 
  'European Cups': 6, 
  'League Titles' : 19
}

The myTeam object now contains the following which shows as with arrays you can nest objects inside objects e.g.

myTeam = { 
  name: 'Liverpool', 
  stadium: 'Anfield', 
  city: 'Liverpool', 
  manager: 'Jurgen Klopp', 
  founded: 1892, 
  'trophies won': { 
    'European Cups' : 6, 
    'League Titles': 19 
   }
}

myTeam['trophies won']['European Super Cups'] = 3

Accessing properties follow the same format e.g.

myTeam.manager // 'Jurgen Klopp'
 myTeam['trophies won']
 // { 
  'European Cups': 6, 
  'League Titles' : 19, 
  'European Super Cups' : 3 
}
 myTeam['trophies won']['European Super Cups'] // 3

Checking Properties

To check if an object has a specific property you can use

hasOwnProperty('propname') - this method will return a boolean based on the outcome of this check against property e.g.

let myTeam = { 
  name: 'Liverpool', 
  stadium: 'Anfield', 
  city: 'Liverpool', 
  manager: 'Jurgen Klopp' 
} 

myTeam.hasOwnProperty('manager') 
// returns true as this prop exists in the object 
myTeam.hasOwnProperty('founded') 
// returns false as this prop does not exist in the object

for... in statement - this method can be used to iterate over all the keys in an object e.g.

for(const val in myTeam) console.log(val) 
// returns name, stadium, city, manager, trophies won

Object.keys() - This method will return an array of all the keys stored in the object which you pass in as a parameter e.g.

console.log(Object.keys(myTeam))
// [ 'name', 'stadium', 'city', 'manager' ]

Object.values() - works in a similar way to for... in as it will provide the values in the same order, but it will return an array e.g.

for(const val of Object.values(myTeam)) console.log(myTeam)
// returns ['Liverpool', 'Anfield' 'Liverpool', 'Jurgen Klopp']

Object.entries() - this method returns an array of the objects string-keyed property [key, value] pairs

console.log(Object.entries(myTeam))
// [ 'name', 'Liverpool' ] 
// [ 'stadium', 'Anfield']
// [ 'city", 'Liverpool' ]
// [ 'manager', 'Jurgen Klopp' ]

Remove Properties

To remove properties from an object, use the delete keyword e.g.

let myTeam = { 
  name: 'Liverpool', 
  stadium: 'Anfield',
  city: 'Liverpool' 
}

delete myTeam.city 

myTeam: { 
  name: 'Liverpool', 
  stadium: 'Anfield' 
}

Prevent mutation

Object.freeze() - This method will prevent an object from being mutated in any way so you cannot add, remove or update any of the properties in the object. e.g.

Object.freeze(myTeam) 
myTeam.fullName = 'Liverpool Football Club' 
// this will be ignored as the freeze prevents any mutation to the myTeam object

It's not an exhaustive list but a few methods I have learnt. If any feedback or suggestions let me know.

CSS Variables

Chloe — Sun, 07 Feb 2021 20:40:12 +0000

CSS Variables have been around for a while and designed to try and reduce duplication in CSS. They are a useful way to change multiple values at the same time. To create them you use a prefix with -- and can be used in declarations using var() function e.g.

:root { 
  --header-background-colour: red; 
  --secondary-background-colour: blue; 
  --text-colour: white; 
} 

header { 
  background-color: var(--header-background-colour); 
  color: var(--text-colour); 
} 

p { 
  background-color: var(--secondary-background-colour); 
  color: var(--text-colour); 
}

It is important to note that these are case sensitive so --bg-colour and --BG-colour are seen as two separate properties. To see the current support see caniuse.com there is good support in modern browsers although if you need to support everyone's favourite IE they won't work and instead, you will need to set a separate background property before using var e.g.

  background-color: red; // this will work in IE 
  background-color: var(--header-background-color); // this will not

Inheritance

As with other CSS properties, variables will inherit so a good idea to set them in :root as shown above to make them globally available and therefore accessible to every element. You can then set in specific individual elements to overwrite these global values.

I have setup a simple example on codepen:

See the Pen CSS Variables by Chloe (@cgweb) on CodePen.

How to access subfolders using nuxt content module?

Chloe — Sun, 07 Feb 2021 20:35:56 +0000

I am currently using this module for my blog and as it is a blog folder with a series of blog posts these render fine, however I'm also attempting to use it to display some documentation which inckude subfolders. I have a docs folder with index.vue with code as follows:

<ul class="mx-auto lg:w-1/2">
   <li class="p-5" v-for="doc in docs" :key="doc.id">
      <nuxt-link :to="{ name: 'docs-slug', params: { slug: doc.slug } }">
      <h2 class="py-4 text-white">{{ doc.title }}</h2>
     </nuxt-link>
   </li>
 </ul>

async asyncData({ $content, params }) {
    const docs = await $content('mydocs', { deep: true }, params.slug).fetch()

        return {
            docs
        }
    }

Now this renders the title of all the pages inside mydocs folder correctly, however, when clicking on one it does not load the corresponding content and I am not sure what I am doing wrong. (If the files are in the base 'docs' folder they render fine)

And in my _slug.vue file I have this:

async asyncData({ $content, params }){
  const docs = await $content('mydocs', { deep: true }, params.slug).fetch()

  return {
    docs
  }
},

For example, I click the Vue title and it tries to load /docs/vue/ when the path is actually docs/js/vue ? I thought using { deep: true } would solve this as the docs it says this will fetch files from subdirectories so how do I set the path? Am I missing something? Anyone come across the same issue?

Any help much appreciated as I'm not sure what I'm doing wrong/.

React not easy to learn?

Chloe — Sun, 25 Oct 2020 17:42:30 +0000

I am a complete newbie to React however as someone who knows some Vue I am currently attempting to rebuild a Vue app and it'#s not going that well. Everyone seems to suggest React is just JS and JSX it's easy to learn. Is it? It just seems so alien to me I thought having dabbled a bit with Gatsby I know the basics of using JSX and I know some ES6 stuff I can learn React... it's turning out to be much more difficult than I thought.

For a start I don't like the docs (imo Vue docs are much better) I don't find them helpful for example I was trying to render an array of objects which apparently is not allowed in React (why?) all the example in the docs shows is a basic array of numbers? In the end I found an answer on SO so in the end did this:

let methodsList = arrayMethods.map((method) => 
<li className="list-group-item"
 key={method.name}>
<strong>{method.name}</strong> {method.method}</li>)

...
<ul className="list-group bg-danger">
  {methodsList}
</ul>

Perhaps I am approaching it wrong I don't know but I am confused and struggling to grasp bits of it does anyone have any resources that go over the key concepts?