Jump to content


  • Content count

  • Joined

  • Last visited

  1. Career advice

    Thank you very much for your explanation.
  2. Career advice

    Thank you everyone for the useful advice. Things I'm going to take from this thread: - leave Joomla - Play for REST API in Wordpress - try to incorporate React components in Wordpress (just for fun because I can) - Deepen my Wordpress knowledge. Now, could you also clarify one thing for me, which is unrelated to my original question. I understand the idea of a SPA. You just have one page that you modify via javascript. Setting aside clients' requirements, would it be a misuse of ReactJS to create a standard website as an SPA. I know it'd be an overkill but besides that would there be any other reasons for not doing it as an SPA. Similarly, when does a website become a web application (requiring SPA)? What is the difference? Is it just that most traditional websites offer just presentational elements (text, images, etc.), and a web app would also have some functionality (usually done by JS). In other words, when do we say: ok, now, this will need an SPA (as opposed to a standard website)? Thank you.
  3. Hi, My main job has nothing to do with web design but I'd like to gradually focus more on doing websites. I have had around 1-2 website jobs a year for the last 2-3 years. My problem is that I'd like to deepen my knowledge and skills in JavaScript (and ReactJS). I'm getting better at it which motivates me even more. Now this year I've had 2 website jobs where unfortunately due to client requirements, I could not have used ReactJS. The clients requested an easy way to update articles, upload images, etc. so I did both websites in Joomla, which is fine but if I keep doing it (ie. Joomla), it'd make sense to delve in PHP in some other Joomla related stuff (which I'm not proficient in and which I'm not extremely passionate about). Due to me being a very small one-man organisation, inevitable I'll keep getting very small clients (friends of the friends, small companies) who will most likely again want to easily update the website after I've created it (ie. CMS). How do you guys do it? On the one hand, I can't imagine that all of you do website in CMS for people. On the other hand, I can't imagine that clients agree that any updates are done by you (and you get paid for that)? What is your experience and advice? Does my interest in ReactJS fit anywhere here? In my situation, would I need to forget about ReactJS and focus on CMSs? I hope it makes sense what I'm asking about. Btw, I hope this thread is in the right part of the forum Thank you portia
  4. Hi all, Is there a platform/module or anything that can be used for document collaboration. I would like to have it as part of our website where clients can log in and give us pointers on the documents we are working on. I know about google docs/ office365 / dropbox paper / etc. These are platforms themselves. I'd rather have something that is part of our website, not a separate service requiring gmail/outlook/dropbox accounts. Any suggestions please. Thank you
  5. Boilerplate (ES6, webpack, sass)

    I've tried to do it on my own but it does not seem to work - can you please advise me how to correct it. When I go to localhost:8080 it just displays the content of the directory where js lies, let alone do the es6 features. I've attached the folder with my files (removed the node_modules directory). Could anyone have a look and advise/fix so I can use es6 features? Thank you. template-webpack.zip
  6. Boilerplate (ES6, webpack, sass)

    Hi there, Do you know of a simple boilerplate with the above. I don't need ReactJS (most boilerplates I found are geared towards react). I just want something simple to test ES6 (and ideally configured for SASS - but not necessarily - I can add it). Thank you
  7. A semi-transparent layer with text over an image

    Got it. The inline-block should be the parent wrapping div, not the img element inside it.
  8. A semi-transparent layer with text over an image

    Having googled it for some time, I think it's to do with this issue: https://davidwalsh.name/remove-whitespace-inline-block whitespace between inline-block elements As my divs are generated dynamically in js, I'm struggling to solve it.
  9. A semi-transparent layer with text over an image

    Hi, Please see below - it works ok however, the images are now displayed as block: img1 img2 img3 as opposed to img1 img2 img3 I've added display:inline-block but it didn't work. I had to remove float: left as that made all the captions be displayed in one absolute position (not absolute of each of the images) // Add images to #gallery for(var i = 0; i < Object.keys(imgs).length; i++) { var div = document.createElement("div"); div.style.position = "relative"; var img = document.createElement("img"); var txtdiv = document.createElement("div"); txtdiv.style.position = "absolute"; txtdiv.style.left = "100px"; txtdiv.style.top = "10px"; // If the tage is 'all', display all images if (filter === "all") { img.src = imgs[i].src; img.alt = imgs[i].alt; txtdiv.innerHTML = img.alt; } else { // Display only images of certain category (tag argument) if (imgs[i].tag === filter) { img.src = imgs[i].src; img.alt = imgs[i].alt; txtdiv.innerHTML = img.alt; } } // end if filter div.appendChild(img); div.appendChild(txtdiv); this.settings.gallery.appendChild(div); #gallery { display: inline-block; width: 100%; background-color: red; img { margin: 5px; display: none; } } If it helps, I've included a link to all the files (js, img, scss, etc) Thank you for your help https://drive.google.com/file/d/0B7WMCmPnTGahTXJuQnk3UllBZlk/view?usp=sharing
  10. A semi-transparent layer with text over an image

    Thanks. Yes, I did mean descendants:) Ok, thanks - I'll do it.
  11. A semi-transparent layer with text over an image

    Thanks. The #gallery is needed for js to identify it and create images in there. When it comes to the margin issue - it's scss (sorry the indentation has not been preserved when I pasted it) - but my understanding is that only img that are parents of #gallery will have a margin or should I have done: & img {..} ? When it comes to the main problem of positioning so should I do: <container div (position relative)> <img> - what position/attributes? <text div> - what position/attributes? </container div> Thank you
  12. Hi. The code snippet below is part of a bigger code. Basically, I have two divs: #filter and #gallery. In filter there are a few categories of photos. When you click on any of them it'll filter the categories of images being displayed. The #gallery has the images (loaded from a json file). In javascript I create img objects and append them to #gallery. Now as you can see in the code below, I'm trying to add another layer (div?) with some description. The thing is I'd like the text div be on top of images, not below as it is now. Any advice, please? Thank you // Add images to #gallery for(var i = 0; i < Object.keys(imgs).length; i++) { var div = document.createElement("div"); div.className = "description"; var text = document.createTextNode(imgs[i].alt); text.className = "desc"; var img = document.createElement("img"); // If the tage is 'all', display all images if (filter === "all") { img.src = imgs[i].src; img.alt = imgs[i].alt; div.appendChild(img); div.appendChild(text); this.settings.gallery.appendChild(div); } else { // Display only images of certain category (tag argument) if (imgs[i].tag === filter) { img.src = imgs[i].src; img.alt = imgs[i].alt; div.appendChild(img); div.appendChild(text); this.settings.gallery.appendChild(div); } } // end of if //Add mouse events to images img.addEventListener("mouseover", function(e) { console.log(e.target.alt); }, false); } // end for add images to #gallery .highlight { color: green; } #gallery { text-align: center; img { margin:5px; } .description { float: left; background-color: rgba(0,0,0,0.0); width: 405px; height: 205px; } .desc { } }
  13. create a mobile app using html5/css/js

    Thank you. I've been seeing a lot about React lately. I'll give it a try.
  14. Hello, I am not sure if this part of the forum is the best one for my question but hopefully it is. Basically, I've been learning javascript over the last months and have started getting interested in making a mobile app. I know that there are hundreds of articles on that but the reason I'm asking it here is that some of the articles might be sponsored articles promoting certain products, some of them are a bit old and we all know how quickly it's been changing in this sector. Additionally, it's always good to hear from people who have tried a few and can provide a first hand experience feedback on using a solution. My question is: which software/framework/product (free, ideally) would you recommend for creating a cross-platform (at least Android/iOS) apps written in html/css/js? Thank you very much in advance.
  15. canvas - toggle rect colour fill

    Hi there, I have created a grid with randomly coloured rectangles (well, squares). Additionally, I added an event to get the mouse coordinates within canvas on mouse click. Now, my intention is for a user to click on squares to flip between black fill and no fill (or white fill). I can think of a way of creating a new rectangle (that is appropriately filled) but if I kept clicking on a square, it would result in new objects being added to on top of each other (white square, black square, white square, etc.) - this would be wasteful. Is there a way of modifying an existing rectangle in terms of its fill (as opposed to creating a new one)? Here's what I've got: var canvas = document.getElementById('canvas'); ctx = canvas.getContext("2d"); // Generate canvas with a grid var canvasCreate = function(w, h, f) { canvas.width = w; canvas.height = h; //drawSym(6) f(6); }; symArray = function(aSize) { a = new Array(); for (i=0;i<aSize;i++) { a[i] = new Array(); for (j=0;j<aSize;j++) { a[i][j] = Math.floor(Math.random() * 2); } } return a } var drawSym = function(n) { // Generate array arr = symArray(n); for (i=0;i<n;i++) { for (j=0;j<n;j++) { ctx.beginPath(); ctx.strokeStyle = '#555'; if (arr[i][j] === 1) { ctx.fillRect(i*50, j*50, 50, 50); } ctx.rect(i * 50, j * 50, 50, 50); ctx.stroke(); } } canvas.addEventListener('mousedown', mouseMove, false); }; // Get the mouse coordinates function mouseMove(e) { var mouseX, mouseY; if(e.offsetX) { mouseX = e.offsetX; mouseY = e.offsetY; } else if(e.layerX) { mouseX = e.layerX; mouseY = e.layerY; } console.log(mouseX, mouseY); var gridX = Math.floor(mouseX / 50); var gridY = Math.floor(mouseY / 50); console.log(gridX, gridY); } The function is fired up from an html page with: canvasCreate(300, 300, drawSym); Thank you for your help