taniarascia/taniarascia.com

💾 ‎ Personal website running on Gatsby, React, and Node.js.

taniarascia.com

Tania's personal website running on Gatsby, React, and Node.js.

Note: The source for this site was not created to be a template or theme, but for my own use. Feel free to take whatever inspiration from it that you want, but this code was not written with the intention of being cloned and deployed. As such, I do not provide support or guidance for doing that. I recommend using the Gatsby Advanced Starter to set up a blog or an existing theme created for that purpose.

License

This project is open source and available under the MIT License.

taniarascia.com's Issues

Newsletter and comment

Hi tania,

I come from Laravel and just started a project on Gatsby, i have a question.

What is the plugin you use for Mailchimp and comment on your website ?

thank you

Patreon badge error in README.md

Patreon badge error

The current patreon badge isn't rendering properly. The url points to a heroku app that doesn't exist.

https://img.shields.io/endpoint.svg?url=https://shieldsio-patreon.herokuapp.com/taniarascia&style=for-the-badge

It looks like the project has been moved to vercel.

Based on your current badge, I think this is the correct markdown to render it

[![Patreon donate button](https://img.shields.io/endpoint.svg?url=https://shieldsio-patreon.vercel.app/api?username=taniarascia&type=patrons&style=for-the-badge)](https://patreon.com/taniarascia "Support me on Patreon")

Rendered Markdown:

How can I do this?

Issue Closed

Bug Dark Theme

Hello,
I found a bug when changing theme to dark mode.
thanks.

Typo

Hi, noticed a typo in the description of the super rad article 'Build a Node.js, Express, & PostgreSQL REST API'. Just wanted to bring it to your attention. I'm happy to look into fixing it, too, if you prefer. Thanks!

Duplicates in RSS feed

There seem to be some duplicates in the RSS feed at /rss.xml, because some 60 posts suddenly showed up in my reader a couple of days back. Search for How To Use Array Methods in JavaScript: Iteration Methods, for instance. There seem to be three matches:

<item>
	<title>
		How To Use Array Methods in JavaScript: Iteration Methods
	</title>
	…
	<pubDate>Tue, 15 Aug 2017 00:00:00 GMT</pubDate>
	…
</item>

<item>
	<title>
		How To Use Array Methods in JavaScript: Iteration Methods
	</title>
	…
	<pubDate>Mon, 14 Aug 2017 00:00:00 GMT</pubDate>
	…
</item>

<item>
	<title>
		How To Use Array Methods in JavaScript: Iteration Methods
	</title>
	…
	<pubDate>Thu, 10 Aug 2017 00:00:00 GMT</pubDate>
	…
</item>

I may be mistaken, but pubDate seems to be the only difference in the three.

Installation Guide

Hi Tania i love your theme its awesome. But iam a junior programmer, can you help me make a Installation Guide from basic ? to use your incredible theme

Link to /categories/javascript is incorrect

Hi Tania, first off just want to say... huge fan of your articles!!

I clicked through the link (https://www.taniarascia.com/categories/javascript) on your React Router article and it leads to your nifty 404 page. I believe the link should lead to "https://www.taniarascia.com/categories/java-script" ?

yarn dev error

First of all thanks so much for sharing your experiences regarding migrating from Wordpress. I'm trying to do the same and I thought it would be nice to start with your project rather than the advanced starter.

I cloned the repo and ran yarn dev locally. It starts with this error and gives many other GraphQL errors.

ERROR #85923  GRAPHQL

There was an error in your GraphQL query:

Cannot query field "allMarkdownRemark" on type "Query".

If you don't expect "allMarkdownRemark" to exist on the type "Query" it is most likely a typo.
However, if you expect "allMarkdownRemark" to exist there are a couple of solutions to common problems:

- If you added a new data source and/or changed something inside gatsby-node.js/gatsby-config.js, please try a restart of your development server
- The field might be accessible in another subfield, please try your query in GraphiQL and use the GraphiQL explorer to see which fields you can query and what shape they have
- You want to optionally use your field "allMarkdownRemark" and right now it is not used anywhere. Therefore Gatsby can't infer the type and add it to the GraphQL schema. A quick fix is to add a least one entry with that field ("dummy content")

It is recommended to explicitly type your GraphQL schema if you want to use optional fields. This way you don't have to add the mentioned "dummy content". Visit our docs to learn how you can define the schema for "Query":
https://www.gatsbyjs.org/docs/schema-customization/#creating-type-definitions

File: gatsby-node.js:105:10

[ { GraphQLError: Cannot query field "allMarkdownRemark" on type "Query".
      at Object.Field (taniarascia.com/node_modules/graphql/validation/rules/FieldsOnCorrectType.js:53:31)
      at Object.enter (taniarascia.com/node_modules/graphql/language/visitor.js:324:29)
      at Object.enter (taniarascia.com/node_modules/graphql/language/visitor.js:375:25)
      at visit (taniarascia.com/node_modules/graphql/language/visitor.js:242:26)
      at validate (taniarascia.com/node_modules/graphql/validation/validate.js:73:24)
      at GraphQLRunner.validate (taniarascia.com/node_modules/gatsby/dist/query/graphql-runner.js:58:22)
      at GraphQLRunner.query (taniarascia.com/node_modules/gatsby/dist/query/graphql-runner.js:82:25)
      at taniarascia.com/node_modules/gatsby/dist/bootstrap/graphql-runner.js:21:37
      at Promise (taniarascia.com/gatsby-node.js:112:7)
      at new Promise (<anonymous>)
      at Object.exports.createPages (taniarascia.com/gatsby-node.js:105:10)
      at runAPI (taniarascia.com/node_modules/gatsby/dist/utils/api-runner-node.js:248:37)
      at resolve (taniarascia.com/node_modules/gatsby/dist/utils/api-runner-node.js:367:15)
      at Promise._execute (taniarascia.com/node_modules/bluebird/js/release/debuggability.js:384:9)
      at Promise._resolveFromExecutor (taniarascia.com/node_modules/bluebird/js/release/promise.js:518:18)
      at new Promise (taniarascia.com/node_modules/bluebird/js/release/promise.js:103:10)
    message: 'Cannot query field "allMarkdownRemark" on type "Query".',
    locations: [ [Object] ] } ]

And also many of these:

ERROR #98123  WEBPACK

Generating development JavaScript bundle failed

Can't resolve '../../content/images/codrops.png' in 'taniarascia.com/src/pages'

File:

Any ideas?

Takenote conclusion link error.

Hello,

I don't know if I have the right to open this as an issue but couldn't find a better way to inform you about this link error in the conclusion.

"Laconia the MVC PHP app" will take you to "Primitive" Repo.

By the way, I enjoyed the Article thanks for sharing!

RIP Josh 💔🙏🕊

May he rest in peace. Please stay strong ❤️🙏💪

Simple MVC App in Plain JavaScript possible bug when checking a checkbox

Hi @taniarascia :)

I was playing with the app here https://taniarascia.github.io/mvc/. There might be a small bug.

Bug reproduction steps

1. Add 3 todos

2. Delete the second

3. Add forth todo

4. Check forth

Third todo should not be checked.

How to make Highlight post?

I really appreciate your work on theme. i made Highlights true but it shows nothing why ?

Bug

Hey Tania,
Is this some kind of bug?

ask

Hello mrs, can you share your template please. i just for learning purpose and i really love your template

Something not clear

Hi there. I got something unclear while reading this article.

In Form.js constructor. Here is
this.state=this.initialState
(these 2 variables should refer to the same object)

handleChange there is
this.setState...
(this should change the initialState too)

and in submitForm there is
this.setState(this.initialState)

From the result everything is fine. But this.initialState should be change by now. I dont understand this.

Image not loading

The image zurich3.jpg does not load on the "Whirlwind Tour of Europe" post

Maybe you will like this

taniarascia.com/src/style.css

Line 30 in 70b4bf7

--inline-code-color: #eee;

Indirectly with bright colors will distinguish which values need attention and which ones do not. Colors in fonts influence readers to pay attention to what they think is important.

And I recommend using bright colors to mark values that are considered noteworthy. Use this #ffffc38

Something went wrong installing the "sharp" module

Hello Tania,

I am exploring Gatsby and found your blog quite impressive. However, I am facing wiered error as mentioned below:

Something went wrong installing the "sharp" module

The specified procedure could not be found.
\\?\E:\workspace\taniarascia.com\node_modules\gatsby-plugin-manifest\node_modules\sharp\build\Release\sharp.node

- Remove the "node_modules/sharp" directory, run "npm install" and look for errors
- Consult the installation documentation at https://sharp.pixelplumbing.com/en/stable/install/
- Search for this error at https://github.com/lovell/sharp/issues


⠋ load plugins
error Command failed with exit code 1.

I tried everything possible with Yarn and NPM package managers. Also removed and re-install sharp. But nothing worked for me.

Can you please help to resolve this issue?

Thanks.

Running `yarn upgrade-interactive --latest`

taniarascia.com/package.json

Line 84 in 0f1285e

"check": "npx npm-check-updates -u"

Not sure if you know this, but yarn has a built-in command to update deps, yarn upgrade-interactive --latest 😊

But, whatever works for you 👍

Missing ids for #hash-links

On pages with #links to other sections of a page, the target sections need an id (<h2 id=... or <a name=...) - looks like those got lost during webpage redesign...

Reproduction steps (Firefox 78.0 Win 10):

• go to a guide, e.g. https://www.taniarascia.com/overview-of-css-concepts/
• click on a local link, e.g. https://www.taniarascia.com/overview-of-css-concepts/#other-considerations (or https://www.taniarascia.com/redux-react-guide/#reducers)
• it should scroll to the relevant section, but currently the page scrolls to top

Where can I find similar image resources?

Image resource like nav-floppy.png, nav-github.png is awesome, Where can I find similar image resources?
Thank you!

Bug Comments

Hello,
comments area duplicated when click Heading link on post.

Filtered out Markdown files showing in article count

Go to https://www.taniarascia.com/blog/ and try to search for "about" in the input.

No posts are showing, but the number of posts to the right says 1.

Why?

In addition to blog posts there are three markdown files in content/pages:

• content/pages/resume.md
• content/pages/me.md
• content/pages/learn.md

They are queried along with blog posts in this query:

taniarascia.com/src/pages/blog.js

Lines 106 to 131 in 745bd8b

	posts: allMarkdownRemark(limit: 2000, sort: { fields: [fields___date], order: DESC }) {
	edges {
	node {
	fields {
	slug
	date
	}
	excerpt(pruneLength: 180)
	timeToRead
	frontmatter {
	title
	tags
	categories
	thumbnail {
	childImageSharp {
	fixed(width: 150, height: 150) {
	...GatsbyImageSharpFixed
	}
	}
	}
	date
	template
	}
	}
	}
	}

They will never show up in the list of posts, because posts that don't have the post template specified in frontmatter are filtered out client-side in the PostListing component:

taniarascia.com/src/components/PostListing.js

Line 11 in 745bd8b

.filter(postEdge => postEdge.node.frontmatter.template === 'post')

But they are still counted in the number of filtered posts:

taniarascia.com/src/pages/blog.js

Line 59 in 745bd8b

const filterCount = filteredPosts.length

Solution

Filter these out server-side with GraphQL. Then the client-side filtering in PostListing can even be removed.

Do you want a PR @taniarascia?

Dark mode

The issue is when switching to the dark mode it has a little latency

index.php - I think REQUEST_URI should be used instead of REDIRECT_URL

$request = $_SERVER['REDIRECT_URL'];
//I think you wanted to do this here:
//$request = $_SERVER['REQUEST_URI'];

Website logo

Great website. But I think the logo could use a change. Doesn't quite go with the design especially in night mode where it will show white edges around it breaking the clean design (not that much).

Edit button should be seen by readers ?

Hello Tania,

I was looking at one of your posts at https://www.taniarascia.com and saw that you have an edit button.

I don't know if you want to show the edit button, but, for my use case scenario (I just read your posts) it's useless to have an edit button that redirects to the .md file of the post! Simple readers should see this?

Code text changes width of page / article

Bug

Have a look at the enclosed screenshots. I encountered this issue when I was browsing via my phone through your articles.

How to reproduce

First screenshot:

1. Open this article
2. Open your developer tools.
3. Toggle the mobile device toolbar and choose a device with a low width (e.g. Moto g4)

Second screenshot:

Do the same thing with this article.

---

My eyes hurt after visiting this link you shared with us https://khalilstemmler.com/

Kappa

re: https://www.taniarascia.com/node-express-postgresql-heroku/

Hello,
First off, thank you thank you thank you. Your site has been so helpful for me!

I don't know if it was something I was doing incorrectly, but this tutorial did not work for me until I removed the ssl requirement in the config file. I hate to admit it, but it took me like 5 hours to figure out that was the cause.

I just wanted to let you know in case something changed in how Heroku was working.

Thanks,
Travis

How do I host this on netlify? It gives error on using yarn build as build command.

Getting started with Vue - Cancel button does not work

Hi,

I'm a novice with vue.js and found your excellent article on the subject.
Unfortunatelly I have encountered an issue with the cancel routine.

Upon clicking on edit a copy is made of the employee, to allow it to be restored if the user clicks cancel. However it seems that the employee object is referenced in the copy. So the edited values are also pushed through on the copy.

Does Vue have a option to make a deep copy of the employee object?
I have tried using temporary values for the email and name properties, but these also change.

Options for prismjs are given to images

taniarascia.com/gatsby-config.js

Lines 126 to 137 in c9f04d5

	options: {
	classPrefix: 'language-',
	inlineCodeMarker: null,
	aliases: {},
	showLineNumbers: true,
	noInlineHighlight: true,
	prompt: {
	user: 'root',
	host: 'localhost',
	global: true,
	},
	},

Link to "Build a CRUD App in React with Hooks" is broken

In "Knowledge of React terminology: JSX, State, Components, Props, Lifecycle and Hooks" the word "Hooks" link is broken 👉 https://www.taniarascia.com/redux-react-guide/crud-app-in-react-with-hooks is a 404

GraphQL error

Hi @taniarascia thanks for great tutorials.

When run yarn develop

I got this error

There was an error in your GraphQL query:

Expected type MarkdownRemarkFieldsEnum, found frontmatter___date.

File: src/pages/guides.js

any suggestions please?

issue in article you wrote

Hi I create an issue here since I could not find any other way to contact you:

https://www.digitalocean.com/community/tutorials/understanding-arrow-functions-in-javascript
You learned that arrow functions are always anonymous

https://www.digitalocean.com/community/tutorials/how-to-define-functions-in-javascript
Arrow functions are always anonymous functions

Hi, arrow functions declared with const/let are not anonymous.

const f = () => {}
console.log(f) // logs f

Cheers

Reel-club link is broken on about me page

How do you manage your articles?

Hi Tania,

I had the impression that your site has Netlify CMS configured for articles. However, I couldn't find anything for the same. May I know the reason for not considering Netlify CMS as your site deployed at Netlify only...

Netlify CMS gives a kind of Admin panel to write/draft/publish articles directly from the browser. In absence of that, do you have other tools for a similar purpose?

Thanks.

A tutorial on how to make similar blog.

Hey Tania,
This is an appreciation post, I really like your blog and would like to learn how you created this. I am new to react and learning react fundamentals right now. If it's not too much to ask and if you feel like writing a tutorial about creating this blog it would be really helpful.

Thanks in advance.

Warning: validateDOMNesting(...): <a> cannot appear as a descendant of <a>.

taniarascia.com/src/components/Posts.js

Line 20 in 13c20f0

<Link

Theme Bug

I think the theme has a little problem when it is not set in localStorage()

As you can see in the picture below, the website start with a black header but a white central page.

It can be cool, but some words (created by React <Link>) appear white (see in the picture below : words projects and writing are hidden)

error in npm run develop

pls tell me how to install it, every i run npm install, npm run develop its show error

Suggestion : git repository too large

hi, thank you for this project, i'm learning a lot from it.
i think this repo can be a lot smaller if you remove pictures from /content/images/

React Router SPA link broken in prerequisites for Redux Article

how is your website updated when we update this repo?