Support NeoGAF

[grmlin]

Hey, I've got this challenging scenario that seems to be difficult to do in web design.

.
It needs to be responsive. So I'd want live text where it says "Section Title", an image or logo in the center, and a button that has a partially transparent fill that could have a hover effect. It's important that the lines don't touch the button or the text on top and that when the image resizes, the background adjusts to fit its container. The line lengths on the sides must resize up until mobile resolutions, which would drop it completely.

I have an idea how to do some of it, except when the lines don't touch. I'd think SVG clipping?

Uh, I like solving riddles like that

I hope you can use flexbox, it makes things a lot easier. Could be solved without too, but would be less elegant.

http://codepen.io/grmlin/full/zKqRZL/

 

[runningjoke]

Uh, I like solving riddles like that

I hope you can use flexbox, it makes things a lot easier. Could be solved without too, but would be less elegant.

http://codepen.io/grmlin/full/zKqRZL/

You should probably use border-top/bottom-left/right-radius instead of just border-radius for the box__wrapper::before/after selectors, because in not-chrome you can see a tiny corner on the wrong side.

 

[grmlin]

You should probably use border-top/bottom-left/right-radius instead of just border-radius for the box__wrapper::before/after selectors, because in not-chrome you can see a tiny corner on the wrong side.

Ah, lazy me only used chrome

Using specific border-radius styles now, looks ok in chrome/ff/safari on a mac.

 

[-COOLIO-]

So angular 2 is officially out now. Thoughts? Anyone going prod with it?

 

[Somnid]

So angular 2 is officially out now. Thoughts? Anyone going prod with it?

I thought Typescript was okay but it overuses the fake js imports which need to be handled build-side and created a huge mess. Not using typescript was rather painful and less documented. Otherwise it was a lot simpler than older versions of angular, but at this rate if I were to choose something organized like that I'd probably lean more toward polymer which is closer to native web-components.

 

[Lister]

I thought Typescript was okay but it overuses the fake js imports which need to be handled build-side and created a huge mess. Not using typescript was rather painful and less documented. Otherwise it was a lot simpler than older versions of angular, but at this rate if I were to choose something organized like that I'd probably lean more toward polymer which is closer to native web-components.

Fake js imports? Explain.

I've dabbled with the last couple fo release candidates and enjoyed workign with it.

I love Typescript over js 99% of the time. But I probably won't move or start any big projects in angular 2 until a few revisions down the line. once the product matures a bit and the community is got us covered in case of issues. And also when there's a mature CLI to go along with it. Would be cool to have out of the box tooling, not that setting it up currently is much of an issue, but it would help get new people going faster.

Also no Angular Material support for a while yet is another reason I can't move on it now.

The main plus over angular 1.5 (using ESnext and modules + webpack, which is what I use currently) is performance.

 

[Somnid]

Fake js imports? Explain.

I've dabbled with the last couple fo release candidates and enjoyed workign with it.

I love Typescript over js 99% of the time. But I probably won't move or start any big projects in angular 2 until a few revisions down the line. once the product matures a bit and the community is got us covered in case of issues. And also when there's a mature CLI to go along with it. Would be cool to have out of the box tooling, not that setting it up currently is much of an issue, but it would help get new people going faster.

Also no Angular Material support for a while yet is another reason I can't move on it now.

The main plus over angular 1.5 (using ESnext and modules + webpack, which is what I use currently) is performance.

It polyfills js imports.

import xxx from "module"

But it actually doesn't because it's not polyfillable, rather the build setup has to transform that into something else. This ruins the nice simple transformation typescript has going for it and requires a module system. Also, because the build handles it, the paths are file system relative rather than url relative and it was confusing, unpleasant and the code was not transferrable to spec imports because of it.

 

[Royal_Phalanx]

Either do freelance work to build up some references and work you can demonstrate, or create a good portfolio with a diverse set of projects on your own.

So build something that connects to a backend that saves and loads some data from a database. Build an SPA. Build something that uses open data sets that you connect to through an API and visualize the data with some charting lib or d3js if you want to be really fancy. Build some little game.

I hope these things will sound less daunting the more I practice.

 

[megarockexe]

Uh, I like solving riddles like that

I hope you can use flexbox, it makes things a lot easier. Could be solved without too, but would be less elegant.

http://codepen.io/grmlin/full/zKqRZL/

