Modern front-end development: skinny jeans and handlebar mustaches ITT

The Something Awful Forums > Discussion > Serious Hardware/Software Crap > The Cavern of COBOL > Modern front-end development: skinny jeans and handlebar mustaches ITT

«‹›235 »

huhu: Feb 24, 2006

Dogcow posted:

Can you post the outputted CSS?

code:

.fixed-nav ul li:last-child {
    border-left: 1px solid #cccccc;
}

<ul>
  <a data-scroll="" href="#home-page"><li>Home</li></a>
  <a data-scroll="" href="#filter-page"><li>Portfolio</li></a>
  <a data-scroll="" href="#about-page"><li>About</li></a>
  <a data-scroll="" href="#skills-page"><li>Skills</li></a>
</ul>

# ? Oct 6, 2016 00:38

Adbot: ADBOT LOVES YOU

# ? May 22, 2024 16:57

Dogcow: Jun 21, 2005

huhu posted:

code:


.fixed-nav ul li:last-child {
    border-left: 1px solid #cccccc;
}

<ul>
  <a data-scroll="" href="#home-page"><li>Home</li></a>
  <a data-scroll="" href="#filter-page"><li>Portfolio</li></a>
  <a data-scroll="" href="#about-page"><li>About</li></a>
  <a data-scroll="" href="#skills-page"><li>Skills</li></a>
</ul>

You've got the list item tag and the anchor tag reversed, the li should be on the outside and the a on the inside.

# ? Oct 6, 2016 00:42

huhu: Feb 24, 2006

Dogcow posted:

You've got the list item tag and the anchor tag reversed, the li should be on the outside and the a on the inside.

I could have sworn I read recently that it's now acceptable to wrap li tags in a tags. Guess not. That fixed it.

# ? Oct 6, 2016 00:50

Maluco Marinero: Jan 18, 2001; Damn that's a
fine elephant.

Even if it's acceptable it's wrong in terms of your CSS. You'd want the CSS to read: ul a:last-child li to target the final li.

# ? Oct 6, 2016 01:24

Sedro: Dec 31, 2008

huhu posted:

I could have sworn I read recently that it's now acceptable to wrap li tags in a tags. Guess not. That fixed it.

Every `li` in your markup is the last-child within its parent `a` tag

# ? Oct 6, 2016 01:28

an skeleton: Apr 23, 2012; scowls @ u

Hi, does anyone have experience with or suggestions for measuring stuff like load times and other user-related metrics in the browser (to send back to the server for analysis)? I'm interested in any libraries, platforms, roll-your-own techniques or whatever you've got.

# ? Oct 6, 2016 01:56

well why not: Feb 10, 2009

You mean something like GT Metrix or something like analytics' speed tools?

well why not fucked around with this message at 16:43 on Oct 6, 2016

# ? Oct 6, 2016 16:41

huhu: Feb 24, 2006

I have a collection of projects I want to filter through on a webpage. Currently I just have one filter for project category but was thinking of other things like which tools were used to build it, etc. All this data is currently stored in a database and I'm using Django to insert each project with its categories inserted as classes. Would this be the best way to have multiple filters setup with jQuery?

# ? Oct 6, 2016 17:25

Pollyanna: Mar 5, 2005; Milk's on them.

Dependency hell might suck but it's better than unorganized jQuery callbacks randomly peppered throughout server side templates.

# ? Oct 6, 2016 17:48

Count Thrashula: Jun 1, 2003; Death is nothing compared to vindication.; Buglord

Look at the stateofjs report, it's showing that hardly anyone uses Typescript with React, but I thought it was required for React to do its JSX stuff :psyduck:

I really don't understand this world.

# ? Oct 6, 2016 19:01

HaB: Jan 5, 2001; What are the odds?

COOL CORN posted:

Look at the stateofjs report, it's showing that hardly anyone uses Typescript with React, but I thought it was required for React to do its JSX stuff

I really don't understand this world.

You're thinking of Angular 2. JSX is more of a js/html mish mash.

# ? Oct 6, 2016 19:09

Count Thrashula: Jun 1, 2003; Death is nothing compared to vindication.; Buglord

HaB posted:

You're thinking of Angular 2. JSX is more of a js/html mish mash.

