feat(sqip): implement sqip && fix mobile layout #13

axe312ger · 2018-05-17T20:40:29Z

updates all dependencies and fully implements sqip previews

axe312ger · 2018-05-18T08:22:09Z

The layout was pretty much broken on mobile. I fixed it via css grid via 9 additions and 12 deletions :)

iPad Landscape	iPad Portrait	iPhone Portrait

axe312ger · 2018-05-18T08:24:31Z

package.json

@@ -7,22 +7,27 @@
    "url": "https://github.com/contentful-userland/gatsby-contentful-starter/issues"
  },
  "dependencies": {
-    "contentful-import": "^6.2.0",
-    "gatsby-link": "^1.6.34",
+    "axios": "^0.18.0",


this dependency will be gone with gatsbyjs/gatsby#5469

axe312ger · 2018-05-18T08:24:45Z

package.json

-    "gatsby-transformer-remark": "^1.7.32",
-    "inquirer": "^5.1.0",
-    "lodash": "^4.17.4"
+    "gatsby-plugin-sharp": "^1.6.44",


this dependency will be gone with gatsbyjs/gatsby#5469

stefanjudis · 2018-05-19T18:05:22Z

package.json

@@ -7,22 +7,27 @@
    "url": "https://github.com/contentful-userland/gatsby-contentful-starter/issues"
  },
  "dependencies": {
-    "contentful-import": "^6.2.0",


@axe312ger Why did you drop the import? That's part of the setup flow? :)

that was on accident 🙈
good catch 👀

Can we use contentful-cli instead of contentful-import now that the latter is deprecated?

They should use the contentful-import directly here because it is used as node library

makes sense! thanks!

stefanjudis · 2018-05-22T07:09:42Z

src/components/hero.module.css

-  height: 100%;
-  width: auto;
-  margin: 0 auto;
+  height: 61.8vh;


what's this number? pi * 👍🏻 ?

I googled golden ratio in percentage, this came out and it looked nice. So thats why I did choose this value 🙈

Haha... Can you then add this as a comment? :D

stefanjudis

I think this is great but bringing this in additionally I feel like we should have a place in the docs describing what is included in the starter? There's going more and more magic in which can be quite confusing. :)

What do you think?

axe312ger · 2018-05-30T11:18:09Z

Alright, will add some docs :)

axe312ger · 2018-05-31T14:20:41Z

Docs added, comment added, rebased.

Ready for review :)

iammatthias · 2018-07-03T16:54:55Z

Any update on this?

Bloomca · 2018-07-09T11:04:47Z

@axe312ger I just tried your changes, and it looks very cool!

One problem, though, is starting time: now, instead of 3 seconds it is 65.

After this change:

Before this change:

Can we make this part (with sqip) optional? What do you think?

Thanks!

axe312ger · 2018-07-09T11:27:06Z

Hey there,

optional could be nasty since it requires different config for the gatsby-image element.

Also, yes it takes more time to run in the first time but subsequent runs will use the already generated picture.

63 seconds is really slow, what kind of machine did you use?

Best,
Benedikt

Bloomca · 2018-07-09T13:58:22Z

Ah, I see. I have MBP 2017, 3,1 GHz Intel Core i7 and 16GB DDR3, so it should be good.

I've just reinstalled all packages and it is 3 seconds again! Super weird, since I think I did before as well, but if it is for you the same (no changes in time) then I think all good.

axe312ger · 2018-07-09T14:01:49Z

I am wondering if this gives first time Contentful/Gatsby users the impression it is slow.

Maybe this isn't that great idea and we should maybe switch to traced SVG output since this is supported now in Gatsby in combination with Contentful.

What do you think?

Bloomca · 2018-07-09T14:13:05Z

Actually, I just tried it again, and it seems that fast rebuilding (3 seconds) is only if everything is in cache, so in case I do the following:

clone the repo
git checkout feat/sqip
npm install
npm run setup (with my credentials of empty newly created space)
npm run dev