Oh yeah, that seems to work as expected. It didn't look too hard since it's build out of separate segments.
However, if the same example were to be changed to have the outer container have a fill that clips with the button in this particular way, I think it gets a lot tougher.
It's even complicated to mock up in Photoshop, so maybe it's impractical to pursue.

 

[grmlin]

Oh yeah, that seems to work as expected. It didn't look too hard since it's build out of separate segments.
However, if the same example were to be changed to have the outer container have a fill that clips with the button in this particular way, I think it gets a lot tougher.
It's even complicated to mock up in Photoshop, so maybe it's impractical to pursue.

Yes, that's a little complicated.

You could try CSS blend modes, but they are tricky to use.
Or, if nothing helps, JavaScript is always there to help. I don't like to use it as a CSS helper though.

Edit: I would go the SVG route I think and use masks.

 

[kodecraft]

Is hand coding a responsive site(media queries) still a thing? Or are y'all just Bootstrapping it?

I've got a few website projects I need to make responsive(PSD to HTML). I ask because I'm still potentially a noob at all this on a basic level.

CSS positioning, Images, and hand coding a responsive site give me fits.

 

[Tathanen]

I "hand code" 100% of my HTML/CSS. I'll go whole-hog on JS frameworks and the like (Angular these days) but my HTML/CSS is always from scratch, it's my favorite part.

 

[grmlin]

If you don't build a site that's designed 100% around a CSS framework like bootstrap, there will always be a moment where it starts standing in your way and you'll overwrite tons of styles.

I use smaller libs a lot though, grids and the like I can use to build my CSS. I hate external CSS classes I have to use that are not BEM.

 

[Somnid]

Is hand coding a responsive site(media queries) still a thing? Or are y'all just Bootstrapping it?

I've got a few website projects I need to make responsive(PSD to HTML). I ask because I'm still potentially a noob at all this on a basic level.

CSS positioning, Images, and hand coding a responsive site give me fits.

Many of the projects I work on may include bootstrap but it's usually insufficient to get the appropriate design or the markup has to be used differently for another branded site. Typically I just do the layout by hand.

 

[Lister]

Same. Bootstrap or material are great places to start. Replicating that stuff, unless you're part of a team, is just not cost/time effective.

You then override the SASS or CSS code and otherwise extend it, when you need to.

 

[PetriP-TNT]

We use Bootstrap in nearly every project and so far I haven't seen a layout that couldn't be mostly done with Bootstrap. It's incredibly modular and easily modifiable, v4 even more so than v3. To get the most out of BS (or similar) requires some amount of knowledge how the whole thing works under the hood, obviously, but when you consider it as the best toolbox around instead of a ready made house, it's just really, really powerful.

 

[The Albatross]

I use Bootstrap or Foundation for virtually everything. But I don't do many straight PSD -> Website conversions. Now a days, there's usually a conversation/compromise between the developer and designer, as the designers might not be rational when it gets to responsive.

 

[TheLostBigBoss]

So I had an original question, but I just ran into something that supersedes it. I'm in ASP.NET

I'm using knockoutjs. I have one main model that has a list of two other:

I need to allow the user to upload the file and send it to the server, and I also need to validate that the "select file" box actually has a file being sent when the user submits the model to the ajax call, and if there is nothing there, prevent the ajax call from firing off.

Note, the data binds correctly and when the user does submit to the controller, the data is correctly being sent, except for the HttpPostedFileBase

public class EditTestStepViewModel

public string TestStepName {get;set;}
public int TestStepId {get;set;}
public HttpPostedFileBase XmlFile {get;set;}
public List<StringParameterViewModel> StringParameters {get;set;}
public List<XmlParameterViewModel> XmlParameters {get;set;}

public class StringParameterViewModel

public string ParameterName{get;set;}
public string StringValue{get;set;}

public class XmlParameterViewModel

public string ParameterName{get;set;}
public HttpPostedFileBase XmlFile{get;set;}

Here is the EditTestStep.js file

var StringParameterViewModel = function(data) {
    var self = this;

    if (data != null) {
        ko.mapping.fromJS(data, stringParameterMapping, self);
    } else {
        self.ParameterName = ko.observable().extend({
            required: {message: 'Please enter a parameter name.'}
        });
        self.StringValue = ko.observable().extend({
            required: { message: 'A value for the parameter is needed.' }
        });

    }
}

var XmlParameterViewModel = function (data) {
    var self = this;

    if (data != null) {

        ko.mapping.fromJS(data, xmlParameterMapping, self);
    } else {
        self.ParameterName = ko.observable().extend({
            required: true
        });
        self.XmlValue = ko.observable().extend({
            required: true
        });
    }
}