Maybe you're right. Phew, that's one less thing I have to consider if I want to switch to React!

# ? Oct 6, 2016 19:22

Flat Daddy: Dec 3, 2014; by Nyc_Tattoo

Most people use Babel for jsx syntax. You can also use typescript to use it (.tsx files) or just avoid jsx and write your react components with plain ol' functions

# ? Oct 6, 2016 23:24

luchadornado: Oct 7, 2004; A boombox is not a toy!

We're using a lot of React and Typescript at my new work, and I'm really digging Typescript so far. I also really like C#, so it's not that surprising.

Flat Daddy posted:

just avoid jsx and write your react components with plain ol' functions

Why would you ever do that to yourself?

# ? Oct 7, 2016 01:17

lunar detritus: May 6, 2009

Anyone using Typescript and Vue 2.0? The one thing I really liked about working with Angular 2 was TS so I'm hoping it's not too much of a pain to keep using TS with Vue.

# ? Oct 7, 2016 02:12

consensual poster: Sep 1, 2009

gmq posted:

Anyone using Typescript and Vue 2.0? The one thing I really liked about working with Angular 2 was TS so I'm hoping it's not too much of a pain to keep using TS with Vue.

According to the official Vue 2.0 announcement:

Evan You posted:

...vue core, vue-router and vuex 2.0 all have TypeScript typings shipped in the npm packages

# ? Oct 7, 2016 03:52

an skeleton: Apr 23, 2012; scowls @ u

well why not posted:

You mean something like GT Metrix or something like analytics' speed tools?

Yes, anything that could reveal useful metrics.

# ? Oct 7, 2016 06:34

Wheany: Mar 17, 2006; Spinya^{ha^{ha^haha}ha}ha_{ha_{ha_haha}ha}ha!; Doctor Rope

Is there a way to automatically install typings and webpack somehow project-locally with npm?

Currently, after cloning, my project requires npm install, typings install, webpack

Or do I just make a readme file that states that typings and webpack must be installed?

im sorry if im doing this wrong. it is difficult to write

# ? Oct 8, 2016 18:36

Lumpy: Apr 26, 2002; La! La! La! Laaaa!; College Slice

Wheany posted:

Is there a way to automatically install typings and webpack somehow project-locally with npm?

Currently, after cloning, my project requires npm install, typings install, webpack

Or do I just make a readme file that states that typings and webpack must be installed?

im sorry if im doing this wrong. it is difficult to write

Your question is a bit confusing, but if all your dependencies are in your package file, a single 'npm install' will install them all. If you mean you want to skip that step, then that's something else entirely.

# ? Oct 8, 2016 19:08

Wheany: Mar 17, 2006; Spinya^{ha^{ha^haha}ha}ha_{ha_{ha_haha}ha}ha!; Doctor Rope

Lumpy posted:

Your question is a bit confusing, but if all your dependencies are in your package file, a single 'npm install' will install them all. If you mean you want to skip that step, then that's something else entirely.

Like I said upthread, I followed https://www.typescriptlang.org/docs/handbook/react-&-webpack.html

After doing the tutorial, I converted an existing toy project to the structure.
It worked fine on the same computer, but then I cloned the repository to another computer and npm install works fine, but webpack doesn't work (because it's not installed). Also npm build does nothing.
After I run npm install webpack -g webpack complains "Could not load Typescript. Try installing with `npm install typescript`"
I install typescript and webpack complains that "A file specified in tsconfig.json could not be found". Typings is not installed either, so I have to install that (npm install typings -g) to run typings install
After I've done all that, webpack works just fine and builds my project under dist/.

How do I fix?
Specifically: How should a node project work?
What is the expected procedure for a freshly cloned project? just node install && node build ? (This is a toy project with static html, css, javascript and images. No server-side code, no ajax.)
If so, how do I get from

code:

git clone whatever
npm install
npm install typescript
npm install typings -g
typings install
npm install webpack -g
webpack

to the "node way"

# ? Oct 8, 2016 19:53

Depressing Box: Jun 27, 2010; Half-price sideshow.

Wheany posted:

Is there a way to automatically install typings and webpack somehow project-locally with npm?

Currently, after cloning, my project requires npm install, typings install, webpack

Or do I just make a readme file that states that typings and webpack must be installed?