It takes ~50 seconds now (weird). Also, it does not really run for me (graphQL server works, but not usual http://localhost:8000), and also npm run build fails with this stack trace:

axe312ger · 2018-07-09T14:55:47Z

Hmm thats very weird, looks like a Gatsby problem to me, for some reason it cant fine some files o.O

With the 50 seconds: Thats normal, primitive is a random algorithm so it might take some more or less time. But the settings here are maybe to crazy, it shouldn't take that long on your machine.

🤔

stefanjudis · 2018-07-23T08:44:57Z

@axe312ger I have to say I agree with @Bloomca here, that 50s might give users the impression that this is the overall development experience.

Any chance to only get the CSS fixes in? 😊

axe312ger · 2018-07-23T13:24:57Z

Alright. Here we go:

Mobile design: #25
Traced SVG: #26

axe312ger requested a review from stefanjudis May 17, 2018 20:40

axe312ger force-pushed the feat/sqip branch from 782fa66 to 21701b4 Compare May 17, 2018 22:38

axe312ger mentioned this pull request May 18, 2018

Traced/primitive svg previews #8

Closed

axe312ger changed the title ~~feat(sqip): implement sqip~~ feat(sqip): implement sqip && fix mobile layout May 18, 2018

axe312ger commented May 18, 2018

View reviewed changes

stefanjudis reviewed May 19, 2018

View reviewed changes

axe312ger force-pushed the feat/sqip branch from cc62819 to 5ebb7b0 Compare May 20, 2018 11:12

stefanjudis reviewed May 22, 2018

View reviewed changes

stefanjudis suggested changes May 22, 2018

View reviewed changes

axe312ger and others added 4 commits May 31, 2018 16:12

feat(sqip): implement sqip

92473ff

feat(header): responsive and adaptive header

f9e781a

fix(styling): proper responsive/adaptive grid layout

9616e41

add features section to the readme

2832bf7

axe312ger force-pushed the feat/sqip branch from 5ebb7b0 to 2832bf7 Compare May 31, 2018 14:17

add hint for the 61.8vh of the hero element

ecdcab4

axe312ger closed this Jul 23, 2018

axe312ger deleted the feat/sqip branch July 23, 2018 14:47

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

feat(sqip): implement sqip && fix mobile layout #13

feat(sqip): implement sqip && fix mobile layout #13

axe312ger commented May 17, 2018

axe312ger commented May 18, 2018

axe312ger May 18, 2018

axe312ger May 18, 2018

stefanjudis May 19, 2018 •

edited

Loading

axe312ger May 20, 2018

loudmouth May 21, 2018 •

edited

Loading

Khaledgarbaya May 21, 2018

loudmouth May 21, 2018

stefanjudis May 22, 2018

axe312ger May 30, 2018

stefanjudis May 30, 2018

stefanjudis left a comment •

edited

Loading

axe312ger commented May 30, 2018

axe312ger commented May 31, 2018

iammatthias commented Jul 3, 2018

Bloomca commented Jul 9, 2018

axe312ger commented Jul 9, 2018

Bloomca commented Jul 9, 2018

axe312ger commented Jul 9, 2018

Bloomca commented Jul 9, 2018 •

edited

Loading

axe312ger commented Jul 9, 2018

stefanjudis commented Jul 23, 2018

axe312ger commented Jul 23, 2018

feat(sqip): implement sqip && fix mobile layout #13

feat(sqip): implement sqip && fix mobile layout #13

Conversation

axe312ger commented May 17, 2018

axe312ger commented May 18, 2018

Choose a reason for hiding this comment

Choose a reason for hiding this comment

stefanjudis May 19, 2018 • edited Loading

Choose a reason for hiding this comment

Choose a reason for hiding this comment

loudmouth May 21, 2018 • edited Loading

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

stefanjudis left a comment • edited Loading

Choose a reason for hiding this comment

axe312ger commented May 30, 2018

axe312ger commented May 31, 2018

iammatthias commented Jul 3, 2018

Bloomca commented Jul 9, 2018

axe312ger commented Jul 9, 2018

Bloomca commented Jul 9, 2018

axe312ger commented Jul 9, 2018

Bloomca commented Jul 9, 2018 • edited Loading

axe312ger commented Jul 9, 2018

stefanjudis commented Jul 23, 2018

axe312ger commented Jul 23, 2018

stefanjudis May 19, 2018 •

edited

Loading

loudmouth May 21, 2018 •

edited

Loading

stefanjudis left a comment •

edited

Loading

Bloomca commented Jul 9, 2018 •

edited

Loading