var xmlParameterMapping = {
    craete: function(options) {
        return XmlParameterViewModel(options.data);
    }
}


var stringParameterMapping = {
    create: function(options) {
        return StringParameterViewModel(options.data);
    }
}

var editTestStepMapping = {
    create: function(options) {
        return EditTestStepViewModel(options.data);
    }
}

var EditTestStepViewModel = function(data) {
    var self = this;
    ko.mapping.fromJS(data, {}, self);


    self.saveTestStep = function() {
        var dataToSend = ko.mapping.toJSON(self);

        $.ajax({
            url: "/Home/SaveEdit/",
            type: "POST",
            contentType: "application/json",
            data: dataToSend
        });
    };

}


var validationOptions = {
    insertMessages: true,
    decorateElement: true,
    errorElementClass: 'errorCSS',
    messagesOnModified: true,
    debug: true,
    registerExtenders: true,
    grouping: {
        deep: true,
        observable: false //Needed so added objects AFTER the initial setup get included
    }
};

ko.validation.init(validationOptions, true);

@using System.Web.Script.Serialization
@model MvcNewPatternsDemo.Models.EditTestStepViewModel


@{ string data = new JavaScriptSerializer().Serialize(Model);}

@{
    ViewBag.Title = "Home Page";
}
@section scripts{

    
    <script src="~/Scripts/knockout-3.4.0.js"></script>
    <script src="~/Scripts/knockout.validation.js"></script>
    <script src="~/Scripts/knockout.mapping-latest.js"></script>
    <script src="~/Scripts/jquery-1.10.2.js"></script>
    <script src="~/Scripts/EditTestStep.js"></script>
    <script type="text/javascript">
        var editTestStepViewModel = new EditTestStepViewModel(@Html.Raw(data));
        ko.applyBindingsWithValidation(editTestStepViewModel);
    </script>
    }

<form enctype="multipart/form-data">

    <input class="form-control" name="ParameterName" data-bind="value: TestStepName.extend({required: true})"/>
    <input class="form-control" name="TestStepId" data-bind="value: TestStepId" disabled="disabled"/>
    <input name="XmlFile" type="file" class="form-control input-sm"/>


    <table class="table table-striped">
        <tr>
            <th>Parameter Name</th>
            <th>Parameter Value</th>
        </tr>
        

        <tbody data-bind="foreach: StringParameters">
        <tr>
            <td class="form-group"> <input name="ParameterName" class="form-control input-sm" data-bind="value: ParameterName.extend({required: true})"/></td>
            <td class="form-group"> <input name="StringValue" class="form-control input-sm" data-bind="value: StringValue.extend({required: true})"/></td>
        </tr>
        </tbody>

    </table>

    <table class="table table-striped">
        <tr>
            <th>XmlPara</th>
        </tr>

        <tbody data-bind="foreach: XmlParameters">
            <tr>
                <td class="form-group"> <input name="ParameterName" class="form-control input-sm" data-bind="value: ParameterName.extend({required: true})" /></td>
                <td class="form-group"> <input name="XmlValue" class="form-control input-sm" data-bind="value: XmlValue.extend({required: true})" /></td>
            </tr>
        </tbody>

    </table>


</form>




<div class="row">
    <button data-bind="click: saveTestStep, enable: isValid()" type="submit">Save Test Step</button>
    <button data-bind="click: checkValid"type="button">Check Valid</button>
</div>

I'm extremely new to knockout, like this is my tenth day trying to work on it, this is basically my crash course introduction into javascript, so I'm sure I'm doing tons of things wrong.

 

[PetriP-TNT]

Not that familiar with KnockoutJS, but there's a typo in the "create" method here:

var xmlParameterMapping = {
    craete: function(options) {
        return XmlParameterViewModel(options.data);
    }
}

 

[TheLostBigBoss]

Not that familiar with KnockoutJS, but there's a typo in the "create" method here:

var xmlParameterMapping = {
    craete: function(options) {
        return XmlParameterViewModel(options.data);
    }
}

Didn't fix my issue, but it did fix something else that was confusing me, so thanks for the spell check lol

 

[Somnid]

So I had an original question, but I just ran into something that supersedes it. I'm in ASP.NET

I'm using knockoutjs. I have one main model that has a list of two other:

I need to allow the user to upload the file and send it to the server, and I also need to validate that the "select file" box actually has a file being sent when the user submits the model to the ajax call, and if there is nothing there, prevent the ajax call from firing off.

Note, the data binds correctly and when the user does submit to the controller, the data is correctly being sent, except for the HttpPostedFileBase

You didn't post where isValid and checkValid are defined but all you need to do is wrap your ajax call in an if statement and run it if isValid is true.

 

[TheLostBigBoss]

You didn't post where isValid and checkValid are defined but all you need to do is wrap your ajax call in an if statement and run it if isValid is true.

oh, sorry, I actually had those defined before I copied over the code, I actually removed them because they weren't working.

I wrapped the ajax call in the isValid if statement, but I'm getting thrown a javascript error,

Uncaught ReferenceError: isValid is not defined

EditTestStepViewModel.self.saveTestStep                 @EditTestStep.js:61
(anonymous function)	                                @knockout-3.4.0.js:89
dispatch	                                        @jquery-1.10.2.js:5109
elemData.handle	                                        @jquery-1.10.2.js:4780

It's actually why I dumped the code, because I looked online for the same error, saw solutions, but could never get them to work.

This was actually the question I had before I saw that I couldn't upload files with knockout/ajax. I guess I have to use formdata to get the file to the controller, but I'm confused how that's going to work with the client side model being converted to form data, as well as the lists I have

 

[Somnid]

oh, sorry, I actually had those defined before I copied over the code, I actually removed them because they weren't working.

I wrapped the ajax call in the isValid if statement, but I'm getting thrown a javascript error,

Uncaught ReferenceError: isValid is not defined

EditTestStepViewModel.self.saveTestStep                 @EditTestStep.js:61
(anonymous function)	                                @knockout-3.4.0.js:89
dispatch	                                        @jquery-1.10.2.js:5109
elemData.handle	                                        @jquery-1.10.2.js:4780

It's actually why I dumped the code, because I looked online for the same error, saw solutions, but could never get them to work.

This was actually the question I had before I saw that I couldn't upload files with knockout/ajax. I guess I have to use formdata to get the file to the controller, but I'm confused how that's going to work with the client side model being converted to form data, as well as the lists I have

There's probably no global isValid. Given the usage I think you put it on a viewModel which is why it's not finding it. Use the one on the viewModel.

 

[TheLostBigBoss]

There's probably no global isValid. Given the usage I think you put it on a viewModel which is why it's not finding it. Use the one on the viewModel.

There isn't a function isValid( ) defined in the viewModel, should I be over-writing it and making my own?

 

[kodecraft]

Thanks for all the replies guys .

I "hand code" 100% of my HTML/CSS. I'll go whole-hog on JS frameworks and the like (Angular these days) but my HTML/CSS is always from scratch, it's my favorite part.

Awesome. I'm like this too. Are you "hand-coding" in a production environment ot on your own/client projects ?

If you don't build a site that's designed 100% around a CSS framework like bootstrap, there will always be a moment where it starts standing in your way and you'll overwrite tons of styles.

This usually only concerns responsive design though right ?

Many of the projects I work on may include bootstrap but it's usually insufficient to get the appropriate design or the markup has to be used differently for another branded site. Typically I just do the layout by hand.

I agree with this. You can "tell" a Bootstrap site from it's layout or even the responsive behavior imo.

Same. Bootstrap or material are great places to start. Replicating that stuff, unless you're part of a team, is just not cost/time effective.

You then override the SASS or CSS code and otherwise extend it, when you need to.

Wouldn't this be time consuming though?

Lean CSS is where it's at for me. Bootstrap and Foundation can come bloated without some tweaking. But, I also know in a production environment things need to move fast so these frameworks are in heavy use.

We use Bootstrap in nearly every project and so far I haven't seen a layout that couldn't be mostly done with Bootstrap. It's incredibly modular and easily modifiable, v4 even more so than v3. To get the most out of BS (or similar) requires some amount of knowledge how the whole thing works under the hood, obviously, but when you consider it as the best toolbox around instead of a ready made house, it's just really, really powerful.

Cool.

I use Bootstrap or Foundation for virtually everything. But I don't do many straight PSD -> Website conversions. Now a days, there's usually a conversation/compromise between the developer and designer, as the designers might not be rational when it gets to responsive.

I've got a project I'll be working on soon that's like this. The design is cool until it hit mobile and there are some design choices that aren't best practice for the smaller screens.

 