im sorry if im doing this wrong. it is difficult to write

You can install typings, webpack, etc. locally, and run typings install in the postinstall script. I grabbed the sample React & Webpack project and reworked it to install everything locally:

https://github.com/oepn/typescript-local-test

EDIT: So that means your install process is down to:

code:

git clone whatever
npm install

Depressing Box fucked around with this message at 20:01 on Oct 8, 2016

# ? Oct 8, 2016 19:57

Lumpy: Apr 26, 2002; La! La! La! Laaaa!; College Slice

Wheany posted:

Like I said upthread, I followed https://www.typescriptlang.org/docs/handbook/react-&-webpack.html

After doing the tutorial, I converted an existing toy project to the structure.
It worked fine on the same computer, but then I cloned the repository to another computer and npm install works fine, but webpack doesn't work (because it's not installed). Also npm build does nothing.
After I run npm install webpack -g webpack complains "Could not load Typescript. Try installing with `npm install typescript`"
I install typescript and webpack complains that "A file specified in tsconfig.json could not be found". Typings is not installed either, so I have to install that (npm install typings -g) to run typings install
After I've done all that, webpack works just fine and builds my project under dist/.

How do I fix?
Specifically: How should a node project work?
What is the expected procedure for a freshly cloned project? just node install && node build ? (This is a toy project with static html, css, javascript and images. No server-side code, no ajax.)
If so, how do I get from
code:
git clone whatever
npm install
npm install typescript
npm install typings -g
typings install
npm install webpack -g
webpack
to the "node way"

The -g is global, so that is one issue, as that won't get picked up by npm install. If your goal is use by others, do local installs (no -g) flag and make sure you add --save or --save-dev so the dependencies are added to your package file. If there is other configuration after that (I don't use typescript/ typing) you can use an npm script to run whatever, so users only need 'npm install; npm your-command'

# ? Oct 8, 2016 20:04

Wheany: Mar 17, 2006; Spinya^{ha^{ha^haha}ha}ha_{ha_{ha_haha}ha}ha!; Doctor Rope

Depressing Box posted:

https://github.com/oepn/typescript-local-test

I will try to adapt that later. Thanks.

# ? Oct 8, 2016 20:18

Wheany: Mar 17, 2006; Spinya^{ha^{ha^haha}ha}ha_{ha_{ha_haha}ha}ha!; Doctor Rope

Okay, tried Depressing Box's method and while npm install works, webpack and npm build don't work.

This is on Windows 10, if that makes any difference.

# ? Oct 9, 2016 08:04

M31: Jun 12, 2012

You need to run 'npm run build', as 'npm build' is an internal NPM command. Also, typings is deprecated as of Typescript 2, so maybe you don't even need it.

# ? Oct 9, 2016 08:13

Wheany: Mar 17, 2006; Spinya^{ha^{ha^haha}ha}ha_{ha_{ha_haha}ha}ha!; Doctor Rope

M31 posted:

'npm run build'

Oooh.

# ? Oct 9, 2016 09:17

Lumpy: Apr 26, 2002; La! La! La! Laaaa!; College Slice

Firebase question!

In an app, you have Users, who can create Things. A User can see and edit their own Things. A User can also decide to let OtherUser view / edit some of their Things. I have the rules set up to allow this, so accessing data is not a problem, but this is: How does OtherUser see a list of "Things Shared With Me"?

My initial stab at how to structure this looks like so:

code:

/users/$user_id: {
    things: {
        $thing_id: { .... },
    },
    shares:  {
        $thing_id: {
            $other_user_id: true,
            ...
        },
    }
}

And that makes it easy to grant permission to $thing_id based on $other_user_id existing in the appropriate structure. What I want is "get me a list of $thing_ids in shares where my $user_id exists as a key inside". I'm thinking that maybe "shares" has to live outside the individual user space, but I'm still going to have that problem. The other option I'm seeing is flipping "shares" around, so that it's *writable* by anyone (but that seems like a security problem?) and when User shares, he actually writes in OtherUsers share list. That seems like it gets me the behavior I want: you simply look at your own "shares" list and that's it, but how do I handle $user_id then? Do I key off email address and access that via auth? The auth.token.email isn't guaranteed to be there, or is there some way to get the auth.uid of other users? :ohdear:

# ? Oct 10, 2016 14:35

luchadornado: Oct 7, 2004; A boombox is not a toy!

Are Gulp 4 / React Hot Loader 3 / Webpack 2 ever going stable? I can't suss out what the hold up is from browsing Github PRs/etc. and I'm hoping someone can chime in that has actually been following the status of these.

Also, it's awfully nice of gaearon to make RHL 3 beta the default npm version when it doesn't work with React Router and documentation is a mess.

# ? Oct 10, 2016 14:53

HaB: Jan 5, 2001; What are the odds?

Lumpy posted:

Firebase question!

In an app, you have Users, who can create Things. A User can see and edit their own Things. A User can also decide to let OtherUser view / edit some of their Things. I have the rules set up to allow this, so accessing data is not a problem, but this is: How does OtherUser see a list of "Things Shared With Me"?

My initial stab at how to structure this looks like so:
code:
/users/$user_id: {
    things: {
        $thing_id: { .... },
    },
    shares:  {
        $thing_id: {
            $other_user_id: true,
            ...
        },
    }
}
And that makes it easy to grant permission to $thing_id based on $other_user_id existing in the appropriate structure. What I want is "get me a list of $thing_ids in shares where my $user_id exists as a key inside". I'm thinking that maybe "shares" has to live outside the individual user space, but I'm still going to have that problem. The other option I'm seeing is flipping "shares" around, so that it's *writable* by anyone (but that seems like a security problem?) and when User shares, he actually writes in OtherUsers share list. That seems like it gets me the behavior I want: you simply look at your own "shares" list and that's it, but how do I handle $user_id then? Do I key off email address and access that via auth? The auth.token.email isn't guaranteed to be there, or is there some way to get the auth.uid of other users?

user_id isn't stored with the thing? Seems like it ought to be, if a user created thing. Wouldn't you ever want to know who created it?

If so - that solves your problem, and go with your second idea: each user keeps a list of what has been shared with them. If each thing has the creator_id stored with it - bam.

Edit: to expound a bit - it's not a security problem. I would only allow adding to the list, with a flag to revoke sharing permission. And a user can only update an item if the creator_id matches their user_id. So something like:

code:

var thing = {id: 1, creator_id: 1, data: 'look at my thing'};

shareThing(thingId, otherUserId, userId, <revoke> (optional));

// if (id != creatorId)  { // FAIL }
// if (revoke) {
//     if(thing already shared) { set shared to false }
//     else { do nothing }
//
// otherwise:  add thing if it doesn't exist in otherUser's share list, set shared property to true if it does
//

With the addition of a timestamp, you have the ability to keep a record of when something was last shared - which might be useful.

HaB fucked around with this message at 15:38 on Oct 10, 2016

# ? Oct 10, 2016 15:29

Lumpy: Apr 26, 2002; La! La! La! Laaaa!; College Slice

HaB posted:

user_id isn't stored with the thing? Seems like it ought to be, if a user created thing. Wouldn't you ever want to know who created it?

If so - that solves your problem, and go with your second idea: each user keeps a list of what has been shared with them. If each thing has the creator_id stored with it - bam.

Edit: to expound a bit - it's not a security problem. I would only allow adding to the list, with a flag to revoke sharing permission. And a user can only update an item if the creator_id matches their user_id. So something like:
code:
var thing = {id: 1, creator_id: 1, data: 'look at my thing'};

shareThing(thingId, otherUserId, userId, <revoke> (optional));

// if (id != creatorId)  { // FAIL }
// if (revoke) {
//     if(thing already shared) { set shared to false }
//     else { do nothing }
//
// otherwise:  add thing if it doesn't exist in otherUser's share list, set shared property to true if it does
//
With the addition of a timestamp, you have the ability to keep a record of when something was last shared - which might be useful.

I know the $user_id of who created the thing. But how does that user know the $user_id of the user with the email "fart@poo.com" to create the share?

# ? Oct 10, 2016 15:51

Depressing Box: Jun 27, 2010; Half-price sideshow.

Helicity posted:

Are Gulp 4 / React Hot Loader 3 / Webpack 2 ever going stable? I can't suss out what the hold up is from browsing Github PRs/etc. and I'm hoping someone can chime in that has actually been following the status of these.

