Jump to content

Fee

Members
  • Content count

    17
  • Joined

  • Last visited

About Fee

  • Rank
    Forum Newcomer
  • Birthday 02/12/1992

Users Experience

  • Experience
    Beginner
  • Area of Expertise
    I'm Learning

Profile Information

  • Gender
    Male
  • Location
    Scotland
  1. Smooth Wavy/Skew Background Sections

    I think SVG would be the way to go. Using the border-radius property would be a possibility, but since as far as I know it isn't possible to create a double curve in CSS, you would need multiple pseudo elements to achieve this. You might even be able to do this using a radial-gradient as a background image, but again I would suspect you would need pseudo elements. It's actually quite a tough shape to create, I had a go using the two CSS methods I mentioned above and couldn't get that close. The background gradient on the other hand is no problem. Use a linear-gradient property on a background image, as seen here: Code Pen Linear-gradient is supported by most if not all browser I believe.
  2. Blur hover effect

    Without seeing your code it's quite difficult to make a suggestion. I'm assuming you will need to target the image itself, rather than the div. Post your code inside the code tags or dump it at the link below and people will be able to help much more effectively. https://codedump.io/
  3. I should probably note that the solution I provided is outdated, it uses AngularJS. The more recent framework is just known as Angular. If you're going to start going down an Angular route, it'd probably be better to focus on the more recent framework. The following tutorial should help: https://scotch.io/tutorials/routing-angular-2-single-page-apps-with-the-component-router I would still give Angular a chance, in terms of job opportunities it is still miles ahead of React and has a bigger community to get support from (a result of being an older technology). A lot of the problems have been addressed in the move from AngularJS - Angular and although it's nowhere near a perfect tool (neither is React) it's still a strong tool to have in your arsenal. I reckon you should check out this article, give it a chance http://blog.techmagic.co/angular-2-vs-react-what-to-chose-in-2017/
  4. Chrome Extension to Capture Open Tabs

    Okay - I've had some progress. I was hoping some people here might have some ideas on how to proceed. The extension can capture all the open tabs and save this to a user's local file system as a .bat file - using FileSaver.js. However, this just feels a bit... unethical. Rightly so Chrome gives a security warning prior to the download. I'd really like to generate a HTML file on the fly with inline JavaScript used to open all the captured URLs, this could then be saved to the user's local file system. This method, however, is impossible due to Chrome's pop-up blocking methods. Can anyone think of a smart way around this? Next step, once this is solved, is to incorporate an interface for naming the file prior to download. Anyway, if anyone is interested, here is the code: background.js // background.js var activeSession = []; // Called when the user clicks on the browser action. chrome.browserAction.onClicked.addListener(function(tab) { //Tab query with no parameters, returns all open tabs. chrome.tabs.query({}, function(tabs){ //For each tab push to active session array tabs.forEach(function(tab){ activeSession.push(tab.url); }); }); //Second query return active tab - neccessary to call content.js chrome.tabs.query({active: true, currentWindow: true}, function(active) { chrome.tabs.sendMessage(active[0].id, {session: activeSession}, function(response) { console.log("Saved"); }); }); }); content.js //content.js var date_time = new Date().toLocaleString() var fileName = "captured_tabs-" + date_time; chrome.runtime.onMessage.addListener( function(request, sender, sendResponse) { var tabs = ""; console.log(request.session.length) for(var i = 0; i < request.session.length; i++){ tabs += "start chrome.exe " + request.session[i] + "\n"; } var blob = new Blob([tabs], {type: "text/plain;charset=utf-8"}); saveAs(blob, fileName+".bat"); });
  5. Looking for advice from a JavaScript wizard to confirm whether an idea I have is possible. Basically I am looking to make a Chrome extension that captures a browser session i.e. all the open tabs and saves this as a file on the user's local file system that can be executed to restore the browsing session. Similar to bookmarking - but the user could effectively bookmark a number of related websites and restore them in one click. I'm at a loss at where to start with this, does anyone have any insights? Is this even possible to achieve in JavaScript? Similarly, is it possible to save a browser executable that opens multiple tabs?
  6. Bit of a late reply, so I hope you're still checking this. If you're just getting into Angular definitely check out Scotch.io they have great tutorials. So, routing with Angular is actually really intuitive if you are familiar with an MVC architecture, it's a lot more simple than achieving the same thing with AJAX calls. For example: This would be the simplest file structure to make a really basic one page app: - script.js: Put all your angular code here. - index.html: Your main page where the views will be injected. - home.htm: The last three are your views. - page2.htm - page3.htm So, to start with inside index.html, set up your basic page structure and things that'll be present across your app i.e. your navigation and that kind of thing. Make sure when you are linking to a view to put a # in front of the URL i.e. href="#page2" - Make sure to define your angular app in the opening HTML tag. - And set the default controller you want inside the body tag, other controllers will be dealt with by Angular's routing service, seen below. <!DOCTYPE html> <!--Define our angular app--> <html ng-app="myApp"> <head> <!--Load Angular--> <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.25/angular.min.js"></script> <script src="//ajax.googleapis.com/ajax/libs/angularjs/1.2.25/angular-route.js"></script> <script>script.js</script> </head> <!--Set the default controller--> <body ng-controller="homeController"> <header> <nav> <ul> <li><a href="#home.htm"</li> <li><a href="#page1.htm"</li> <li><a href="#page2.htm"</li> </ul> </nav> </header> <div id="view"> <!--Inject views here--> <div ng-view></div> </div> </body> Inside script.js you'll need to create the Angular module and controllers. Let me explain what's going on here: - First you create the module and name it something more appropriate than myApp hopefully and include ngRoute for all the view injecting. - Next you start to configure the routing using angular's $routeProvider. Specifying when a specific URL is accessed which template (the view file) and which controller to use. - At the bottom we define a controller for each page and set a scope variable of scope.message equal to something for testing purposes. //Create your module including the ngRoute. var myApp = angular.module('myApp', ['ngRoute']); //Start to configure your routes. myApp.config(function($routeProvider){ $routeProvider .when('/', { templateURL: 'home.htm', controller: 'homeController' )} .when('/page1', { templateURL: 'page1.htm', controller: 'page1Controller' )} .when('/page2', { templateURL: 'page2.htm', controller: 'page2Controller' )} }); //Create a controller for each view: myApp.controller('homeController', function($scope) { $scope.message = 'Home page!'; }); myApp.controller('page1Controller', function($scope) { $scope.message = 'Another page!'; }); myApp.controller('page2Controller', function($scope) { $scope.message = 'And one more...'; }); Finally you just need to make your views. For example: - {{ message }} will print the value of the scope variable message, in this case "Another Page!" <!--page1.htm--> <h1>This is the view rendered for page 1!</h1> <p>{{ message }}</p>
  7. Over the last couple of weeks I've been getting my feet wet developing some full stack mean solutions to some ideas I've had floating around for a while. In the past I've exclusively approached problems with a typical LAMP stack solution. Personally, I wouldn't class myself as a designer or as a developer. I just sort of dabble in both, learning what interests me at any given time. Now, I realise at some point in the future I am going to have to make this distinction and focus primarily on one or the other if I want to pursue this in a professional capacity. With that in mind, does anyone have experience with the MEAN stack and the workflow that would exist between a team of designers/developers. Because it seems to me that it blurs the line between the professions significantly. Or would a full stack developer be its own niche entirely? With that said, I would have to say my experience with this so far has been pretty positive. And I would be interested to know what others think? I particularly like the MVC architecture that angular allows you to follow. In contrast, mongoDB is weird, but it's probably because I've never touched anything noSQL before this and can't throw off the relational data model. Or it could simply be that what I've trying would be better suited to a RDBMS, I don't know. I've heard as well, that one major problem AngularJS faces is poor SEO performance. I don't have a great understanding of the implications of good SEO so I wonder if anyone could clarify this? I'd also like to discuss the future of these technologies, does anyone think that the demand for mean technologies will increase, or is it more of just a fad? And in long run it would be better to focus on more established languages like Ruby and Rails? Or, am I constraining myself a bit by pushing everything into one stack or another? Should I instead by focusing on each framework and what it can do exclusively. Then approach each project with what works best in that scenario, for example AngularJS might be a good fit, but a mySQL database would serve better, so breakaway from an established stack and use each technology based on its own merit. Is this the right approach? I know I'm rambling a bit here, so apologies. It's just a compilation of some thoughts that have occurred to me recently.
  8. Noobie questions

    Please do. I'm happy to put together some stuff for a drop down menu too, but I see little point in reinventing the wheel so to speak when it has been done hundreds of times before and probably to a higher standard than I am capable of. I did actually consider marking myself as intermediate, but there is so much to learn that I feel I have barely scrapped the iceberg. It's essentially just where I see myself, we all have our own views on where we are versus where we would like to be. And with that in mind I still consider myself as someone who has a lot to learn.
  9. My Portfolio

    I don't know if everyone will agree, but I personally dislike those skill bar sliders everyone seems to use and you've included on your homepage. Firstly, what is the actual meaning it gives? There is no unit or metric, what does 9/10 Python actually mean? 9 years? 9/10 of the way towards mastering Python to the extent that is humanly possible? If so, that's pretty impressive. It has no actual demonstrable value to a potential client. Incidentally I should also point out that I naturally read those things in reverse order, so you've really only pointed out your weaknesses not strengths. Also not to mention how heavily it depends on individual perspective. I doubt two people would ever truly agree on what being 7/10 in CSS actually entails, it's arbitrary. With that said, the overall design isn't bad. The massive Contact Us image seems a bit out place and too big. I'd be inclined to half the size and stick with the font used in your name in the header, rather than an image.
  10. Noobie questions

    Try not to let CSS intimidate you, I understand it can be pretty overwhelming getting started/coming back after a long period of time. A good plan is probably first to get the basics of linking up a stylesheet understood. And then from there understanding how this effects your html. Have a read of this: https://www.tutorialspoint.com/css/what_is_css.htm Once you've followed through some of the above tutorials, working with a background image is probably actually a good way to get your feet wet with CSS. Mainly because (if you do it the right way) it will introduce you to different selectors and some browser compatibility prefixes. Anyway, take a look at the following CSS: html{ background: url(img/background.jpg) no-repeat center center fixed; -webkit-background-size: cover; -moz-background-size: cover; -o-background-size: cover; background-size: cover; } The first thing I will point out is that the second line, in which you declare your intended background image would in and of itself suffice to create a background image. However the above CSS is a good way of ensuring the background image will cover the entire browser window, dealing with different screen sizes, devices etc which is half the battle when it comes to building websites these days. Secondly, you will notice we are applying this style to the html element, rather than the body element, which may have been what you expected. The reason for this is that the body element doesn't immediately take up the entire height of the viewport whereas the html element does. To specify which image you want to use, simply declare a background: url() and paste in the directory path to your desired image within the parenthesis. If your stylesheet isn't in the root folder in relation to your images, you can begin the path with ./ to return to the root directory. Then we apply some values to our background property. Firstly, no-repeat, this ensures our image isn't repeated in a tile like fashion. Next we position the background image. By default it will start at 0, 0 (the top left). Since we are intending to cover the entire screen we need it positioned in the middle, so we specify center center to ensure it is placed 50% horizontally and vertically. Finally we specify the background-size: cover; The background-size property in CSS is really useful, but also a bit complex. If you feel like it, read up on it a bit. But for this I'll suffice to say specifying cover ensures the image will stretch to fill the container whilst maintaining width/height aspect ratio. You'll notice we've declared this four times, with different prefixes at the start. We do this to ensure different browsers support our cover. Webkit covers chrome, Android, iOS and safari I believe. moz covers Firefox and o covers opera. I believe microsoft browsers support it directly, but if not we can use the -ms- prefix. With regards to a dropdown menu, this is a bit more tricky, and is probably beyond the scope of what I could explain in a single post. My advice here would be to use Google. There is quite literally thousands of tutorials on dropdown menus, some will involve the use of JavaScript, but if you don't want that Googling something to the effect of "Pure CSS Dropdown Menu" will be a good starting point to research. I hope some of this will be helpful, as I said don't let yourself become overwhelmed with the amount of things there is to learn, these things take time and no one ever stops learning and improving. If it's too much just grab the first line of code and it will suffice to begin with.
  11. Disable hover state for touch devices

    I don't know how good the browser support is for the following option, but as far as I know this is the best way to accomplish this without using JavaScript: @media (hover:none){ /* No hover styles here */ } @media (hover: on-demand){ /* Touch screen device styles here */ } @media (hover:hover){ /*Mouse device styles here */ } This will basically target devices that support hover fully, partially (as in the case of touchscreen) or none at all. The problem with this approach is that it does not account for the growing number of users using both touch and mouse, i.e. surface users. It will revert to the lowest setting, for example users with a mouse and a touchscreen would get the hover: on-demand styles. It's also not dynamic, so plugging in a mouse would not change the settings. However considering the hover effect you are using isn't essential to the site's functionality I think this would be sufficient. If not Google some JavaScript solutions, I'm pretty sure there is a decent discussion of this problem on Stack Overflow.
  12. Animated profile Picture on Facebook

    You can quite easily copy the URL of .gif image hosted on another website and post this to Facebook, it will retain its animation. However the profile picture cannot be set from a URL, it must either be uploaded directly or chosen from an existing uploaded photo. Doing it via Facebook's built-in feature is the only way to do this currently.
  13. Animations in HTML 5

    It's CSS3 you will need to utilise for animations - HTML5 is just the mark-up language. The tutorial below provides a pretty good introduction to animations with CSS3: https://webdesign.tutsplus.com/tutorials/a-beginners-introduction-to-css-animation--cms-21068 You would need to look specifically at transforms and translate to make moving shapes, as seen below: https://css-tricks.com/almanac/properties/t/transform/ These two resources should give you enough to get started. I should probably point out that with these animations comes a lot of considerations. For example, browser compatibility and responsiveness to name a few. They should be used sparingly and in my opinion it's usually better to avoid "gimmicky" designs.
  14. Animated profile Picture on Facebook

    Perhaps practicing some patience would be helpful. It's my understanding that this is a feature built into Facebook's functionality on android and ios exclusively. Facebook refer to it as a "video" although it probably is still a .gif file. As such uploading a .gif manually probably won't work - I am guessing to avoid file-size restrictions etc applied. Basically navigate to your profile on an android/ios app and change your profile picture as normal, however select the option "Take a new profile video" or "Select profile video" as appropriate. You will be prompted to create/select a video file, rather than a .gif.
  15. Mobile menu

    This certainly isn't the cleanest solution, but without seeing your mark-up or being totally clear on what you want to achieve, the best I could recommend would be: Have a home link with a display: none; property on your page. Inside your media query simply change it to a block level element, i.e. display: block; That will effectively give you a home link which is hidden on desktop view and appears on mobile.
×