[Tathanen]

Awesome. I'm like this too. Are you "hand-coding" in a production environment ot on your own/client projects ?

Both personal and professional projects. We're a pretty custom studio, our designers have carte blanche to make basically whatever they want, and we employ web devs that are excellent at from-scratch work. We generally share the sentiment that we're adept enough at HTML/CSS that frameworks usually just get in our way. (Though we're certainly not above inserting a pre-made calendar or carousel widget here and there.)

We do use LESS tho, if you wanna consider that a framework.

 

[grmlin]

...

This usually only concerns responsive design though right ?

...

No, that will be a problem for all sites. You'll have to adjust bootstrap or any other framework to work the way you need it.


We do use external libraries of course. I don't want to invent every wheel again and again on my own. But I'm a friend of smaller pieces.

 

[Lister]

Thanks for all the replies guys .


Wouldn't this be time consuming though?

Not really. These frameworks serve up sass/Less so you can achieve an amazing amount of things just by tweaking a few variables.

Definitely don't touch the output CSS.

 

[jokkir]

Can someone help with an issue I have.

I'm trying to get the top offset a user has scrolled down in a fixed positioned modal.

var topOffsetContent = modalContent.offsetTop;
            console.log('topOffsetContent: ', topOffsetContent);

            var topOffsetModal = modal.offsetTop;
            console.log('topOffsetModal: ', topOffsetModal);

These both return 0 even though scrolldown a bit in the modal.

The modal is positioned fixed in the middle and is overflow: scroll to scroll through the modal contents (and that scroll is what I'm trying to get the top offset from)

 

[Yeoman]

Does anyone know how to get XAMPP on macOS Sierra to send emails with the PHP mail function?
It works if I use PHP's own built in web server. But I can't seem to get it to work with XAMPP.

 

[Maiar_m]

I seem to recall there are some of you here that were very enthusiastic about React.js?

After learning a bit of Ember and having done some work with Angular<2, I've got to admit I'm fairly lost when it comes to React. I grasp the ReactDOM.render stuff fairly well, I think, I even find JSX somewhat enjoyable, but I completely fail to understand the advantages of the framework or the tooling it requires. I've done their tutorial and after it I felt like I wasn't at all ready to use the thing to an extent I had rarely experienced before. It was like trying to learn how to read but only being taught the word "alphabet".

And there's that "well now my template is split all over, and it's in a .jsx file, and my html is weird, and wut?" state of mind I seem to come back to very fast.

Any ressource, any tip on how you all got your heads around it all? Thanks :/

 

[PetriP-TNT]

I seem to recall there are some of you here that were very enthusiastic about React.js?

After learning a bit of Ember and having done some work with Angular<2, I've got to admit I'm fairly lost when it comes to React. I grasp the ReactDOM.render stuff fairly well, I think, I even find JSX somewhat enjoyable, but I completely fail to understand the advantages of the framework or the tooling it requires. I've done their tutorial and after it I felt like I wasn't at all ready to use the thing to an extent I had rarely experienced before. It was like trying to learn how to read but only being taught the word "alphabet".

And there's that "well now my template is split all over, and it's in a .jsx file, and my html is weird, and wut?" state of mind I seem to come back to very fast.

Any ressource, any tip on how you all got your heads around it all? Thanks :/

How long have you been creating web apps? What's the most complex thing you have created? Have you had to maintain old projects? Have you ever wanted/needed to use a part of your old code in a new app?

If answer to most or some of those questions is a negative one, the benefits might not be immediately obvious. There's a billion ways to make a hello world app, or something slightly more complex ones like To-Do lists and most likely there's an easier or faster way to do that with React (or Angular or Ember). But when you are past that point, there's the time where React really starts to shine.

It's a great combination of

- scalability (through modularity and composability)
- great ecosystem (through tooling and 3rd party libraries)
- catering to various crowds (by being much less opinionated due to it's library nature than popular frontend frameworks like Angular, Ember, or Rails)
- speed (both in practice as in development time)
- and ease of use

Pete Hunts react-howto is a good starting point: https://github.com/petehunt/react-howto/blob/master/README.md

as is Dan Abramovs React Makes You Sad https://github.com/gaearon/react-makes-you-sad

 

[Somnid]

I seem to recall there are some of you here that were very enthusiastic about React.js?

After learning a bit of Ember and having done some work with Angular<2, I've got to admit I'm fairly lost when it comes to React. I grasp the ReactDOM.render stuff fairly well, I think, I even find JSX somewhat enjoyable, but I completely fail to understand the advantages of the framework or the tooling it requires. I've done their tutorial and after it I felt like I wasn't at all ready to use the thing to an extent I had rarely experienced before. It was like trying to learn how to read but only being taught the word "alphabet".

And there's that "well now my template is split all over, and it's in a .jsx file, and my html is weird, and wut?" state of mind I seem to come back to very fast.

Any ressource, any tip on how you all got your heads around it all? Thanks :/

Haven't used it much but it seems to have a slight speed advantage over angular, and it generally doesn't let you do the same sort of two-way bind non-sense between components that I see in angular a lot (quickly become unmaintainable). Redux looks like the way I'd use react as it has all the nice immutability properties you'd see in functional programming. Probably not the speediest but if your large app runs well enough it would certainly be easy to maintain.

 

[Maiar_m]

How long have you been creating web apps? What's the most complex thing you have created? Have you had to maintain old projects? Have you ever wanted/needed to use a part of your old code in a new app?

If answer to most or some of those questions is a negative one, the benefits might not be immediately obvious. There's a billion ways to make a hello world app, or something slightly more complex ones like To-Do lists and most likely there's an easier or faster way to do that with React (or Angular or Ember). But when you are past that point, there's the time where React really starts to shine.

It's a great combination of

- scalability (through modularity and composability)
- great ecosystem (through tooling and 3rd party libraries)
- catering to various crowds (by being much less opinionated due to it's library nature than popular frontend frameworks like Angular, Ember, or Rails)
- speed (both in practice as in development time)
- and ease of use

Pete Hunts react-howto is a good starting point: https://github.com/petehunt/react-howto/blob/master/README.md

as is Dan Abramovs React Makes You Sad https://github.com/gaearon/react-makes-you-sad

About 4 years, using symfony and twig, I'm an UI dev. The most complex thing UI-wise must have been an SEO suite. Old projects are projects I was involved on, so I'm mostly fine. I recycle code often, but rewrite when it's just too outdated.

Right now, I don't see the benefits you listed. I do see it being less opinionated and modulated (scattered, even) and I understand how it might be helpful for some, I just can't figure it out within my own needs. Ease-of-use I'm not getting at all yet, it seems very counterintuitive to me. I am indeed more at the stage where I see the need for ember / angular or another front-end framework, but right now, I fail to see React as a contender. Yet.

There's probably a lot (like, A LOT) of my view on the subject that's pure inexperience and UI dev inadequacies so I really appreciate the links and will dig through them tomorrow.

Haven't used it much but it seems to have a slight speed advantage over angular, and it generally doesn't let you do the same sort of two-way bind non-sense between components that I see in angular a lot (quickly become unmaintainable). Redux looks like the way I'd use react as it has all the nice immutability properties you'd see in functional programming. Probably not the speediest but if your large app runs well enough it would certainly be easy to maintain.

Right. The new app React is considered for will be rather large, with loads of chart modules and so on. Speed would be great.

 

[PetriP-TNT]

About 4 years, using symfony and twig, I'm an UI dev. The most complex thing UI-wise must have been an SEO suite. Old projects are projects I was involved on, so I'm mostly fine. I recycle code often, but rewrite when it's just too outdated.

Right now, I don't see the benefits you listed. I do see it being less opinionated and modulated (scattered, even) and I understand how it might be helpful for some, I just can't figure it out within my own needs. Ease-of-use I'm not getting at all yet, it seems very counterintuitive to me. I am indeed more at the stage where I see the need for ember / angular or another front-end framework, but right now, I fail to see React as a contender. Yet.

Yeah, like said, the non-"batteries included" way of React gives the choice of finding the best way for the developers, which is something that might be hard to overcome at first. However, when you find your own way (as in in your team, or as in "the React way") of working, the leaness and flexibility of React starts to shine.

If you want a more opinionated way of doing things, check out https://github.com/facebookincubator/create-react-app. It's a opinionated way of doing React things with zero configuration. On the plus side they offer a way of ejecting out of the "create-react-app" experience at any point and allowing to roll in your own way of working without losing any progress. Which I think is pretty brilliant.

 

[kevm3]

I seem to recall there are some of you here that were very enthusiastic about React.js?

After learning a bit of Ember and having done some work with Angular<2, I've got to admit I'm fairly lost when it comes to React. I grasp the ReactDOM.render stuff fairly well, I think, I even find JSX somewhat enjoyable, but I completely fail to understand the advantages of the framework or the tooling it requires. I've done their tutorial and after it I felt like I wasn't at all ready to use the thing to an extent I had rarely experienced before. It was like trying to learn how to read but only being taught the word "alphabet".

And there's that "well now my template is split all over, and it's in a .jsx file, and my html is weird, and wut?" state of mind I seem to come back to very fast.

Any ressource, any tip on how you all got your heads around it all? Thanks :/

I find Angular 2 much preferable to Angular 1 and from what I've experienced of React. It's much easier to see the benefits as it has most of the things you'd want when building an app right out of the box. The benefits are much more apparent in Angular 2, such as localized CSS, out of the box router and fairly simple structure of components being nested within and interacting with components. Typescript being the standard out of the box for Angular 2 is also a huge deal to me. Typescript is great.

 

[Lister]

I find Angular 2 much preferable to Angular 1 and from what I've experienced of React. It's much easier to see the benefits as it has most of the things you'd want when building an app right out of the box. The benefits are much more apparent in Angular 2, such as localized CSS, out of the box router and fairly simple structure of components being nested within and interacting with components. Typescript being the standard out of the box for Angular 2 is also a huge deal to me. Typescript is great.

I agree. Inspite of my current project being angular 2 and being a bit fo a nightmare.

I'm dealing with legacy webservices that spit out prety complex html. I would have leveraged Angular 1 if I had a choice, but I didn't, and parsing all that HTML is all sort of terrible.

Would love to still have Angular 1's on the fly compile function so I could atleast create directives out fo the incoming HTML, but I cna't do that either.

I have service that is doing all the DOM manipulation after I serve the html to the app via jquery, and it feels all sort of wrong.

Another app is more straightforward and is built around modern web services that spit out objects, so that's been fun. But man, I spent like a day trying to figure out why DOM manipulation on the Html I was binding to an element wasn't working at all. It looks like if you run the string through the sanitizer service and mark it as safe Html, you can't alter it. Every reference to every elemt points to a shodow DOM??? element. Frustration. Specially with it being so new and apparently no one out there has had to deal with this kind of thing on Stock Overflow yet.

I'm thinking of takign the time to turn what the services throw out at me into some sort of metadata object and then using some type of recursive rendering on the template to render, so everything is being done the "angular way". But the amount of work that might take scares me, especially since the Html content coming fromt he service changes all the time.

 

[diaspora]

Anyone else going to WebSummit in Lisbon in November?

 

[Wolf Akela]

So... I just ran into a bug. If you have apps like Task Manager running, it somehow triggers mouse move in your browser. Apparently it's been a bug for years. Other apps trigger it too like Resource Monitor, HeidiSQL, flux, etc

What the hell man.

 

[Martal]

Im looking to get into Wordpress development and I'm very tempted by some of these Udemy courses they have on sale, such as this one : https://www.udemy.com/the-complete-wordpress-theme-developer-course/

I am attracted by the comprehensive nature of it. I feel like with Wordpress, I dont even know what I dont know, if that makes sense.

I wanted to ask if someone had any recommendations about how to go about learning to create Custom Themes and in general, what do I need to know for WP dev?

 

[Copons]

Im looking to get into Wordpress development and I'm very tempted by some of these Udemy courses they have on sale, such as this one : https://www.udemy.com/the-complete-wordpress-theme-developer-course/

I am attracted by the comprehensive nature of it. I feel like with Wordpress, I dont even know what I dont know, if that makes sense.

I wanted to ask if someone had any recommendations about how to go about learning to create Custom Themes and in general, what do I need to know for WP dev?

Well pretty much PHP and a bunch of custom WP functions.

If you already know your way around web development, I'd suggest you to skip the courses and start by getting your hands dirty with the first tutorial you find that you like how it's written.
Once you understand the file hierarchy (meaning: you now know your way around the code and its flow), when you'll be unsure of how to approach a certain problem, look into the official WP themes that are included in your installation (ie. Twenty Sixteen) and see how they solved it.

And the rest you'll get with a bit of experience. So keep creating new themes, experiment on it and occasionally check out how the big themes creators work (even tho, they usually have their own infrastructure, that even if great and all, it's not really the useful when you want to learn vanilla WP).

 

[The Albatross]

Im looking to get into Wordpress development and I'm very tempted by some of these Udemy courses they have on sale, such as this one : https://www.udemy.com/the-complete-wordpress-theme-developer-course/

I am attracted by the comprehensive nature of it. I feel like with Wordpress, I dont even know what I dont know, if that makes sense.

I wanted to ask if someone had any recommendations about how to go about learning to create Custom Themes and in general, what do I need to know for WP dev?

With theme development, I'd strongly suggest starting with a theme called _underscores -- http://underscores.me/

Underscores is an unstyled theme that gives you the starting point for creating custom themes with basically nothing else. It just has the bare file structure, stylesheets, and files that you need to start working on a WordPress theme.

The idea behind wordpress development is that you overwrite all of the core functionality of wordpress in your Theme or Plugins directory. As you're starting out, just focus on your theme directory (because, really, plugins are just extensions of your theme as well... You could include all of your plugin work in your theme's directory and the site would function the same). You basically overwrite the core functionality in your theme, and most developers do so around the WP Template Heirarchy.

If you click that link: https://wphierarchy.com/ You can see how WordPress sites all start from a basic "index.php" building their structure, and then from there, get extended by other files in the theme folder... If there's an index.php then the whole site will fall back to that, but then if you create a single.php then all individual pages will display that single.php, while blog-style post collections will fall back to index.php. Then, if you create an archive.php on top of that, then your blog roll pages will use archive.php and then fall back to index.php, etc., and that follows throughout the whole site heirarchy.

I think if you can understand the WP Template Heirarchy, then that's the fastest route to starting to make modifications to WordPress, even if they're just simple style changes.

I really don't think that you need to understand all of the ins and outs of WP to begin WordPress development. I think most front-end developers can pick up WP development pretty quickly by modifying templates, and then as their requirements become more complex, then they need to expand out to understand Hooks, Filters, and custom Functions.

I'm sure that Udemy's courses are pretty good, and if you get one of those $10 deals then I'd say go for it and purchase one.

 

[Martal]

great response

great response nr 2

Thanks for the great feedback guys. Its encouraging that you say that I should just dive in - I guess that would be the best way to learn.

Right now I am a bit overwhelmed by all the options on my plate. I have a week off work, I signed up for a Treehouse free trial and Im torn between WP, PHP, Rails and ... everything else. I want it all, but end up getting none of it.

I guess I just need to clear my head, figure out what I want to do and then find some tutorials.

 

[Chuckl3s]

Anybody here try the Code Academy Pro? Its $20 a month. I love their tutorials and I've actually learned a lot from basic Code Academy but curious if its worth it?

 

[Daffy Duck]

Maybe one of you guys could answer me a question:

An old website I have to look after (and currently updating) has a re-write from javascript.js to javascript.php and all the sites JS in the PHP file, now my question is this, why would they do this?

Sadly I cannot ask the person who did this as they no longer work here.

 

[The Albatross]

Anybody here try the Code Academy Pro? Its $20 a month. I love their tutorials and I've actually learned a lot from basic Code Academy but curious if its worth it?

Haven't used CodeAcademy pro, but I've used and recommend Code School, which is similarly priced, and really excellent.

My experience with code acadmy has always been negative.

 

[The Albatross]

Maybe one of you guys could answer me a question:

An old website I have to look after (and currently updating) has a re-write from javascript.js to javascript.php and all the sites JS in the PHP file, now my question is this, why would they do this?

Sadly I cannot ask the person who did this as they no longer work here.

It could be any number of weird reasons (maybe former dev's code editor only did code coloring for PHP files, maybe the person was a kook, etc...), but it's probably because some scripts had to execute PHP inside of the JavaScript or pass values (from PHP) as JavaScript, or execute both, and so the programmer thought the most convenient way to do this was to have all JS be inside of PHP files, and then use rewrites everywhere.

Who knows maybe there were security reasons too around file permissions and the easiest solution was to "have no JS on the server," but that's probably not a good reason.

 

[Daffy Duck]

Thanks for the answer, looking through the code it does seem like it's just simple JS and nothing special is happening.

There's also plenty of other JS on the site too, the practices are a little odd here to say the least so it could just be done that way just because.

 

[Chuckl3s]

Haven't used CodeAcademy pro, but I've used and recommend Code School, which is similarly priced, and really excellent.

My experience with code acadmy has always been negative.

I'll check out Code School. Whats your complaints about Code Academy?

 

[Somnid]

Facebook is releasing Yarn, an NPM and bower compatible package manager with more determinism: https://code.facebook.com/posts/1840075619545360