Also, it's awfully nice of gaearon to make RHL 3 beta the default npm version when it doesn't work with React Router and documentation is a mess.

Webpack 2 seems like it's getting pretty close:

https://twitter.com/TheLarkInn/status/785486480781094912

# ? Oct 10, 2016 16:43

luchadornado: Oct 7, 2004; A boombox is not a toy!

Depressing Box posted:

Webpack 2 seems like it's getting pretty close:

That's awesome. I asked my new team how they felt about Gulp and all of them are frustrated with the direction it's gone (hasn't gone) since the original maintainer left the project. Looks like we're just rocking Webpack 2 and then writing npm/bash scripts for anything else we need.

# ? Oct 10, 2016 17:34

Lumpy: Apr 26, 2002; La! La! La! Laaaa!; College Slice

Lumpy posted:

I know the $user_id of who created the thing. But how does that user know the $user_id of the user with the email "fart@poo.com" to create the share?

So, after looking around and reading far too many SO answers, I determined I basically have to store user data myself in the DB and use that as a way to do email based lookups. So when a user logs in, if they have an email, I set a /userList/$sanitized_email: {uid: $uid} type thing and then can do matching based on that. Definitely a mind-bending experience after only using RDBS to date!

# ? Oct 10, 2016 18:07

HaB: Jan 5, 2001; What are the odds?

Lumpy posted:

So, after looking around and reading far too many SO answers, I determined I basically have to store user data myself in the DB and use that as a way to do email based lookups. So when a user logs in, if they have an email, I set a /userList/$sanitized_email: {uid: $uid} type thing and then can do matching based on that. Definitely a mind-bending experience after only using RDBS to date!

Oh my bad. I figured you were doing this anyway, so like - when a user logged in, you had their user_id on-hand, and could also look up another user's id the same way.

# ? Oct 11, 2016 12:23

The Merkinman: Apr 22, 2007; I sell only quality merkins. What is a merkin you ask? Why, it's a wig for your genitals!

Depressing Box posted:

Webpack 2 seems like it's getting pretty close:

https://twitter.com/TheLarkInn/status/785486480781094912

Oh, good thing I haven't fully learned Webpack yet since I'm sure it's completely useless now. Yay Front-end development!

# ? Oct 11, 2016 14:33

Depressing Box: Jun 27, 2010; Half-price sideshow.

The Merkinman posted:

Oh, good thing I haven't fully learned Webpack yet since I'm sure it's completely useless now. Yay Front-end development!

Part of the reason they're working so hard on the new version is to make it easier to understand, with better documentation and plenty of examples. They feel your pain.

# ? Oct 11, 2016 15:25

Lumpy: Apr 26, 2002; La! La! La! Laaaa!; College Slice

HaB posted:

Oh my bad. I figured you were doing this anyway, so like - when a user logged in, you had their user_id on-hand, and could also look up another user's id the same way.

No worries, and I appreciate your help! I went to Art School, so my baseline competence is far below the norm.... you should see my figure drawing though!

# ? Oct 11, 2016 16:14

dupersaurus: Aug 1, 2012; Futurism was an art movement where dudes were all 'CARS ARE COOL AND THE PAST IS FOR CHUMPS. LET'S DRAW SOME CARS.'

Lumpy posted:

No worries, and I appreciate your help! I went to Art School, so my baseline competence is far below the norm.... you should see my figure drawing though!

BFA programmers :hfive:

# ? Oct 11, 2016 16:22

Count Thrashula: Jun 1, 2003; Death is nothing compared to vindication.; Buglord

Hahaha if you think most programmers actually went to school for programming. Out of four of us in my group, only one did.

# ? Oct 11, 2016 17:11

Adbot: ADBOT LOVES YOU

# ? May 22, 2024 16:57

Stoatbringer: Sep 15, 2004; naw, you love it you little ho-bot

The Merkinman posted:

Oh, good thing I haven't fully learned Webpack yet since I'm sure it's completely useless now. Yay Front-end development!

Just wait a few weeks for the Next Big Thing, again.

# ? Oct 11, 2016 17:14

The Something Awful Forums > Discussion > Serious Hardware/Software Crap > The Cavern of COBOL > Modern front-end development: skinny jeans and handlebar mustaches ITT

«‹›235 »